CLIENT

Domo

Designing a responsive website for local business

ROLE
UX Designer & Researcher (Solo)

Timeline
8 Weeks

TOOLS
Figma, Whimsical, Photoshop, Invision

After attending Le Cordon Bleu for baking and pastry, Chef Phil worked in various bakeries creating breads and other delectable desserts. He is looking to open his own bakeshop called DOMO which will serve donuts made from mochi, a Japanese sticky rice dough.

The lack of any online presence makes it difficult to show their products and attract potential customers to their brand. DOMO needs a responsive website and logo designed that aligns with the shop’s brand message. To further understand the problem, I conducted market research to gain a better understanding of the industry.

• Design a responsive website for local bakeshop

• Design a logo that aligns with shop’s brand

I began the project by researching the donut shop industry and compared how DOMO positions itself to its current competitors. To direct my research, the following goals and methods were outlined:

1. Understand the industry standards and its competitors

2. Discover the pain points, needs, and motivations of customers (both online and in-person)

3. Determine the demographics of customers purchasing desserts and other food trends

Research Methods

• Competitor Analysis - research competitor websites to determine the strengths, weaknesses, and branding

• Market Research - on the donut and dessert industry

• User interviews - conduct interviews with individuals who frequently search for trendy food and desserts

To gain more insight on the donut shop industry, I analyzed similar shops and popular bakeries in the Los Angeles area. I compared their offerings, the brand’s overall message, and if they had a prominent online presence. In addition, I examined the strengths and weaknesses of each company in relation to their competitors.

The market research statistics illustrated above drove me to me to explore the dessert industry further. As the UX Designer & Researcher for this project, I continued my research by interviewing 4 individuals including 3 females and 1 male between 22-32 years of age.

I wanted to understand:

• The most commonly used resources to search for local bakeries or desserts
• The positive and negative experiences when trying trendy food
• Any frustrating experiences while placing an order online

I reviewed the notes from interviewing the different participants, then prioritized each pain point based on its importance to the user as well as to DOMO. My assumptions of the importance to users were based on conversations with current and potential users.

To better understand the exact needs of potential customers, I created an empathy map to organize the requirements, frustrations, and goals. This helped to illustrate the exact needs of the customers.

Using my sketches as a guide, I designed mid-fidelity wireframes for DOMO’s website.

I created mid-fidelity wireframes to get a better idea of how the page would look. However, both wireframe options for the homepage looked crowded due to the image position and text descriptions.

I then created a provisional persona based on the information gathered from the interviews and market research. This revealed the potential customer that would typically purchase donuts and it served as a guide for the designs.

By understanding Lily’s pain points revealed through research, I was able to empathize with the user and approach the design with relevant insight. I created a site map that addressed Lily’s needs, illustrates the visual representation of the website’s content, and enhances the overall user experience.

Then I created a user flow influenced by my persona’s needs and goals, adding additional details where necessary. By mapping out her journey from beginning to end, it helped me to include key screens as well as consider the overall flow to ensure it leads to an optimal experience.

After the logo was selected, I created a style tile to serve as the foundation for the user interface design. Since the donut shop owner wanted the brand to portray a sense of quality, uniqueness, and friendliness, I selected a colorful palette to align with the brand’s message.

After browsing through numerous bakery websites, I knew I wanted the overall look to be simple and easy for users to navigate the service and products that are offered. I came up with several potential solutions, then created the UI sketches.

Creating a logo the owner would approve of seemed difficult at first, so I created a mood board on Pinterest to compile a list of colors, typography, web design, and images to serve as inspiration for DOMO. I incorporated donuts to many of the sketches at first, however after presenting my ideas to Chef Phil, he stated wanting a logo without them just in case he decides to sell products other than donuts in the future. I kept the logo simple with the company name enclosed in a circle and added lines underneath and below the lettering for interest. Despite having some difficulty at first, I produced a logo the owner appreciated and will use in the future

As the sole UI Designer for the project, I had a lot of creative flexibility in the overall visual design. I first reviewed the adjectives used to describe the brand message, then sketched a few logos by hand. I wanted to incorporate the product being sold, which are donuts, as well as the name of the company.

As the UI Designer for the project, I had a lot of creative flexibility in the overall visual design. I first reviewed
the adjectives used to describe the brand message, then sketched a few logos by hand. I wanted to incorporate
the product being sold, which are donuts, as well as the
name of the company.

During the process of creating high-fidelity wireframes, I looked at various bakery and donut shops before settling on the final design. I wanted the overall website to be inviting, friendly, playful, and colorful.

I created high-fidelity mockups in Sketch of my proposed solutions and used Invision to create a clickable prototype. I tested the prototype in-person usability test by selecting 4 new participants in my target demographic. Results from the usability test led me to make adjustment on two screens.

View prototype below

Conducting 1:1 test sessions was a valuable experience because each session provided a wealth of comments and feedback regarding usability, visual design, user expectations, and more. I organized the notes of qualitative findings into an affinity map to visually group and prioritize similar observations and feedback. Doing so enabled me to focus on the necessary priority revisions that will be used to improve the UI designs and high-fidelity prototype.

Pain Point # 1

Participants wanted a timeframe of when the store would respond to their submission on the events page.

• Avoid using too much UX jargon
  Designing for a client, especially if they’re unaware of product development and the field of user experience
  design, presents confusion. Avoid using too much UX jargon and communicate findings in a simple and digestible way that the client can understand.

Below are the high-fidelity responsive wireframes for the homepage and menu page.