CHiu Quon
Web Design

Background

Chiu Quon Bakery is one of the oldest traditional chinese bakeries in Chicago Chinatown. Their menu features a variety of traditional chinese pastries and dim sum, utilizing fine ingredients for their product. They also like to come up with many new and seasonal items to keep their menu fresh. With a modern approach to a traditional business, Chiu Quon is ready to update their website and utilize an online order system that can help showcase their delicious menu and make it more accessible.

Problem

As Chiu Quon Bakery continues to develop their business model, they find themselves lacking a consistent and streamlined design effort to package their overall branding. CQB is a rather traditional bakery that has taken a modernized approach; their website redesign aims to bring a more cohesive approach to their style and branding as well as adding a new online order feature to help build their online market.

Challenge

Design a modern and bright responsive website for Chiu Quon with a welcoming style that matches their branding on social media as well as addition of a new online ordering feature to help draw in new customers utilizing the digital market.

project

Responsive Web Design

Role

UX/UI Designer

Duration

100+ Hours

Tools

Figma, Balsamiq, Maze.co
View Prototype

01

Empathize

Our RESEARCH GOAL is to understand the target user’s thought process behind ordering food online and learning what is important to the users when making a purchase of baked goods. We want to discover the WANTS, NEEDS, and PAIN POINTS.

Research

Competitive Analysis

To better understand the business of restaurants and bakeries, market research and competitive analysis is performed. An initial search of websites for traditional Chinese bakeries was made specifically to compare and understand the current market standards of other restaurants. Comparing successful competitor websites gave me a basic understanding of the current trends and ideas for what features to focus on implementing into my client’s website.

User Interviews

Both remote and in-person user interviews were conducted to gain insight onto the thoughts and personal  experiences of ordering food online. The goal of these user interviews in this early stage of research is to find out what users really want, need, and dislike in the process of ordering food online.

wants and needs

  • 75% of users prefer ordering food online versus placing orders through phone call.
  • Users order online on a regular weekly basis.
  • Ordering online is easy and convenient (especially repeat location orders).
  • Users mention the importance of websites providing restaurant information such as menu, reviews, location and operating hours.
  • 75% of users stated that nice images influence purchase decisions.

Pain points

  • Users experience receiving the wrong food from online ordering.
  • Users experience out of stock items or items not consisntently/correctly listed online.
  • One user found account login to be frustrating.
  • One user stated that sometimes menus are laid out bad or confusing.
The data from the research shows that users find ordering food online as a convenient method of purchase due to speed, ordering without being rushed, and not having to interact with people. The general purpose of visiting restaurant websites is to find more details to make their purchase such as menus, images, business hours and location information. General frustrations come from incorrect orders and items being out of stock. This data is kept in mind during the process of designing wireframes and prototypes.

02

Define

After the research and empathy, we use the data gathered to DEFINE the main problem and how to approach the solution. To start, USER PERSONAS are created to help us profile the target user for our product. Our defined user persona helps to gauge specific conflicts a user might encounter and then designing solutions.

User PErsona

Who exactly are we designing for? Creating 2 completely different user personas who will be using the same product is a useful tool because we can use them as references as to who exactly we are designing for. Keeping both users in mind during the process will help us stay focused on the research objectives and user needs.

Empathy Map

What exactly does our user think, see, say, and hear? We integrate our data from actual user interviews into creating an experience for our user persona. This helps us further empathize with our target user, Mandy on her thoughts and feelings as she goes through the ordering process.

User Journey Map

Diving deeper into user-centric studies, we follow the path for Mandy as she were to complete the designated task flow first without the our product. Looking at her mood shifts by observing the line in the chart below, we can see that there are pain points where waiting is involved, signifying areas that could help improve the overall experience.
Here is a comparison of how Mandy's experience changes after using our product. Her levels of frustration have dropped and the entire task is shortened by several key points. Notice the line indicates more consistently content mood throughout the user journey.

Project Goals

An integral part of the research process is to bridge the gap between business and user goals. We must meet our client’s expectations while keeping the target user in mind to create the best experience for everybody. To start designing, we must get approval first and foremost from our stakeholder/client to continue moving forward with our product details. The business, user, and technical considerations align and revolve around the website being informative to our target users, ease of navigation, and being accessible to anyone with internet.

03

Ideate

After utilizing all of our collected data to centralize the target users and aligning goals with stakeholders, we move on to the beginning of the design phase. We begin our approach by brainstorming for solutions to create the bare bones of our product; task flow, site map, wireframes, and user interface design.

Site Map

Referring to our competitive analysis and the client’s preexisting website, the website layout is broken down into sections to create our site map. Each page is matched with their related subcategories as logically and intuitively as possible, while referencing existing design patterns common for restaurant web design.

Task Flow

