Maru Coffee App Design
Content
Project Overview
Audience
Competitors
Concept Board
Design Intent
Prototype
Project Overview
The Product For six years, Maru Coffee has served customers in the coffee shop and specialty eatery industry in the Los Angeles area with coffee, tea, and retail products.
Project duration March 2022 - April 2022
Problem With this project, the company aims to solve problems related to customers who wish to order coffee in advance while expanding on convenience and improving customer service and technology.
Goal The deliverables will be a high-fidelity prototype of an online ordering app for Maru Coffee.
Role UX designer designing an app for Maru's Coffee from concept to deployment.
Responsibilities Conduct interviews, create paper and digital wireframes, low and high-fidelity prototypes, account for accessibility, and iterate on designs.
Target Audience
Our target audience is experiencing long wait times, but with our newest service, an ordering app, they'll get to experience saving time by ordering coffee in advance.
Female.
Between the ages of 22 and 55.
Live in areas like Los Angeles, New York, and Seattle.
Enjoy convenience, dislike difficult tasks.
Typically work in fields like technology, marketing, and film.
Want to save as much time as possible when ordering food and their daily pain points include waiting in line to order coffee.
Favorite products might consist of an iPhone and a MacBook pro.
They learn about these products through Instagram, Youtube, and Tiktok.
Competitors
Our biggest competitors are Starbucks, Intelligentsia, and Blue Bottle Coffee. These competitors offer beverages, baked goods, and retail merchandise. We are ahead of them in providing hometown locally roasted coffee and simplicity, but we are behind in product offerings like ordering in advance through a mobile app.
Concept Board
Design Intent
I wanted the layout of the app to compliment Maru's minimalistically-designed website.
Low-Fidelity Wireframe
I began by creating digital sketches of a low-fidelity prototype.
Prototype
High-Fidelity Wireframe
I then integrated Maru's color palette, typography, and icons to transform the low-fidelity prototype into a high-fidelity prototype while keeping the branding recognizable and consistent.
High-Fidelity Prototype
I made the app interactive by connecting each element to it’s designated location.