Gladly Coffee Cafe
A responsive website for a San Diego cafe & drive thru
Project Overview
Gladly Coffee is a coffee shop in Spring Valley offering craft coffee and unique fare. Their vision is to ‘sensitively demonstrate the efficacy of placing innovation, flavor, design, technology, and technique in its rightful place as a means to elevate the human experience; not to overwhelm it.’ Their current online presence consists of social media accounts and other online ordering sites. The owner would like to create a responsive website to further establish their online presence, which would help grow their business in a competitive, saturated market. They would like to offer products for their customers, and an overall platform to increase traffic & attract new customers.
High-level goals
Design a responsive website from scratch for Gladly Coffee.
Extend coherent branding that aligns with Gladly Coffee’s current/desired clientele and customer experience.
Project Scope
Responsive E-Commerce Website
*Spectulative Project*
Tools
Figma, Whimsical
Timeline
2 Weeks
Role & Responsibilities
UX Designer
User Research, Visual Design, Interaction Design, Usability Testing
Learning the Challenge
Gladly Coffee took ownership of a previous coffee shop in 2018. They rebranded themselves at the end of 2019, which was the start of COVID-19 across the globe. Having an online platform is completely new territory for Gladly Coffee, so it was important to conduct both primary and secondary research to get an better understanding of the users.
My Research Goals were to:
Conduct primary research to gain information on customer experiences with coffee shops.
Get in depth understanding of the current market and the evolution through competitor analysis.
Uncover pain points when ordering coffee via drive thru, walk-in, or online.
Discover patterns that users expect when navigating a coffee shop website.
Secondary Research
Market Research
Market Research was especially important for this project to learn overall insight, facts & statistics about coffee shops and the industry. Especially during such times, with Gladly Coffee’s drive thru the main operation of the business. Feel free to check out my research here!
Competitive Analysis
For additional research, I identified competitors and analyzed the strengths and weaknesses. This analysis allows me to keep the patterns into consideration when obtaining primary research.
Taking my market research findings, I was able to develop the provisional personas which will assist in who I intend to interview for my primary research.
Primary Research
After obtaining secondary research, I took this information to conduct user interviews to gain direct insight, and validate or invalidate our assumptions. (See the guide here.)
I interviewed 8 participants; 6 female, 2 male between the ages of 19-29. From these interviews, I made sure to note user habits, experience, and frustrations which will be vital in synthesizing my research.
Keeping the User in Mind
Now that I have all of the necessary information from my primary research, it is time to further empathize with the user by organizing the findings directly onto an empathy map. The empathy map will provide insights, and needs that will contribute to the design process.
Insights
Needs
Most customers are frequent coffee drinkers, where the majority drinks coffee everyday
About 90% of participants do not visit any coffee websites; however some participants were not opposed to it
4 out of 7 participants enjoy going outside to visit local coffee shops that are personable
To ensure the quality of the coffee is consistent
To know that there are other products to explore besides coffee
To receive personable customer service
Meet Karly
As a result of the research and research synthesis; we now have our persona Karly, a consultant who takes pride in her city. Karly’s goals, needs, frustrations and motivations will be frequently referred to throughout the design process.
Define the Problem,
Based on the insights and needs from the empathy map, we are able to create the POV statement and ask HMW questions. The HMW questions help define the problem and give room to ideate potential solutions.
then ideate!
Strategy
Taking the business goals and user goals it is important to find the mutual goals between the two to ensure we are going in the right direction for the content of the design.
In referencing the above goals, and user needs, a product roadmap was created to have a organized list of features for the website. Listed by priority, confidence, goal, and effort levels to help prioritize what to work on first.
Information Architecture
With the goals and a concrete view of features in mind, I am able to move into the websites structure. This was done through a sitemap which bridges the relationship between the content and hierarchy as well as creating a smooth process in developing user flows.
The Nitty Gritty in Design
Based on the research and contents of the site, I developed a UI Requirements Document as an overview of the pages to design based on different tasks and additional requirements to help with this process. Full document here.
Using the tasks from this document, a task & user flow was created. Taking the information gathered in the define stage, strategy and IA I was able to come up with multiple flows that the user would potentially take which will contribute to the design of wireframes.
Wireframes
Low Fidelity Sketches
With the information from the UI Requirements Document, task and user flows, I began sketching the low-fidelity wireframes. Sketching enables me to examine different opportunities before jumping into the digitization process.
Responsive Mid Fidelity Wireframes
I was able to then turn my sketches into Mid-Fidelity Wireframes and add more details that may not have been clear. Creating mid-fidelity wireframes provides a better visual of consistency and hierarchy before going into colors and styles. The desktop wireframe was used for prototyping, so the appropriate details for my client and users were included.
Creating the Prototype
After designing the pages required, I created a prototype through Figma for usability testing. Having the test done at this stage allows me to detect any errors in the flows, architecture, and design thus far.
Testing it out!
Before conducting the usability test, it is important to create a Usability Test Plan on the objectives, methodologies, questions, and tasks to measure the best results. The objectives are:
To evaluate the interactions the users have with the Gladly Coffee’s website.
To identify any pain points the user may have
To observe the user flow once given a task
To empathize and ask follow up questions to get deeper insight on what makes the experience best for them
The test was conducted remotely with 5 participants and 2 scenarios/tasks, which were all recorded and transcribed. The methodology was Evaluative Research taking a Think-Aloud Testing technique. Have the participants verbalizes their thoughts and processes. If guidance was provided, it was because participants were unfamiliar with how prototyping works, so I informed them of the buttons that are not functional.
Affinity Map
After the testing, I organized my findings into an affinity map to identify users patterns, and insights to see what worked and what needs revising to create the best product.
Insights
Since the mid-fidelity wireframe had no images with a middle section nav bar, users did not know what to do when the test started
In Task 1, users went to the Location page first and worked their way through other pages, especially highlighting the About Us page
Users expressed visuals are important, so the gallery page with Instagram integration helps with their visit and connecting with ‘real-time people’
Majority of the users gravitated towards Express Checkout methods and Local Pickup
Patterns
2/5 users didn’t know they were on the homepage and could scroll
4/5 users landed on the About Us page at some point after clicking the Location page
To learn about the company, 3/5 users read the About Us page
Users expressed how the site was straightforward, and user friendly
4/5 users highlighted images and the Instagram integration
90% of users expedited the checkout process by clicking an Express Checkout method
Priority Revisions
The revisions were based on the patterns, insights and any other errors/pain points. The revisions were implemented in the high fidelity prototype.
Decrease the homepage hero image to help users see the navigation bar and know they can scroll
Add more details to the Product Detail page to create more transparency on the users shopping experience
Rearrange pages in navigation bar to help with the user flow
Provide more information on the About Us page such as their coffee processes/details.
Branding
Taking the results for the testing, I went into branding. Starting with a mood board in Pinterest and kept Gladly’s high-level goals in mind. The mood board consisted of color palettes, imagery, and typography which are a constant point of reference when developing the user interface design.
Logo Design
Gladly had a business goal to have a modern design that matched their current logo, so I made slight adjustment to what is advertised on social media ensuring it still is in alignment. The logo exploration was done through fonts & typefaces.
Style Tile
After the logo was created and the branding was solidified, I created a Style Tile with what was gathered on my mood board and added UI elements. The Style Tile was created to serve as a UX/UI centered mood board. This is also a document that can be easily understood when shared with clients.
UI Kit
Expanding on the Style Tile, a UI Kit is created and consists of a compilation of existing UI elements that will be on the website. Creating the UI kit is important for design teams and collaborators. Both the Style Tile and UI Kits are living documents, so it is likely there will be iterations to the files to match the design.
High-Fidelity Wireframes & Prototype
Now that revisions were sorted, I created high-fidelity wireframes by applying the established styles.
Final Thoughts
This project felt like a new experience, based on timeline and the continuous learning as a designer. I was able to develop concrete understanding on the process, the why’s and have full circle moments that help create the best product for my client.
The most challenging part ensuring the information obtained and synthesized was cohesive. With consistent review, I was able to notice my flaws and strengths in the overall design process.
Next Steps
Design implementation & handoff:
Since the design has been tested and revised, it is ready to enter the development phase.
Maintenance:
Updates and revisions will continue, and be prioritized accordingly.