Maru Coffee App and Responsive Website and Case Study

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

  • The 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.

  • The goal The deliverables will be a high-fidelity prototype of an online ordering app for Maru Coffee.

  • My role UX designer designing an app for Maru's Coffee from concept to deployment.

  • My responsibilities Conduct interviews, create paper and digital wireframes, low and high-fidelity prototypes, account for accessibility, and iterate on designs.

Understanding the User

  • User Research

  • Personas

  • Problem Statement

  • Competitive audit

  • Ideation

  • User Journey Maps

User Research

To start, I conducted user interviews and created empathy maps to better understand the target users and their needs. Research data revealed that many of our users live or work in busy urban areas like Los Feliz and Downtown Los Angeles. In these high-density neighborhoods, they often face long wait times during peak coffee hours. The lack of a mobile ordering option makes their frustration worse, turning their coffee runs into a more time-consuming and stressful experience than anticipated. What should have been a quick and easy process instead became frustrating, taking away the convenience they were seeking.

Target Audience

Our target audience is experiencing long wait times, but with our newest service, a 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.

  • 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.

Personas

Problem Statement: Lauren is a marketing assistant who needs an easy way to order and customize her coffee on-the-go because long wait times and difficulty personalizing her order during busy mornings make her feel rushed and stressed before work.

Problem Statement: David is a busy software engineer who needs a solution that allows him to quickly order and pick up his favorite coffee without waiting in long lines because he often feels frustrated and stressed when delays disrupt his tightly packed work schedule.

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

Understanding the User

  • Sitemap

  • Paper Wireframes

  • Digital Wireframes

  • Low-Fidelity Prototype

  • Usability Study

Sitemap

Paper Wireframes

Digital wireframes

Mockups: Original screen size

Mockups: Screen size variations

Since users shop from various devices, additional screen sizes were created for the Maru project. The mockups were based on earlier wireframes. It was important to optimize the browsing experience for different device sizes, such as mobile and tablet, so users have the smoothest experience possible. 

High-fidelity prototype

High-fidelity prototype

I made the app interactive by connecting each element to it’s designated location.

Previous

collegefund (Copy)
Next

maru (Copy) (Copy)