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
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.
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.
Goal: To research the current position of the business and its customers
Process: Market Research / Competitive Analysis / Contextual Inquiry Interviews
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.
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
All San Francisco residents
4 were visiting for the first time / 2 had visited 2-3 times
Goal: To define the target user and understand their needs, goals, and frustrations
Process: Empathy Map / Persona / POV Statements + HMW Questions
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.
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.
Goal: To ideate website features, information architecture, and flows
Process: Product Roadmap / Sitemap / Task Flow / User Flow
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.
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.
To analyze the flow of the website, I mapped out two user flows based on common scenarios I found from the user research.
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.
Goal: To design mid-fidelity wireframes for responsive screens
Process: Sketches / Mid-Fidelity Wireframes
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.
I then created mid-fidelity wireframes in Sketch, including desktop, tablet, and mobile versions for each page.
Goal: To prototype a mid-fidelity website and gain usability feedback
Process: Prototype / Usability Testing
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.
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
Find general information about the dessert place
View the menu
Find the address and store hours
Identify how to make a reservation
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%.
Goal: To iterate upon the design and develop high-fidelity wireframes
Process: Affinity Map / Branding / High-Fidelity Wireframes + Prototype / UI Kit
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.
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.
While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference.
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.
Work with developers to identify any technical limitations
Gain usability feedback on a high-fidelity prototype
Continue organizing design deliverables for handoff