Case Study - 2021
Responsive Website
My client is in need of a website for a café she plans on opening in Queens, New York in the next 2 years. Along with creating an online presence, she is looking for branding that matches her vision.
Her goal is to create a neighborhood cafe that focuses on high-quality drinks for the coffee snob in all of us. The café should have a fun modern vibe with a plethora of plants to encourage customers to relax and hang out as they have a drink. The cafe's menu will consist of the classics and a rotating list of special drinks.
• Create a responsive website for an upcoming neighborhood café along with its branding.
Product Designer, Researcher, Sketching, Branding, Wireframing, Prototyping, User Testing
Competitive Analysis, Persona, User Flow, Wireframes, Branding, Prototype, User Testing
Figma, Illustrator, Whimsical
I began my research for Ruby’s Cafe, by doing competitive analysis to better understand the competitors and identify their strengths and weaknesses.
These competitors ranged from local single branch cafes to nationwide coffee roasters and shops.
After better understanding the competitors in the field, I implemented 1-on-1 interviews to learn about the habits of the users.
Through the interviews, I was able to find out where the participant's priorities lie when using a cafe's website. I was also able to learn that the participants had incredibly low expectations for café websites, due to them having poor experiences in the past.
I then created a User persona with insights from my research. By doing so, I was able to get a clear understanding of my target audience.
By creating a User Flow, I was able to map out the user's movement through the website. I then referred to my User flow to determine the right screens to focus on. Based on my research I decided to focus on the order online process and customization of user's drinks; since many participants mentioned the lack thereof in local café websites was a pain point.
Using pen and paper I began sketching the wireframes. I initially thought the homepage would be the most important screen, as it is the first thing potential clients see. With comments from the interview participants, I determined the product page for the drink was just, if not more, important. With this new information, I did more sketches for the product page before choosing the following to render in Figma.
The majority of my iteration focus was on the drink customization page as I felt it was the crux of the website for its intended users.
After creating a high-fidelity wireframe, I reached out to 3 participants, who are frequent coffee drinkers; to complete a usability test in which they finished the following tasks.
• Customize a latte
• Order it for pickup
The testing was done in person and took anywhere from 30min - 1hr. The goal was to test my assumptions of how users would navigate the site and if users discovered any pain points while completing the task.
One of the participants, with years of experience as a barista mentioned concerns of customers not knowing what combination makes good coffee. To remedy this, I added a Cafe’s recommendation option. This would reduce the % of customers walking away with product that they don't like. Comments were made, liking the level of customization possible for the drink if they choose to stray away from the cafe’s reccomendation. Another feature they liked were, was the specificity of the pick up time for their drinks.
This was an interesting and challenging product to work on, that my research showed users were not fond of using. Due to their past experiences of café sites having “out dated info” or “poorly designed” pages, users choose to use other methods when looking up info.With my research I was able to get to the bottom of why users didn’t want to use a website for a café and have solved a majority of their concerns. Participant one, who has 7 Years of experience as a barista commented “wow this is actually designed”. With my focus on creating multiple iterations, I believe I was able to solve my users needs of an accurately informative website with a smooth ordering process; while capturing a modern, fun vibe that the client requested for its branding.
.svg)
