0-banner.png

U :Dessert Story

 

U :Dessert Story

Responsive Web Design

 

Client: U :Dessert Story, a local dessert place

Timeline: Oct 2018, 2 weeks

Deliverables: Website prototype, Branding

Team: Solo, with mentor guidance

Role: UX/UI Designer

Tools: Sketch App, Illustrator, InVision

 
 

THE CHALLENGE.

U :Dessert Story is a sit-down dessert place in San Francisco that serves Korean, Japanese, and Thai-influenced desserts. The business focuses on the presentation of its food and decor, explaining its growing popularity since opening in May 2018. Although U :Dessert Story is active on Facebook, Instagram, Yelp, and Uber Eats, they currently do not have a website.

Objectives.

  • To design a responsive website for U :Dessert Story customers

  • To expand upon U :Dessert Story’s branding that is consistent with their existing brand direction

Note: This is a speculative project, and I am not affiliated with U :Dessert Story.

 

Process.

design-process-grey.png
 

 

01. RESEARCH

Goal: To research the current position of the business and its customers

Process: Market Research / Competitive Analysis / Contextual Inquiry Interviews

 

Market Research.

I first looked at any online information about U :Dessert Story and its direction as a business. Then, I dug deeper into statistics, challenges, and trends about dessert places in San Francisco. This helped me gain a general understanding of the business and industry.

 

Competitive Analysis.

Next, I identified several competitors of U :Dessert Story and evaluated them based on their online information. The comparison allowed me to better understand customers expectations and how U :Dessert Story can position itself against competing businesses.

 

Contextual Inquiry Interviews.

To gain primary research data, I conducted contextual inquiry interviews with 6 U :Dessert Story customers about their experiences with dessert places. The interviews consisted of how they discover dessert places, their experiences with U :Dessert Story, and the resources they use while getting dessert. I made observations about the people, food, and atmosphere as a customer of U: Dessert Story. By the end, I was able to learn more about who U :Dessert Story customers are and how the business interacts with them.

  • Number of Participants: 6

  • Gender: 2 male / 6 female

  • Age: 22-30

  • All San Francisco residents

  • 4 were visiting for the first time / 2 had visited 2-3 times

 

02. Define

Goal: To define the target user and understand their needs, goals, and frustrations

Process: Empathy Map / Persona / POV Statements + HMW Questions

 

Empathy Map.

I organized data points from each interview participant into an empathy map in order to empathize with users. I then rearranged the data points into related groups to gain insights about the target user’s needs.

 

Persona.

Next, I created a persona “Emily” to represent the user needs synthesized from the empathy map. Emily’s goals, motivations, and frustrations also reflect the majority of data points collected from participants. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.

 

POV Statements + HMW Questions.

To translate Emily’s needs into actionable tasks, I framed them into point-of-view statements and how-might-we questions.

 

03. IDEATE

Goal: To ideate website features, information architecture, and flows

Process: Product Roadmap / Sitemap / Task Flow / User Flow

 

Product Roadmap.

Using the how-might-we questions, I brainstormed as many solutions as I could think of and chose several features to prioritize within the website design.

 

Sitemap.

Next, I created a sitemap in order to visualize how the information can be structured such that the user can intuitively navigate throughout the website.

 

User Flow.

To analyze the flow of the website, I mapped out two user flows based on common scenarios I found from the user research.

 

TASK Flow.

I then explored the flow in more detail by constructing a task flow about a user arriving to the homepage and wanting to know more about U :Dessert Story.

 

04. DESIGN

Goal: To design mid-fidelity wireframes for responsive screens

Process: Sketches / Mid-Fidelity Wireframes

 

SKETCHES.

For designing the UI, I started out with rough sketches of the website pages on desktop. I then made cleaner versions of the pages and annotated the features, helping me plan out what to include.

 

Mid-fidelity Wireframes.

I then created mid-fidelity wireframes in Sketch, including desktop, tablet, and mobile versions for each page.

 

05. PROTOTYPE

Goal: To prototype a mid-fidelity website and gain usability feedback

Process: Prototype / Usability Testing

 

Prototype.

To prepare for usability testing, I created an InVision prototype using the mid-fidelity wireframes. Feel free to interact with the prototype using the button below.

 

Usability Testing.

Objectives:

  • To test if users can accomplish tasks successfully

  • To identify areas of difficulty and inconsistency within the website design

  • To determine the overall usability of the website

User Tasks:

  • Find general information about the dessert place

  • View the menu

  • Find the address and store hours

  • Identify how to make a reservation

Results:

I conducted usability testing at local coffee/tea shops with 6 participants within the age range of 22-38. I gathered data from direct observation and audio recordings. The overall completion rate was 100% and the error-free rate was 50%.

Conducting usability tests at a tea shop.

 

06. ITERATE

Goal: To iterate upon the design and develop high-fidelity wireframes

Process: Affinity Map / Branding / High-Fidelity Wireframes + Prototype / UI Kit

 

Affinity Map.

I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. This allowed me to better understand the usability of the current design.

 

BRANDING.

To expand upon the existing brand, I kept U :Dessert Story’s original logo and introduced colors and typography selections. I kept the color palette muted to avoid competing with the vibrant imagery of the food and restaurant. Knowing the target audience is mostly young adults on casual dates, I wanted the branding to feel modern, relaxed, and appealing.

 

HIGH-FIDELITY WIREFRAMEs + PRototype.

For the next step, I applied the branding and styling to the wireframes and made an updated prototype. Feel free to view the desktop prototype using the button below.

 
 

UI KIT.

While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference.

 

 

Reflection.

Overall, we were able to design a responsive website for U :Dessert Story, expanding its branding and online presence. By considering the goals of the business and target user, we built a platform that promotes engagement between U :Dessert Story and its customers. With more time, I’d aim to develop the website and discover areas of improvement through the iterative design process.

Next Steps.

  • Work with developers to identify any technical limitations

  • Gain usability feedback on a high-fidelity prototype

  • Continue organizing design deliverables for handoff