UI/UX
Making a product visually appealing is easy.
Making it functional is a requirement.
Making it solve a problem with a strategic understanding of a user's needs, that's a skill.
Figma. Adobe XD. Axure. Balsamiq. InVision Studio. Hotjar. UserTesting.
Sapphire Cafe & Lounge
Takeout App
THE COMPANY
Sapphire Cafe & Lounge specializes in fairtrade coffee, quality cuisine and weekend nightlife. They pride themselves on personalized customer service at their downtown location.
THE APP
This conceptual app allows guests to order easily for delivery or pick up. All food and drink items are available with a simple payment at the end of the ordering process.
PROJECT SUMMARY
As Sapphire Cafe & Lounge closed it's doors to the public during COVID, their need for an app to order drinks and food was a necessity to stay in business. The outcome was an easy to use conceptual app that kept in brand with their established location.
Role
UI Design
UX Design (basic)
Duration
August 2021
(1 month)
Team
Indivudual
Key Contributions
Concept Ideation
Research
Wireframing
Prototyping
Brand Implementation
Visual Design
Tools Used
Figma
Illustrator
Photoshop
THE PROBLEM
With COVID impacting the food industry, Sapphire needed to become available online to keep their business running. They also needed to maintain their signature look and feel of both cafe AND lounge. They were worried they wouldn't be able to offer their fairtrade coffee as delivery was not an option for a low cost item.
WHO ARE THE CUSTOMERS
Sapphire was targeting those customers who were already frequent visitors. Since their location was catered to more of an experience rather then the food itself, we became aware that the app would be targeting locals who have been there before.
THE SOLUTION
The app allows users to choose Pick-Up or Delivery options from the home screen, which takes them to two different screens. The Pick-Up screen gives Sapphire the ability to give their coffee and lower cost snack foods available for purchase and not need to worry about adding a delivery cost.
Design Process
Research
Competition Analysis
User Interview
Project Pran
UX Design
Data Analysis
UX Personas
User Feedback
Brainstorm
Wireframes
Branding
Logo
Colours
Typography
UI Design
Concept Testing
Prototype
Style Guide
Visual Design
User Testing
Usability Testing
Feedback Integration
Deliver
Research
I interviewed the owner and 10 guests to come up with a solution to keeping Sapphire open for business. Here are the takeaways from the questionnaires:
• Breakfast and lunch were the most ordered meals
• The main focus for guests was timely order of delivery
• Pick-Up over delivery was more important as 8/10 of the guests worked downtown and wanted their drink/meal during morning commute and lunch hour.
• Consider themselves as regulars who visit 3-5 times a week
• Found that there was no need for a Sign Up page as they preferred a quick ordering process. Since the menu wasn't long, they didn't require the app to memorize their previous order
Demographic
• Ages 18-50
• Lives or works near downtown Guelph, ON
• Includes participates of all genders
Paper Wireframe
Creating a paper wireframe first let me and the owner visualize what the product could look. I used a dry erase board to speed up the process. In the span of 1 meeting, we were able to come up with a basic concept which was enough to move onto a low-fidelity wireframe to test our theory.
Low-Fidelity Wireframe
I created a low-fidelity wireframe to represent the skeleton of the app so I could focus on the core interactions and test them with users before spending time on the visual design. This saved time by not implementing solutions that didn't work during usability tests.
I found that creating the option of Pick-Up and Delivery on the first page let both users and the business understand what their customers needs are.
Brand
After receiving feedback on the wireframe and usability tests, I created a prototype with their branding guidelines that I created for them.
Results
While the app is not live, the feedback from the project was sufficient to have learned many lessons. The importance of user research to find their pain points is tremendous in learning what a user needs the app to do. I was able to create an app that feels like you would be ordering from the restaurant itself.
I found the UI Design to go seamlessly hand-in-hand with my graphic design background. Learning UX Design was a newer concept in terms of receiving feedback from multiple sources as opposed to 1 decision maker, but it completely made sense in terms of usability.
I am completely grateful for this opportunity and look forward to expanding my UX skills.
