First Republic Bank | Web & Digital

RESPONSIBILITIES

BRANDING

Tools

Table of Content
No headings foundSelect the Frame that wraps your article content → open Accessibility → set Tag to main, article, or section.This message disappears as soon as headings are detected.

Project Overview

This personal project focused on enhancing the mobile coffee ordering experience for Black Rock Coffee customers. The app’s existing interface was redesigned to prioritize simplicity and efficiency, allowing users to order their coffee with minimal effort and time.


Assuming the role of the UI/UX designer and researcher, I led the end-to-end design process, from understanding user pain points to creating intuitive wireframes and interactive prototypes in Figma.

The Problem

The app’s design was not user-friendly, resulting in a cumbersome experience for customers trying to order coffee quickly. Pain points included unclear navigation, an overcomplicated ordering flow, and limited visual cues, which led to user frustration.


Addressing these issues was essential to ensure the app delivered a fast, easy, and enjoyable experience that aligned with customer expectations and Black Rock Coffee’s brand values.

Summary

Black Rock Coffee’s mobile app aimed to provide customers with a convenient way to place orders ahead of time. However, the original app interface had usability issues, making the ordering process longer and more frustrating than necessary.


Customers expected a seamless digital experience similar to industry leaders, yet the app fell short of these expectations, leading to potential customer dissatisfaction and missed opportunities for repeat business.

Target Audience

The primary users were busy professionals, students and coffee enthusiasts who relied on the app to save time during their daily routines. This audience typically ordered coffee on their way to work or during short breaks and prioritized speed, simplicity, and reliability.


A secondary audience included loyal Black Rock Coffee customers who valued customization options and promotions within the app.

Constraints
Time

The redesign needed to be completed within a fixed timeline to align with Black Rock Coffee’s product release schedule.

Resources

The team had limited development capacity, requiring solutions that could be implemented efficiently without overhauling the backend.

Brand Consistency

The new design had to align with Black Rock’s established branding and visual identity.

Technical Limitations

The redesign had to work within the constraints of the existing app infrastructure to minimize development complexity.

Market Research

Market research provides a look at industry trends, user expectations, and competitive benchmarks, which are crucial to positioning Black Rock’s app effectively. Here are some key points on what I found during my research:

Increased Demand for Convenience

Many consumers expect the convenience of ordering on mobile apps to fit their fast-paced lifestyles. Features like one-click reordering have become essential.

Personalization

Customers increasingly look for personalization options, like saving favorite orders, custom drink preferences, and loyalty rewards, to feel a connection with the brand.

Rewards Programs

Popular coffee apps often offer loyalty points, rewards, or member-only discounts to encourage repeat business and app engagement.

Simplicity and Speed

Users prioritize simplicity; the app should allow them to make an order with minimal taps and minimal cognitive load.

Competitive Analysis

A look at competitors provides insights on best practices and unique selling points. Here’s what competitors often emphasize:

Starbucks

Seamless ordering process, loyalty rewards, easy-to-navigate customization options.

Dutch Bros.

Friendly user interface, easy to scan rewards code, easy to navigate menu.

Dunkin'

Emphasizes quick ordering with a straightforward interface, a focus on repeat customers, and integrated rewards.

Key Takeaways

And these were the key takeaways that we gathered for what needed to be included in the new and improved Black Rock Coffee app.

Streamlined Navigation

Simplifying the menu structure and limiting the number of taps to order could make the experience faster.

Quick Reordering

Adding an option for users to reorder their previous orders with one tap could align with competitors’ best practices.

Loyalty Features

Introducing points or rewards might encourage engagement and repeat business.

The Solution

Black Rock Coffee’s mobile app should prioritize quick ordering, rewards integration, and a clean, intuitive UI to compete effectively.

Personas

I created two personas based on Black Rock Coffee’s general target audience. Most of whom were business professionals in tech, freelance contractors and students. Here are two persona examples:

Affinity Map
Wireframes

The design process began with low-fidelity wireframes to outline the app’s core structure and functionality. These wireframes focused on streamlining the navigation and simplifying key flows, such as customizing drinks and placing orders. Mid-fidelity prototypes were then created to test the user journey, ensuring an intuitive experience before moving into high-fidelity designs.


The wireframes served as a blueprint to visualize the layout and prioritize usability before finalizing the visual elements.

Visual Design

The visual design of the Black Rock Coffee app aimed to balance simplicity and brand consistency while creating an intuitive, visually appealing experience for users.

The wireframes and final designs worked together to deliver a cohesive, visually appealing app that streamlined the user journey. The final design not only aligned with Black Rock Coffee’s brand identity but also elevated the user experience by making ordering coffee a seamless and enjoyable process.

Interactive Prototype

I used Figma to build out a simple, navigational, hi-fidelity prototype that would take you through the simplified process of ordering coffee compared to the old app.

Let’s make something

amazing together.