Pineapple Coffee App Case Study

A mobile web design

Role: Researcher, Designer

Project Duration: Jul 2020 - Sep 2020

Redesign: April 2022

Component 26.jpg
Project Overview.jpg

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:

Component 27.jpg
  • 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.

Many coffee enthusiasts would love to sit and enjoy a robust cup of joe from a local coffee shop but are always on the go.   While big brand stores such as Starbucks provide customers with a mobile ordering option decreased long wait times decreased.  However, many local coffee businesses don’t have a mobile order option.  I love local coffee shops, and like many, I would love to spend my money locally.  I am curious to see how other customers feel about using mobile ordering apps:

  1. What they like.

  2. What they don’t.

  3. What can be enhanced or changed?

  4. How do these solutions help improve their user experience purchasing power using their phone?

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?

Process.jpg

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.

Research findings.jpg

Key research findings

User personas

Book.jpg
Book (1).jpg
User Journey.jpg

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.

Group 11114.jpg

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

Information architecture

Mobile app & Desktop

Information Architecture.jpg

New user flow map

Information Architecture (2).jpg

Develop Prototyping:

Wireframes

Develop Prototype.jpg

Low - Fidelity Prototype

Develop Prototype (1).jpg

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

Component 28.jpg

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.

Group 11115.jpg

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.

Traking (1).jpg
Component 29.jpg
Component 18.jpg
Style guide.jpg

High - Fidelity Prototype

Made by Figma and Photoshop

Dark themed concept

Onboarding screens
 

Component 31.jpg

Homescreen


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

Component 32.jpg

Menus

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

Component 33 (1).jpg

Users can search for specific items, or navigate through categories.

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.

Component 34 (1).jpg

Item Page

Component 36.jpg

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.

Component 35.jpg

Cart

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

Component 37.jpg
Component 38.jpg

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.

Users can easily track order status, and use directions to locate the store.  Additionally, I've added a traffic conditions alert to help users time their trip to the cafe.

Website

Component 39.png

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.