No items found.
.png)
Project Overview
I partnered with Semplice Cafe owners to revamp their website, serving a diverse customer base in Breckenridge, Colorado. Utilizing a mobile-first approach, I redesigned the homepage, menu, and added a catering page for seamless access on various devices.
ROLE
UX/UI Designer, UX Researcher
TOOLS
Figma, Figjam
CHALLENGE
Enhance the user-friendliness and visual appeal of Semplice Cafe's website while integrating their streamlined catering system and adhering to the owners’ preferences and business goals.
CONSTRAINTS
- Timeline: 4 weeks, 80hrs
- Constraints: I am the sole designer and researcher, and I had to spend additional time communicating and collaborating with the owners which put additional strain on the timeline.
Introduction
Jamie and Michelle are two food enthusiasts who opened Semplice Cafe in January of 2020. Jamie, a vegetarian, and Michelle, a vegan, were sick of the lack of healthy food options available to them in Breckenridge CO.They launched Semplice Cafe, a popular Breckenridge brunch spot with diverse, allergy-friendly menu options. To reach more customers and improve their online presence, I'm designing a vibrant website that reflects their lively spirit and enhances their business.
Design Process
Empathize
To kickstart the redesign process, I begin with a systematic research plan, which underpins all my decisions. This includes competitive analysis to explore how cafes and coffee shops engage their customers. Subsequently, I conduct usability testing on Semplice's current website to identify pain points, followed by user interviews.
Research Goal
I need to understand how both locals and tourists react to the current website, and how they navigate restaurant websites in general in order to provide customers with the best digital experience that will keep them coming back to Semplice Cafe.
Competitive Analysis
Starting the empathize phase with competitive analysis is essential: what's out there and how are cafes in similar settings distinguishing themselves? I examined other cafes in the area, in addition to Bestslope, located in a comparable mountain town.
Competitive Analysis – Key Opportunities
A) Clearly guide users to menu (include prices)
B) Make order online a prominent & convenient Call to Action
C) Tailor visual hierarchy to achieve defined user goals
D) Show consistent and appealing typography
E) Highlight mission statement
F) Include appealing images of food, drink & seating
Target Users
Usability Testing of Current Website
Participants: 5
Task Flows: 3
In my research, I sought feedback on the current cafe website from both locals and tourists to identify strengths and weaknesses. This initial step helped me prepare for user interviews, and the screenshots below highlight patterns from the usability tests.
User Interviews
Participants: 2 locals, 3 non-locals
Questions: 10
I shifted to interviews to understand why both locals and tourists visit cafe websites. This insight will inform a user-centered redesign of the website's visual hierarchy. I posed distinct questions for locals and non-locals to account for potential differences between the two groups.
Note: I'm not studying the prevalence of vegan, vegetarian, or gluten-free diners since the owners are keeping their menu choices unchanged.
Interview Findings
Both tourists and locals want simple navigation for information and visual content that reflects the cafe's ambiance and character, be it upscale or cozy. See the Affinity Map for details.
Define
In this phase, I create personas for both Local and Tourist users to highlight subtle differences and then proceed to hone in on the main problems by creating "How Might We" questions from "Point of View" statements.
Personas
User personas for a cafe in a touristy town go beyond the obvious coffee and food lovers. I want to leverage focus on vegans, vegetarians, and gluten-free diners to emphasize Semplice's unique mission in Breckenridge. I created two personas that stem from my user interview findings: Tourist Ellen and Local Leah.
Empathize - Again!!
It can feel a little intimidating to draw up definitions from these user interviews: I almost want to interview more people and ask more questions! To address this unease and keep the ball rolling, I created Point of View (POV) and How Might We (HMW) statements to assist me in processing my interview data.
Ideate
With a better understanding of what specific issues I should be solving for, it's time to generate some ideas! In this phase, I begin by brainstorming, then I align myself with both business and user goals, create sketches, build a site structure, develop mid-fidelity wireframes, finally build a high-fidelity prototype.
Brainstorming
How can I make Semplice's website more functional and appealing for users like Ellen and Leah? My user research highlights three key functions: online ordering, menu access, and hours. Users visit the cafe's website for quick, essential information, and the site's visual appeal is crucial for conveying the overall vibe.
Project Goals
After brainstorming some ideas for how to layout the re-design, I made I chart to re-align with the business and user goals. This is something important for me as the designer, as well as for the owner of the cafe so they see how the redesign can be tracked for success in the future.
Sketches
Site Structure
As part of my information architecture, I made a diagram to help visually organize where my prioritized features will land. You can view my site structure here.
Mid-Fidelity Wireframes
In hindsight, I could have done better in the mid-fidelity phase. It lacked clear color choices and systematic feature placement. I hesitated to show Jamie and Michelle the unfinished wireframes, and I was eager for early feedback on color ideas.In the future, I want to really use this step to get the placement and the flow of features right before playing with colors. I think it is a more efficient approach in the long run.
High Fidelity Prototypes
In discussions with Jamie and Michelle about the website's vibe, they expressed contrasting color preferences – Jamie favored orange and yellow, while Michelle preferred green and blue. During the high-fidelity phase, I tested wireframes with both green and orange dominants to gauge user preferences and experimented with various photos.
Iterate
This is my "final" design phase. With high-fidelity wireframes in hand, I am ready to test my designs and use the feedback I receive for continuous iteration. Although no product is truly ever "finished", I end this phase with designs that satisfy both Jamie and Michelle.
Usability Testing
Based on my research indicating high mobile usage for cafe websites, I conducted usability testing with three participants on smartphones. Additionally, two participants tested the website on a laptop and an iPad to ensure effective design for different breakpoints.
Participants: 2 locals, 3 non-locals
Devices:
A) Mobile (3 participants)
B) Desktop (1 participant)
C) Tablet (1 participant)
Task Flows:
1) Find hours & online ordering
2) Find the menu, the gluten free options, find a “toast”, and navigate to drink menu
3) Find the catering menu & and the catering request form
Usability Test Findings
Task Completion: 100%
Key findings: People prefer orange over muted green, and small bright green elements, like the "V" icon, complement the orange.
Most users had no problems with basic task flows but provided valuable feedback on smaller issues like visual hierarchy on the drink menu page, as well as confusion with the catering request form and gluten-free policy. Feedback consistency was observed across devices.
.png)
Prioritized Revisions - Before & After
I analyzed the sentiments I received from conducting usability testing: both explicit and implicit notes of feedback. Overall, I needed to iterate in a cleaner, more simplified direction. I needed to focus on less overt, bright colors, and more approachable, intuitive layouts so that potential customers are invited to look at the menu, walk by, and or order online.
Homepage
Feedback: I gathered that the tilted alignment is too playful and it takes away from the purpose of the hero section: to showcase vital information to potential customers.
Changes:
1) I explored a new hero image with overlaid text. From my research, I know that users prefer different pictures of the cafe so that they can get a sense of the vibe. This hero image, the cafe shortly after a rain shower, showcases the beautiful wood and quaint aesthetic of the building.
2) Just below the hero image, I include the hours with an additional photo of the cafe from the front with a friendly staff member waving. Users can now see the relevant information alongside the curbside view of the cafe, so if they decide to visit, they know exactly where to go.
3) I moved the toast photo to the "Our Food" section because, as an item on the menu, it is not necessarily relevant in the "Local Partners" section.
4) I removed the rounded corners on the navigation bar and the footer in order to maintain consistency with the Call to Action buttons, and other elements throughout the site. I also reduced the font size to increase readability and promote a slightly more professional vibe.
Food Menu
Feedback: The GF icon is confusing to users, because they will then look for that icon even though any item on the menu can be made gluten free.
Changes:
1) I hid the Gluten Free options in an expandable menu so that the appearance of the menu is less cluttered with options that aren't relevant to all users.
2) I added more info on the gluten free policy to help GF users understand their options, and I omitted the GF icon to avoid confusion throughout the rest of the menu.
3) Because the menu is so extensive at Semplice, I inserted a fun divider to break up the space and add a little bit of color.
.png)
Drink Menu
Feedback: Hard to read! What is the visual hierarchy?
Changes:
1) In my first iteration, I moved drink of the month to the top. In my second iteration, I made the picture full width to evoke the senses.
2) I made the Coffee and Sizes bold for visual ease.
3) I added "Non Coffee" drinks over an aesthetic background.
4) I put milks on top of syrups since they are more often chosen by customers.
