Breakie | UI UX Case Study
Introduction
The objective of this project was to design a user-friendly app utilizing a user interface processes and methods.
What is Breakie?
Breakie is an app that allows its users to find hole-in-the-wall breakfast spots in Vancouver, BC and collect stamps to redeem rewards for exploring new restaurants.
Business Goal
Encourage users to visit new and local breakfast spots by collecting “e-stamps”.
User Goal
Browse through a curated selection of breakfast restaurants in Vancouver and stay up to date with new restaurants that open.
Project Goal
Design the interface of an app for the foodies of Vancouver to keep the pulse of new restaurants and branch out to try new experiences as part of a high-quality breakfast circuit in town.
UI Design Process
I was tasked with designing and executing the user interface (UI) for this project.
An overview of the tasks I completed to successfully achieve the goal above included the following: create a Design Inception, develop a Moodboard, Style Tile, and Style Guide.
Research and Discovery
The Challenge
The brief of the project was to create an app to facilitate the decision-making process of users when picking a breakfast restaurant, keeping in mind the following:
• Browse through a curated selection of breakfast restaurants in Vancouver
• Learn about the restaurants’ story, type of food, chef’s vision, etc.
• Find the address and get directions
• Present the passport to the restaurant staff to receive an “e-stamp” and be incentivized to collect more stamps
• Be supported in making a quick decision on which restaurant they should go to
• Stay up to date with new restaurants that open
• Ask a friend out to breakfast
To set the foundation for my design, I conducted domain research. I investigated several food apps, such as Uber Eats, Yelp, SkipTheDishes and restaurant websites, such as the Botanist, Café Medina, Trattoria and more. This research allowed me to get a sense of what users are currently accustomed to and understand how other companies bring their design inception to life.
Furthermore, I conducted research on how specific colours make people feel. In my research, I found that the colour green represents good health, energy and nature. This research paved the way for my design inception.
Target market
The target audience for the current project is highlighted below:
The Design Process
The UI research on Breakie set the foundation, the next step was to establish the visual language for the typeface, I completed this by creating a design inception.
The “Why”?
The first step to devising the visual language of a website or creating the design, the designer must establish the “why”. The “why” allows designers to set the stage for who they are designing for and why they are designing.
This is why we are creating an app for Vancouver food lovers:
To cultivate a sense of excitement by bringing food enthusiasts together to enjoy hidden breakfast gems.
Design Inception
The “why” establishes the purpose and drive behind the mood and visual language, which are discovered using design inception (Figure A).
The mood I set out to create was an upscale, welcoming and healthy vibe, catered to young adults living in Vancouver, BC.
Moodboard
A moodboard is a digital or physical collage of ideas that reflect the mood you plan to achieve with your design.
Below is my moodboard (Figure B). Here you will find elements of greenery and nature to encompass good health, humbling oak and elements associated with upscale restaurants, such as marble. As illustrated below, my moodboard features are minimalistic with ample white space.
Style Tile
Style Tiles (Figure C) are a design deliverable consisting of fonts, colours and interface elements that reflect the visual brand for the app.
The icons and buttons above are custom designed by me.
The typography chosen for the app is Lato. Lato is a humanist sans serif typeface designed by Łukasz Dziedzic. It is a neutral, legible and friendly typeface, optimized for print, web, and mobile interfaces.
It is a legible and friendly typeface, and the semi-rounded edges gives the user a warm welcome. The structure conveys seriousness and stability. The combination of warmth and stability made Lato perfect for Breakie.
Wireframes
Wireframes are the blueprints of the app or website. UI designers take these blueprints and bring the design inception of the project to life.
Above are some of the wireframes that I was tasked with designing the interface.
As a UI designer, we do not make any major changes to the wireframe (e.g., change the number of CTA’s) but upon discussion with the UX designer, UI designer can make specific changes to the wireframe (e.g., placement of a CTA).
User Testing
Usability testing is a technique used in user-centred interaction design to ensure the technology is intuitive and user-friendly. User testing allows the designer to collect valuable feedback back the design of the product from the target population.
User testing is a part of the UX design process, but as a user-centred UX and UI designer, I include user testing as a part of the UI process to optimize the design.
I tested 7 participants on the design of the app using the following user objectives:
1. Is the sign-in page intuitive?
2. Which option is selected under “Best Breakies”
3. What does “My Passport” mean to you?
4. Is the cafe information legible?
Below is an example of some of the changes I implemented to the design:
My user testing revealed that the design of the sign in page should be shifted up so that the first field (user name) was in the centre of the screen.
Furthermore, multiple users also indicated they prefer the sign in information to collect “email” rather than “user name” because the user name is an additional piece of information the user is required to remember.
All feedback from testing was considered before moving onto designing the high-fidelity. I made revisions, referenced research and retested throughout the design phase.
Final Design
To cultivate a sense of excitement by bringing food enthusiasts together to enjoy hidden breakfast gems.
The objective of this project was to design an app the reflects the “why” stated above.
To achieve this goal, I used imagery of people sharing food on the sign in page but used a white foreground to highlight the fields the user needs to read and/or complete.
For the “Best Breakies” page, I increased the font size for the option that is selected. As displayed to the left the font for “Cafe Medina” is bigger than the other options.
To customize the app and add a touch of delightful design, I changed the icons on the Passport page from checkmarks to the custom spinach leaf that is in the logo.
Here I have established a hierarchy in the text by using different text colours, kerning and leading.
For example, the leading for the body text is 1.70, whereas the leading for the address is 0.0.
Future Considerations
I am happy with the product I delivered in the 1-week timeline. If I had more time, these are some of the factors I would consider:
1. Extend research period. Research is a valuable step in designing a user-centric product. If I had more time, I would allocate more time to research in efforts create the most well designed app.
2. UX! As a UX/UI designer, the UX of an app is integral to the usabilty and accessibility.
3. User testing. The more testing, the better.
4. Persona. A user persona bridges the gap between research and design. If I had more time, I would create a persona.
5. Custom logo. If I had more time, I would custom draw the logo myself, instead of editting a stock picture.
Conclusion
The goal of the project was to design the interface for the app Breakie using a UI library.
I accomplished this by adopting a design that fosters an upscale, optimistic and healthy interface.
The final product reflects the “why” established in the design inception: “To cultivate a sense of excitement by bringing food enthusiasts together to enjoy hidden breakfast gems”.
