A Responsive Website | Branding | UX & UI Design
The Coffee Factory is a local coffee shop that serves hot and cold drinks such as a variety of coffees, bubble teas, and fruit teas. Since the pandemic hit, small businesses have suffered losses due to social distancing and limited dining options. I am tasked to create a responsive website to stay competitive with the more modern and digitally-friendly cafes.
Role
Timeline
Tools
Team
Due to the Covid 19 pandemic, more and more people use online food delivery services or order take-out. Coffee Factory suffered significant sales and losses since the Covid. So, How can we help Coffee Factory to get more customers through online ordering and take-out services that will increase their sales?
• A responsive cafe website
• Online order feature
• Branding
Research Plan
Research Goals
Assumptions
Methodologies
First, I conducted market research to understand the restaurant industry in general and the consumer's behaviors on how they are ordering food online. Market Research provides critical information to determine who and where the customers are, and evaluate where do we stand. So, Here's what I found. View the full market research here.
.svg){kind=small}
About 78% of U.S. restaurants offer
some kind of online ordering.
78% of millennials say they would spend money on an experience.
35% of diners said they are influenced by online reviews when choosing a restaurant.
Before Covid-19, 69% of consumers ordered delivery, but that number has grown to a staggering 88% during the pandemic
Following the market research, I researched my competitors (both direct and indirect) to learn their approaches to solving similar problems for their customers. View the full competitive analysis here.
• Takeout option
• Outdoor seating available
• Contactless payment
• 5 Stars reviews on YELP and Google
• No curbside pick up
• No online ordering or delivery
• No menu uploaded on the website
• Not active on Instagram
• A responsive website
Instagram
• Yelp and google
• Offers high-quality and freshly roasted artisanal beans
• Modern decorations and branding
• Coffee subscriptions are available
• They don't sell just coffee, they sell an experiences
• A fully functioning website and app with an online ordering option
• High Price
• Located only in big cities
• A responsive website
Instagram, Youtube, Facebook, Twitter, Yelp and google
• An established brand that offers good coffee and delicious pastries.
• A fully functioning website and app with an online ordering option
• Consistent branding and marketing
• Active on Social Media
• Lack of personal relationship with the customers
• Cleanliness would depend on each branch
A responsive website
Instagram, Youtube, Facebook, Twitter
Yelp and google
Provisional Personas - I created the personas based on the insights and demographics that I obtained from the market research. The interviewees will be chosen based on these personas.
• To get caffeinated and study in a cozy environment
• Find affordable drinks and snacks
• To find a cafe with wifi
• Overpriced drinks and pastries
• Unable to check menu and amenities online
• To discover unique coffee and tea presentations
• To find insta-worthy places
Spend time at cafes to chillax
• Hard time finding high-quality coffee
• Limited seating due to
Covid 19
• To meet and talk with friends in the neighborhood
• Looks for more tea options than coffee
• Expect peaceful environment
• Long waits
• Unable to place a mobile order before coming in
After having a better understanding of the market and competitors, I decided to move forward with the primary research (1:1 user interviews) to gain deeper insights from the users such as their wants, needs, and pain points. I have 5 participants, and their ages range between 18-34 years old. They are both female and male who have visited Coffee Factory, and have experience with online/offline food ordering services. View the full interview script here.
Empathy Mapping: I reviewed my notes and recording during the interview and wrote the key statements on the sticky notes. To synthesize the research findings, I created empathy mapping to identify common patterns among participants during the interview. From empathy mapping, I uncovered five insights and generated five needs.
Based on the insights that I obtained from the research, I created a persona to represent our primary users. Meet Grace, a fictional but realistic persona. I'm going to use this persona during the entire design process to ensure a user-centered design.
After generating the insights and needs from the affinity map, it's time to define the problem. First, we are going to create POV statements, and How Might We Questions.
• POV - Point of View statement is is a way of articulating the problem in an actionable and insightful way from the user’s perspective
• Based on the POV statement- we are going to create HMW questions to launch the brainstorming sessions to explore ideas to solve the design challenges.
I used mind mapping method to generate many ideas as possible through the mind mapping technique to solve HMW questions.
After synthesizing the research, I moved forward with defining product goals. Before we ideate our products or features, it's crucial to know what businesses and users want, and if those goals can be feasible from the technical aspects. I made a Venn diagram to lay out user's goals, business goals, and technical considerations and defined the necessary features for our product. Here, we can see some goals are overlapped, and we can define them as common goals.
After brainstorming the possible features for Mira, grouped them into 4 categories (Must Have, Nice to Have, Surprising, and Delightful, Can Have later). The Categories are based on the effort level and importance of the feature. This roadmap will be referred to in further product development. View the full feature road map here.
Following the product goals and feature roadmap, I created a site map to organzine the contents on the website. This has helped me to visualize the structure of the website/app and ensure if it best suits the user's needs.
After creating a site map, which is the skeleton of our product, I moved forward with creating a task flow that will help me visualize what step my persona "Grace" will take to complete a certain task. Creating a task flow is crucial before sketching anything because it helps us visualize the motivations and primary steps that the users want to complete a task or accomplish a goal. The below tasks are defined on HMW questions and the steps that Grace will take during a specific task flow.
As a returning customer, Grace wants to order a Coffee for pick-up in a rush hour.
Following the task flow, I created user scenarios that help me empathize with the context of our users and articulate their goals and motivations. This user flow is to uncover the possible steps Grace would take to complete the task based on the defined scenario. View all 3 flows here.
Once I have outlined major requirements for the app, I created a UI requirement list which is a to-do list for the key elements identified in the flow chart. After mapping out the list of the key screens I'm going to create, I grabbed a pen and paper to visualize my idea in sketches because this is easiest and fastest way to interpret my ideas.
After deciding the visual layout to move forward, I digitized my sketch to mid-fi wireframes on Figma. This allows me to visualize the priorities such as the hierarchy and usability without taking too much time to implement the details such as color and font.
I mapped out the interactions on Figma to create a working prototype. This prototype will be used to test how the users are going to interact with the defined tasks.
Task 1 - Find the menu to learn what they offer
Task 2 - Find the info about the location on the website
Task 3 - Order a Latte to pick up asap
Since we have the working prototype, it's time to test how the users will interact with it. From this testing, We are going to find deeper insights to identify errors and improvements. We will also evaluate whether if it can validate the assumptions or not. Before conducting the research, I created a plan to outline the research goal, objectives, and tasks. View the full testing plan here.
I used the "Think Aloud" method to conduct the usability testing because it is inexpensive, and no special requirement is needed. I took notes as my participants talked. I recruited 5 participants through friends and family, and as well as at Coffee Factory. I conducted the testing via Zoom. Here is the findings below.
Error Free Rate
Task 1: 97% (3errors)
Task 2: 97% (3 errors)
Task 3: 92% (8 errors)
Completion Rate
Task 1: 100%
Task 2: 100%
Task 3: 94%
After conducting the usability testing, I summarized the test results with affinity mapping to find the patterns while the users were interacting with the prototype. Like the empathy mapping, I broke down the transcripts and wrote down the key elements on the sticky notes. I was able to obtain five insights from the mapping. I generated five suggestions for improvements based on the insights.
• Users are frustrated to scroll down to see the menu because hero section fills the view port.
• Users want to access different menu categories from the drop down menu on the nav bar.
• User are not happy with not being able to see the location on the top due to the hero section that fills the view port.
• Users are not sure what click here button does
• Users are not aware of adding the qty when they want to order only one item
• Resize the height of the hero section. Move the menu section to the top.
• Create drop down menu for Drinks/pastries/cakes under Menu tab
• Resize the height of the hero section. Move up the location section.
• Change with “order now”
• Set the Qty at 1
I used a priority matrix to evaluate the impact and effort level of suggestions. The matrix includes four quadrants that start with Low Impact, Low Effort on the bottom left, and end with High Impact, High Effort on the upper right. Since we have limited time and resources, we need to prioritize the lists before implementation.
After evaluating the suggestions on the priority matrix, I decided to update all the suggested features since all of them lie in the (High Impact - Low effect * High Impact - High Effort) quadrants.
Before creating a logo and style guide, I started brainstorming on brand attributes representing Coffee Factory based on the project brief. Then, I developed a mood board on Pinterest that reflects the brand attributes "Modern, Friendly, Delicious, Cozy" . Afterward, I started working on various options of logos and moved forward with the one that contemplates Coffee Factory's core value. It's essential to keep in mind that the logo must be scalable and readable. Finally, I created a style guide to build a visual reference for the brand. Check it out below.
Following the mid-fi prototype and brand guide, I have a solid understanding of what we are going to build. So, I added the visual details to create a high-fi screens. We are going to use it to test with real users and get approved by the stakeholders.
Following the high-fi wireframes, I created a fully working prototype for a desktop version. So, the stakeholders can interact with the prototype before we move to the development phase.
View Final PrototypeI created a UI kit (Mobile version) to build a collection of components and resources that help the designers and engineers to build the UI faster in the further steps. This UI kit is a living document and will be updated as far as the product is built further.
.png)
Measuring the impact and utilizing data are vitally important to create a sustainable product. Based on the metrics below, I am conducting further testings in the future to collect more qualitative and quantitive to measure both the business and user experiences' success.
To measure how happy customers are with the feature through user interviews and surveys.
To collect the percentage of tasks that users complete correctly through the usability test.
To measure how often users use the feature through the data collected over time after launch.
How many percentages we can increase in revenue from online orders?
To measure how many new customers find Coffee Factory online through google analytics, and surveys.
This is my first UX project working for a local business with the guidance of my mentor Alan, I learned how to communicate and negotiate with the business owner. Also, I recruited the participants on the spot for the user interviews and usability testing. Aside from that, I gained experience in creating consistent designs across different devices. Last but not least, I was able to learn how Covid-19 has impacted the restaurant industry, and how technology is shifting to solve the problems that we are facing today.
After post-launch, I have two things that I'd like to work on if the business is still willing to work with me.
• To measure the percentage goes up in revenue from online orders.
• To conduct surveys and interviews to measure how customers are happy with the feature.
Mira Clothing
AR try-on feature
Etrade
Website Refresh
