Pekku Coffee App Prototype

Crafting a frictionless online shopping experience

Project Overview

Coffee Shopping Made Easy

Please note that this is conceptual student work from 2019. My recent professional work is protected by NDAs and can’t be shared on a public website.

As a short project for my Digital Media MA programme, I developed an e-commerce app protoype for the fictional Pekku Coffee company that provides a simple ordering experience for users with an interface design that represents the organisation’s new logo and branding (also designed by me).

Client

Pekku Coffee

My Roles

UX Designer

UI Designer

Empathise

Building Understanding

After initial research evaluating the apps of industry-leading coffee retailers, I began to define the goals of the business and the users.

Business Goals

Easy self-service functionality allowing users to create and manage their own accounts, which will decrease customer service costs.
Upsell customers from one-time purchases to coffee subscriptions with repeat deliveries, which will help company reach sales goals.

User Research

I conducted 10 in-person qualitative interviews with potential users representative of Pekku Coffee’s target market.

User Goals

Customers want checkout functionality that doesn’t require setting up an account.
They value efficient browsing with filtering tools to narrow selection.
They want to easily track orders and modify subscriptions.

What Users said

"I hate apps and websites that make it hard to place a guest order."

"There are so many sites where it's really hard to filter out products I don't want. It should be easier to find what I'm looking for."

"Subscription sites sometimes make it really hard to make changes or cancel repeat orders. It takes a lot of work to do things that should be really simple."

Define

Defining Scope

After identifying how to create a design that supported both user and business goals, I started the iterative process with the end goal of creating a medium-fidelity prototype that can be tested by users before building out a fully functional prototype.

Iterate

Iterative Design Process

I sketched out multiple layouts and did informal user testing to determine which were the most promising ideas to explore when creating the medium-fidelity prototype in Adobe XD.

Low-Fidelity Sketches

Low-fidelity app screen mockups allowed me to quickly get feedback from users for further iterating and design changes early in the process. Refining design concepts early helped avoid unnecessary work when I began to create the medium-fidelity prototype in Adobe XD.

Prototype & Test

Medium-Fidelity Prototype

Users wanted a streamlined shopping experience, so I avoided a splashy intro screen describing the company, instead using the home screen to avoid wasting customers’ time or causing cumbersome navigation. Pekku wants to sell coffee and users want a fast and easy shopping experience, so the home screen should funnel users right to the point. The information architecture of the app didn’t require a hamburger menu or complex navigation options; a simple top menu bar lets users navigate efficiently.

Pekku’s design brief stressed the importance of upselling one-time orders into coffee subscriptions, and users emphasised that they wanted an easy way to manage subscriptions because many online shopping sites make that difficult to do. To accommodate both needs, the design highlights the subscription option and makes it easy to start a subscription through the regular checkout experience, and there’s high visibility for users to navigate to pages that allow them to change subscriptions easily.

Filtering tools based on multiple attributes allow customers to quickly narrow their selections and compare similar coffees. The profile section of the app is simple and has multiple navigation paths so users can quickly get to their account details.

Prototype Functionality

The medium-fidelity interactive prototype allows users to:

Browse and filter different coffees
View product detail pages
Add items to the shopping cart
Place an order
Create and manage their account
View the About Pekku Coffee page

Reflection

What I Learned

This self-directed UX project gave me more control and creative freedom than my corporate work and allowed me to apply the knowledge I gained at McMaster-Carr in a new context.

Achievements

Mastered Adobe XD prototyping software
Designed my first app prototype

Insights

My e-commerce background is a great asset in developing online shopping experiences outside the industrial supply industry. Transferable knowledge about information architecture, hierarchy, search behaviour, filtering functionality, and checkout flows will help me in every project.
Informal UX research is a good alternative to dedicated and resource-intensive UX research in projects with low budgets and short time frames.