The task flow is the main path that is taken as directly to the task goal as possible. Following this flow, we can identify what pages need to be built in order for the task fulfillment to be possible.

User Flow

Similar to task flow, user flow is a theoretical path created that a real user could follow. Rather than proceeding directly to the goal, this flow considers other options such as different user perspectives that could lead the user flow into different paths.

Sketches & Wireframes

  • We begin any design process by doing a sprint of sketches to cycle out as many layouts as possible by hand.
  • Picking favorite components from sketches, I created wireframes using Balsimiq software.
  • Low-Fidelity Wireframes are essential since they give developers and stakeholders a basic idea of the design in earlier stages.
  • Changes are likely to be made based on feedback during this time.

04

Design

The design comes to life as we start to create the mood board for visualization of styles and color to convey the proper tone. To refine the theme, a stye tile is put together to include fonts, color palettes, button styles, icons and logo designs.

UI Design

Mood Board

This step is a powerful way to give visuals to the product. Utilizing references for inspiration and motivation, our mood board is created based on Chiu Quon’s current colors and aesthetic, with the keywords, friendly, inviting, clean, and modern in mind.

UI Design

Style Tile

The style tile was designed to keep the website’s branding closer to that of their social media. The signature pink and cyan color palettes create a vibrant and soft primary/secondary combination. Two modern san serif fonts Montserrat and Lato are chosen to keep the website looking clean and inviting.

Prototype

High-Fidelity Wireframes

Using all design components created from the style tile, the high fidelity wireframes are created with our key features. The essential pages include home page, about us, menu, order online menu, and check out.

UI Kit

After finishing our prototype, all design components are kept on the UI KIT. All details such as color palette, fonts, header styles, buttons, logos, to pop up modals and input forms are included for easy hand off to developers. This is a key learning tool for any designer or developer to use as reference to build off. The UI Kit is also constantly changing as the design changes.

05

TESTING

A USABILITY TEST helps us find out how real users will interact with our prototype. We study what paths each tester will take to reach the task goal. During this phase assumptions will be validated, wants, needs and pain points will be discovered based on tester feedback.

Usability Tests

Testing was conducted remotely by 9 testers using maze.co app and 2 testers volunteered for in-person testing. Following the usability testing plan, we first instruct the testers of their task and then observe to gather data.

wants and needs

  • Users are able to complete assigned tasks with little to no friction.
  • User is able to navigate the prototype easily.
  • Understand the user’s thought process as they navigate the website.
  • Find potential struggle and confusion points that may occur during the process.

Keywords

  • Nice, bright, friendly, cute, inviting, sleek, warm, comfy, clean, and professional.

Findings

  • 100% completion rate of prototype.
  • 100% agreed the task was quick and simple.
  • 4.6/5 score on easy navigation.
  • 4.4/5 on trustworthiness of site.
  • Majority of users enjoyed the pictures of pastries.
  • A few users noted redundancy of menu and order online menu, and the need for both.
  • A few users wished “Add to Cart” returns to menu.
  • One user appreciated inclusion of the “About Us” section.
  • One user noted seeing other store location info would he helpful.
  • One user noted the checkout process was clean and warm.
  • One user noted minimum resolution on the website for better load times.
  • One user encountered glitch on pop-up modal closing.
  • One user did not know what pastries to order (unclear task assignment).
  • One user did not like the color palette.
Overall, participants were able to complete the assigned task and many particularly enjoyed viewing the pictures of the pastries. Some of the users experienced redundancies involving the menu and order online menu, and this came up consistently enough during testing to warrant priority for changes.

Affinity Map

Using the collected notes and data from testing, an affinity map is made to help discover additional patterns. Notes are categorized by similarity of answers or struggles to help pin point validations and struggles. In this case, there was a good volume of data that sided on wins, while struggles included navigation suggestions after adding items to cart, and other small struggles that could have been resolved with better usability testing questions/wording.

Priority Matrix

The priority matrix is great chart used to visualize priorities based on level of effort and importance of tasks. Multiple testers stated the “add to cart” should lead back to menu rather than straight to cart, which this iteration will prioritize based on feedback.

Prototype Iterations

Based on the priority matrix, the prototype v2 included changes to the navigation after adding an item to cart to returning the user to menu page. Slight visual adjustments such as smaller font was also implemented, based on the level of effort and overall importance levels to users. Unfortunately due to time constraints on this project, larger changes regarding the Menu & Order Online pages were not implemented in this round of changes.

06

Takeaway

During this project, I discovered the need to implement more testing and iteration after design. The importance of all types of user feedback can help point the prototype in a more user-centric direction if more usability testing is done. My biggest challenges included finding an appropriate amount of participants for the research and testing. As a student, this is definitely one of the resources I lacked most. If given more time and resources to complete the project again, I would do more usability testing and iterations for a better end product.
^ Back to Top
View Next Case Study ›