U :Dessert Story
Responsive Web Design
Client: U :Dessert Story, a local dessert restaurant
Timeline: Oct 2018, 2 weeks
Deliverables: Website prototype, Branding
Team: Self-directed, with feedback from mentor and peers
Role: UX/UI Designer
Tools: Sketch App, Illustrator, InVision
U :Dessert Story is a sit-down dessert restaurant in San Francisco that serves Korean, Japanese, and Thai-influenced desserts. The business focuses on the presentation of its food and decor, which has contributed to its growing popularity since opening in May 2018. To build its online presence, U :Dessert Story wants to launch a brand-new website that shows what the restaurant has to offer.
This is a speculative project, and I am not affiliated with U :Dessert Story.
To design a responsive website for U :Dessert Story customers
To develop U :Dessert Story’s branding that is consistent with its current brand direction
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 business direction. The restaurant not only values quality desserts, but it also prioritizes the overall dining experience. In fact, it seems a major reason for U :Dessert Story’s popularity is that the business wants to give customers memorable dessert experiences to capture and share with company. Designing a new website presents the perfect opportunity to share these ideals to potential customers before they visit. The research also shows how the San Francisco is highly saturated with restaurants, which means an online presence is even more crucial for competing against other businesses.
Since the competition is so high, it was important to evaluate how U :Dessert Story compares to its competitors. Therefore, I identified dessert places that target a similar audience to U :Dessert Story and analyzed 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. Overall, U :Dessert Story seemed to be doing all the right things in gaining popularity among locals and providing exciting dessert experiences for customers, but a stronger online presence could launch the business even further in terms of competing against similar restaurants and gaining more customers.
Contextual Inquiry Interviews.
To learn more about the customer experience at U :Dessert Story, I conducted contextual inquiry interviews with 6 U :Dessert Story customers about their experiences. The interviews consisted of how they discover dessert places, their experiences with U :Dessert Story, and the resources they use while getting dessert. I also visited U :Dessert Story as a customer and made observations about the people, food, and atmosphere. 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
Goal: To define the target user and understand their needs, goals, and frustrations
Process: Empathy Map / Persona / POV Statements + HMW Questions
After talking to U :Dessert Story customers, I constructed an empathy map by organizing the data points from each interview participant into groups. I was able to identify the user needs based off of the most frequent patterns within the user data.
Next, I created a persona “Emily” to represent the findings synthesized from the empathy map. Emily is U :Dessert Story’s target customer, somebody who wants to have memorable experiences enjoying food with good company. 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.
After defining the target user, I created point-of-view statements to frame the insights and user needs. From these statements, I created how-might-we questions that encourage ideating solutions for Emily’s needs.
Goal: To ideate website features, information architecture, and flows
Process: Product Roadmap / Sitemap / Task Flow / User Flow
Starting from 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. I chose features based on feasibility, how many people the feature would impact, and how much impact the feature had on each person. The roadmap made it easier to focus on several key features for solving Emily’s needs, avoiding becoming overwhelmed with possible features to implement.
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. After researching other restaurant websites, I decided that a basic layout consisting of several pages would be most intuitive for users to navigate and would satisfy the user needs we identified.
To analyze the flow throughout the website, I mapped out two user flows that were based on common scenarios I found from the research phase. Examining the the sequence of user actions for each scenario showed the relationships between screens, which gave me a better understanding about how to craft intuitive experiences through the UI.
Next, I explored the flow in more detail by constructing a task flow about a user who wants to learn more about U :Dessert Story. The task flow helped me think through the user’s process in more detail and which information is most important.
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 pages. With cleaner and annotated versions of the sketches, I was able to present my ideas to others and gain constructive feedback at an early stage of the design. During this process, I referred to examples of restaurant websites and studied existing design patterns that make for a more intuitive user experience.
I then created mid-fidelity wireframes in Sketch, including desktop, tablet, and mobile versions for each page. This helped me focus on the basic layout and visual hierarchy of the website across responsive screens.
Goal: To prototype a mid-fidelity website and gain usability feedback
Process: Mid-Fidelity Prototype / Usability Testing
Before creating high-fidelity wireframes, I wanted to gain usability feedback about the current design without worrying about the visuals distracting participants or biasing their feedback. Therefore, I created an InVision prototype using the mid-fidelity wireframes in preparation for usability testing. Feel free to interact with the prototype using the button below.
To determine if users looking for a dessert restaurant are satisfied with the information on the website
To test if users can find necessary information about the restaurant efficiently
To gain feedback about the overall usability of the website design
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 who have a similar background to our persona, Emily. From direct observation and audio recordings, I was able to collect valuable usability feedback from target users.
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. In the end, the synthesized data indicated no changes were needed for the current design. Feel free to view the full affinity map here.
Before moving into high-fidelity wireframes, I created branding guidelines to make sure the branding is cohesive and agrees with U :Dessert Story’s existing branding efforts. After gathering inspiration in a mood board, I decided to keep :Dessert Story’s original logo and introduce new colors and typography. I kept the color scheme 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.
Finally, I applied the branding and styling to the wireframes in Sketch and made an updated prototype. The deliverable showcases the polished look and feel of the website, which helps convey the design to people such as stakeholders. Feel free to view the desktop prototype in InVision using the button below.
While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference.
tOverall, this project was relatively straightforward because the website was mostly informational and targeted a broad audience. Some of the main takeaways were improving my skills in responsive web design and developing branding with well-defined audience expectations. Moving forward, I’d want to share my designs with developers and see how we could implement the website.
Work with developers to launch the website
Gain usability feedback
Continue organizing design deliverables for handoff