Project Brief

 

Celebrate life and culture with great stories in LA
 

Story Forever is an attempt at re-imagining the way people interact with the Hollywood Forever Cemetery and the rich Hollywood culture it represents. We encourage people to discover and create audio stories around LA with a product that facilitate this task whenever and wherever. 

[unex_ce_button id="content_mcscyhvr9,column_content_9glti6uq0" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#003bff" button_border_hover_color="#ffffff" button_link="http://storyforever.jiachengyang.com/home/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]CHECK THE FULL CASE STUDY WEBSITE[/ce_button]

Final prototype video

My Responsibilities

 

A tough team a tough topic
 

StoryForever is a group class project at 2017 ACCD IxD2  with Jennifer Rodenhouse 

Group Members
Me

Anna 
Akshay 
Daniel


This a 14 weeks project started from understanding the user to polished prototype and user cases across multiple platforms. I was the leader of the team to conduct group work, push the end result and loop the iteration with users, instructor and the team members. We made it to the end with a tough Cemetery topic and a team having trouble collaborating.

 

Dark style team photo😄 

The Challenges

 

Make the cemetery more interesting and engaging? 

The project started as the team went out to actual physical spaces in LA and observed people and problem within the space. Other teams chose Grand Central Market, MOCA, Union Station, and we were assigned to the Hollywood Forever because this was the place left on the list.

The cultural challenges: it is impossible to even imaging having fun in a cemetery in asian cultures, but people are having concerts and movie screening in the Hollywood Forever here in California. 

The team challenges: with different levels of skills and different mindsets, how to stay together and work together for something we will be proud of for 14 weeks?

Hear the instructor and other people talking about the challenge and how they like our solution.

The Process

 

This the best practice of collaborative research so far. We did much much more than the course asked. The richness of research inspired us to reach some creazy ideas but it became a problem later. 

[unex_ce_button id="content_75vo2eo6x,column_content_q1ax7sazz" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#2626ff" button_border_hover_color="#000000" button_link="https://docs.google.com/document/d/11u7UmT7EHWjq66HpzaZcXwPGltxFS6yrdh6_mtCqkDk/edit?usp=sharing" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]CHECK THE RESEARCH DOC[/ce_button]

Who did we see in Hollywood Forever

The types of interactions from the users

Research result presentation

The Process

 

Follow along the road then the big pivot...

We then quickly droped into the trap of creeping featurism. The observation from the cemetery clearly pointed out two groups of users that were nothing alike. This requires a product that serves both sides and somehow connected inside. We ended up losing our direction and the midterm concept presentation was totally a mess. Latter on we got back to focus on the concept: story, which we thought could be the best overlap of the two groups. With this core concept, we were able to narrow down the features and concentrate on really persuasive use cases.  

[unex_ce_button id="content_n1l0hxbh9,column_content_q1ax7sazz" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#2626ff" button_border_hover_color="#000000" button_link="https://docs.google.com/presentation/d/1vxt6qyDVWskwWxjOzDj4dGZVW_fPT5jLRtgBLungdlc/edit?usp=sharing" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]CHECK THE CONCEPT PRESENTATION[/ce_button]

This is our instructor's ideation, we went back to the direction of celebraing life thus simplified the features.

We started to focus on what we thought could be the sweet spot for serious group and fun group

We narrowed the features to three to support one core concept: Story.

The Process

 

Interaction Design

Visualizing the main feature with key flows quickly and testing are what we did in this phase.  Wireframes were focused on the screens that belonged to the flows, we found that designing and testing  these flow realted screens was really helpful to save time and be concentrated. It is way better than put up all the screens together at once. The layout and interations are defined by the key features within the flows, jumping around these hard interfaces allowed the team to be more productive and passionate about the work. 

The wirefram master view, all the screens we needed for the key flow. 

I started to test out some motion in the interaction phase as well. 

[unex_ce_button id="content_90e2qnbjt,column_content_gelixefhp" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#2845ff" button_border_hover_color="#000000" button_link="https://docs.google.com/document/d/1e_hyV-RcFzTkwIKuP9SsgFBOt0agjEgjxf1nshJ_pY4/edit" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]SEE THE USER TESTING SCRIPT[/ce_button]
[unex_ce_button id="content_90e2qnbjt,column_content_olaz2mb66" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="full_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#284cff" button_border_hover_color="#000000" button_link="https://docs.google.com/presentation/d/1CJZR6njF3DSDNqz-_tFymfkmQY0MmAYnBsedv5lf8tM/edit?usp=sharing" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]SEE THE LO-FI USER TESTING RESULT[/ce_button]

The Process

 

Visual Design

Because our product went across three platforms, mobile, destop and tablet, keeping the visual language same across all of them can be a challenge. So I put more effort to make a design guideline. All the interfaces were constructed with components, and the components were made into symbol in sketch. With this design guideline approach, everyone in the team could perticipate the interface designn and deliver high qulity screens. 

The sticker sheet with components.

First round of dark theme interface.

The second round of white theme interface. We changed because dark theme did not perform well in ourdoor environment and the call to action affordances were too weak. 

Design Guideline Credit Daniel Yoon

The Process

 

The visual design process was a trial for me. It was not only about the interface, we were developing the visual style of this brand Story Forever as well. Here is the process of some brand image. The branding is not very detailed, but it does add some quality to the overall presentation of this product. 

Take the beautiful gradient sky of LA to form the logo. Feather represents story.

The logo and brand font.

The presentation poster.

Closer shot of the logo

The Process

 

Last thing I did at the visual part is to add polished motion to the prototype. They were used to tell compelling story at the demo day. Here are some shots of the motion details. 

Taking a tour motion.

The record motion.

Tablet motion.

The Reflection

 

Taking responsibility

The project was a the hardest one since I got into Art Center. Two reasons: a.Not all the team members were productive. B.The topic was just difficult to attack. These are things I learned from this project. 

1. Collaboration tool maters. 

Last time we got a super messy team folder. This time we used google drive to mannage all the design files. Google docs and slides are also adopted into our works. They are easy to use, fast to get the message across. This choice saved us countless time mannaging the version of design and keeping consistency. We also used Figma as interface critique tool, we used this to itterate and manage component library so everybody is always in the same page. 

2. Somebody has to lead.
A hard lesson. If the team wants to move forward, someone has to think more and do more. That's it. 

3. Do whatever to help you tell the story.
At the final demo, we prepared all kinds of screens and print materials to help us tell the user story. I never done this level of preperation before. Seeing all the students dressed up and got their best ready is very motivating. I got a taste of the Art Center final standard. 

 

Me showing the mobile prototype at demo day

The Feedback

 

Bring the culture and story to life. 

"You guys did a great job bringing the history to life and extending the experience beyond the physical place" Jennifer Rodenhouse. Course instructer.

"I saw the mourner and the tourist overlapping, that is a very challenging design space. But you succesfully tackled both personas with Story Forever" Zoe Padgett. IBM recruiter.

"What your team did really great is "bring to life" the culture of Hollywood Forever, I am a Wizard of OZ fan, I will definitely go there and discover stories with this product" Chase Morrison. Course TA 

You can see all the feedback from the interview video above.