About the project

Brief: Design an application for Pineapple Coffee Co. based on customer feddback allowing customers to click and collect their coffee, food, and whole bean order.

Pineapple is a mobile ordering app for the fictional Pineapple Coffee Co.  The ordering app provides mobile access to locally roasted beans and hand crafted coffee for the busy working professionals and local college students on the go.  I researched and designed the app from conception to delivery as a requirement for the Udacity UX Design Nanodegree Program.

​

User Experience Design & Branding

Project Overview

About the project

Interviews

The Goal

Design an app to:

• Allow customers to order drinks using their mobile device or computer.

• Allow customers to see the menu.

• Allow customers to earn points towards free items.

• Allow customers to pay via online payment or cash on collection.

• Be easy to use and work on all devices.

Primary research

Interviews

I conducted interviews with commuters and college students to understand what methods they use to order coffee, their pain points and the challenges they face during the ordering process.

​

Interview Questions

1. How many days a week do you order at least one cup of coffee?

2. Why do you drink coffee?

3. On Average, how many times per MONTH do you visit a cafe?

4. What types of caffeinated beverages do you enjoy drinking?

5. What factors influenced your choice to make a purchase?

6. What other factors would motivate you to stay with your local cafe?

7. Would you sign up for a monthly coffee bean membership?

The process

User research

Discovery:  Research & Analysis

I wanted to learn more about how people use mobile coffee ordering apps and what they value.

The primary user group I identified was commuters.  I have conducted phone and in-person interviews

and sent out surveys to 20 participants who met the following criteria:

• Want to skip the long wait queues to grab their order.

• Want even more value for their dollar by opting into a rewards program

• Want notification for an order to be completed timeline

• And for the Rockstar coffee lover, a monthly coffee passport that allows them to order and enjoy coffee from around the world.

The user group confirmed initial assumptions about the inefficiency of wait times for in-person orders.  Long wait times interrupt their productivity, causing them to order from larger brands that provide mobile order options.

Key research findings

User journey map

Define

To brainstorm features for the product roadmap, I created a "How Might We" and "Point of View" (POV) statements using insights from my research and user personas.

A quick user journey before the app is created to learn how we can create a great user experience.

Information architecture

Mobile app & Desktop

New user flow map

Develop Prototyping:

Wireframes

Low - Fidelity Prototype

Test: Validation, Usability, Feedback

Usability study

I conducted remote usability tests with 10 users through lookback.io. and received direct feedback from users as they walked through their interaction with the app.  

All ten participants were asked to perform specific tasks on the low-fidelity prototype and respond to these follow-up questions.

1. What tasks frustrate users?

2. What areas do users find themselves stuck in?

3. How long does it take for users to complete assigned tasks?

4. How many users performed all tasks without errors?

Based on their feedback, some users found it difficult to locate the menu and order button, so I provided a better location to improve the app's overall flow.

User outcomes

A/B testing

When the High fidelity wireframes were done, I was able to test them with a few people to collect some additional feedback.  Most of the comments were about how it may be confusing to add a coffee item to their cart so, I made some last changes to the visual design below.

The initial home page had a lot of icons.  There were many universal icons on the home page, which often leads to better navigation and a couple of lines with a bulleted list.  That’s pretty standard, but it wasn’t giving us the results I wanted.

The second variation reduced the copy significantly.  Additionally, the call to action (CTA) changed from “BUY NOW” to “ADD TO CART” and “FINISH” to “CONTINUE.”  A couple of other changes, including the button size and color scheme, rounded out the differences between adding an item to the cart and completing the order.

Simply cleaning up the copy and changing the picture led to a 78.23 percent increase in conversion rate. After changing the button style, text, and removing a few icons by replacing them with the text, I experienced a boost in internet traffic to my prototype.

Interaction feedback

A common observation that I received from user testing was that some of the app's interactions did not have enough feedback to indicate whether the desired action was performed or not.  Therefore, for the ordering confirmation page, I added a tracking feature  to give a visual cue that their order has been successfully submitted.

Additional feedback

Another theme that was brought up was accessibility.  Users suggested a dark mode option for ease of eye strain.

High - Fidelity Prototype

Made by Figma and Photoshop

Dark themed concept

View prototype here

Onboarding screens
 

Homescreen


Users can navigate important relevant information, including pickup location, rewards, coffee passport, favorites and specials.

Menus

Users can scroll down for relevant information and navigate to other screens through the homepage.

My Favorites

Users can quickly access their favorites tab to reorder common drinks to save time by using the quick selection tab and pressing the scan in store button taking them directly to checkout.

Item Page

A simple flow and clear imagery allows users to customize their orders and add a recommended food item.

Coffee Passport

A simple flow and clear imagery allows users to customize their orders and add a recommended food item.

Cart

Users can review items, choose delivery or pickup, and adjust their orders using the add or delete feature.

Checkout

Confirmation

Profile

Users can select method of payment for mobile pickup, redeem points or scan method of payment in store.

Users can create and manage their account, view order history, my rewards, my passport, and view their cart.  

Users can also select the settings button at the bottom of the screen to adjust notifications, and delete account.

Website

What I've learned

This project taught me how to translate user needs and pain points in their coffee ordering process into meaningful user flows in a mobile app and web format. I explored rapid prototyping to create realistic solutions that kept the user in mind throughout each iteration. The nuances of incorporating an engaging UI scheme and micro-interactions to my final deliverable gave a new perspective for evaluating the details to create a holistic user experience.