Revive Bakery + Cafe
Through the process of researching, designing, and branding, I created a responsive website that aligned with the new business goals of Revive Cafe + Bakery and built a strong sense of community with their customers.
Role
My role as an UX, UI Designer included responsibilities of conducting interviews, creating paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem + Product Goal
Revive Bakery and Cafe is a small local bakery. They want to build an online presence and grow their business with a website. The goal was to design a website that meets the goals of the business and user. The website will help users avoid long lines by being able to order ahead.
Target Audience
The target users are between the ages of 18-60 years with busy schedules who do not have time to wait in long lines to place their order.
User Research
During the research process I conducted user interviews to gain better insight on user needs. A primary user group identified through research was working adults who enjoyed grabbing coffee or pastries but the long wait times were inconvenient.
Major Pain Points
Time: Working adults are limited on time to stop for pastries and coffee.
Dietary Restrictions: It’s easier to read the menu online especially to note any dietary restrictions users may have.
Customization: Being able to customize their options during a mobile online order is more efficient than when ordering in person.
User Journey
Sitemap
I created a sitemap to help define the overall structure and content on Revive’s website in a way that would be logical and easy to navigate for our users.
Design
Sketching a Solution
Taking what I’ve learned throughout my process to this point, I started to make decisions on how the content on Revive’s website would be organized based on the project goals we want to meet. These are the low-fidelity sketches of the menu page for both the responsive desktop and mobile site. The orange stars next to features signify what I liked and wanted to use for the final sketch.
Low-Fidelity Digital Wireframes
Taking the lo-fi wireframe sketches, I digitized them on Adobe XD. During the process I wanted to make sure users were able to quickly access the information they needed and were looking for when using the website.
High Fidelity Mockups
Using Adobe XD the low fidelity wireframes were turned into high fidelity mockups.
Color Palette
When designing the responsive desktop and mobile site the goal was to incorporate a minimalistic look that invited a homely ambience. Shades of black and white with a pop of slate gray throughout the site. The colors chosen help give a clean and modern look.
Typography
For the typography I chose Raanana for the logo, menu bar, and headings. This font gives a traditional minimalist look that’s easy to read. For the subtext I chose Helvetica Neue because it is gives a more soft and clean appearance.
Final Product
Final Responsive Desktop Website
Final Responsive Mobile Website
Takeaway
This case study was a challenge as I am more accustomed to using Figma over Adobe XD. However I quickly adapted to Adobe XD and enjoyed using the platform. I also realized that the early designs are not final and iterating is crucial to explore various possible ways to effectively address user pain points.