Jamba

An Overhaul of the Customer Journey and Information Architecture

Geared to Decrease Mobile Cart Abandonment and Increase App Sales

MY ROLE

UX Researcher
+
UX Designer

Scope

Team of 4 students

Focus Brands Industry Partner
August 2019 - December 2019

THE CHALLENGE

Jamba Juice Rebranded to Jamba in Summer of 2019. 5 Months after the Mobile Application Graphic Redesign and Launch date, with thousands of customer reviews, the app scores were plummeting

THE GOAL

🍋Investigate User Experience

🍋Test New Features + Tweaks to Existing Information Architecture

🍋 Improve Customer Journey

🍋Decrease Cart Abandonment through User Centered Research & Design

Outline:

4 Major

Research &Design  

PHASES ➡️

PHASE 1.Exploring the Problem space

🍑GOAL: Answer Preliminary Research Questions
Who are our users? What are their Intentions + Frustrations?
What can we learn from successful order-ahead applications?

What can we learn about the customer journey and drop-off points from our app reviews and analytics?

🍑PHASE 1 PROCESS:

  1. Research: Completing Lit Review, Competitive Analysis, Task Analysis, Usability Studies, and Surveys-- Gaining robust background understanding

  2. Compiling Ranking and Analyzing all major findings into a database: converging on certain ideas as center points of redesign

  3. Synthesizing Design Implications: Creating Design implications based on major findings

  4. Creating wireframes based on Design Implications

🍑METHODS I TOOK THE LEAD ON: Lit Review and coding of current App Reviews, Online Survey Design and Dispersal, Field Studies and Contextual Interviews

🍑Link to Full Phase 1 Brief: details on Survey Design, Contextual Inquiry, Design Implications

Compilation of Phase 1 User Interview Findings

CHALLENGES

Phase 1 FINDINGS

The application was just redesigned and users loved the graphic design but still only 4.3% of users in the sales funnel were completing orders.

 

We faced challenges in this phase with learning about what users like and dislike about restaurant applications, specifically order-ahead applications, we spent a ton of time going through app reviews and coding them to find the main pain points.

 

We also faced the challenge of interviewing someone who is mid-order, because our interviewees were there at our interviews specifically to complete an order. This phase was a major learning phase on the user needs and tasks, the order-ahead app problem space, and specific Jamba Issues.

15 Major Findings Total; Displaying Top 5

REDESIGNS: Wireframes

OLD JAMBA APP ➡️ New Wireframes: Examples of How findings impacted design

P1 🍑

Our online Survey Data showing over 50% of consumers are using order-ahead applications more than 2X a month (n=32)

⬅️MENU PAGE:

Adding in more Detail and Help

Allowing User to compare more easily

Displaying Important Info

Including Search Function

➡️ORDER STATUS PAGE:

Increased Visibility of System Status

Utilized Familiarity in Redesign

Minimalism in the Redesign

P2 🍋

PHASE 2. Testing Wireframes in person + Designing Mock-ups

🍋GOAL: Test the usability of our newly designed wireframes in order to gain more insight into our changes to labeling and design. Assess and gain ideas for potential redesigns for our future mock-ups and prototypes.

🍋PHASE 2 PROCESS:

  1. Conduct Task-Based Usability Studies on our mock-ups created in phase 1

  2. Complete a post-walk-through interview in order to measure certain usability criteria

  3. Compiling all user thoughts and notes into actionable items on our Figma board

  4. Creating our mock-ups

🍋METHODS I TOOK THE LEAD ON: Creation of Evaluation Criteria, Usability Study Design, Usability Measures and Metrics, Design Implications Synthesis

🍋Link to Full Phase 2 Brief: details on Usability Study Design, Evaluation Methods and Criteria and Design Implications

CHALLENGES

The main challenge here was going from the broad scope of looking at the app as a whole and breaking it down into manageable and changeable parts.

In order to combat this challenge, we ended up splitting our research and redesign into 3 sections, Sign-up, Ordering, and Check-out. We also split up tasks into design oriented and label oriented tasks.

User Testing

User Testing Was completed with 5 subjects, we went through certain tasks with a think-aloud method and then interviewed the users afterwards. Interviews were recorded to capture interactions.

InterView questions

A snippet of the Post Task-Based Usability Testing Interview Questions and the Target Metrics and Usability Criteria for each

For all Interview Questions Click Here

DESIGN IMPLICATIONS BASED ON FINDINGS

💡Status Check

With all of the design implications (above) gained in this phase, we decided to focus on these aspects when redesigning our wireframes for our next rounds of testing.

We did not use the S.U.S. (System Usability Score) at this point because it was not optimal to use this usability scale on a semi-functioning mock-up of an application.

Next we will look at changes made when transitioning to wireframes, the usability testing for our wireframes, and the design implications gained from that testing.

Notes from cognitive task-based walk-throughs

Compilation of Phase 2 Research Findings: Notes from Task-Based Usability Studies

OLD JAMBA APP ➡️ Our Wireframes ➡️ Our Mock-ups: Examples of How findings impacted design

In the example above, you can see that we incorporated Consistency, Clarity, and Improvement of Data Display in order to meet customer needs identified during our User Research phases and post-research brainstorming sessions.

P3 🍉

PHASE 3. Testing Mock-ups in person + Designing Final Prototype

🍉GOAL: In assessing the redesigned mock-ups, we focused our user research entirely on New Users, as we wanted to focus on our main user group identified in phase 1. In this phase we are seeking exploratory design implications and ideas. We specifically looked at scroll patterns and data display patterns.

🍉PHASE 3 PROCESS:

  1. Conduct Task-Based Usability Studies on our mock-ups created in phase 2

  2. Complete a post-walk-through SUS survey in order to gain comparative data on our design and the original Jamba Application

  3. Compiling all user thoughts and notes into actionable items on our Figma board

  4. Creating our working prototype

🍉METHODS I TOOK THE LEAD ON: Design of sign-up and check-out screens in Figma, Creation of Evaluation Criteria, Usability Study Design, Design Implications Synthesis

🍉Link to Full Phase 3 Brief: details on Usability Study Design, Evaluation Methods and Criteria and Redesign

Top 5 design implications based on research findings

OLD JAMBA APP ➡️ Our Wireframes ➡️ Our Mock-ups ➡️ our prototype: Examples of How findings impacted design

In the example below, you can see how we incorporated System Visibility in order to decrease User Cognitive load and Increase Predictability within this portion of the application. In this phase we worked to increase predictability in Sign-up, Order, and Check-out.

CHALLENGES

The main challenge in this phase was testing certain portions of the app that were theoretical in nature. These concepts included Cognitive Load and Voice of the App.

We begun to hone in on Information Architecture which included object labeling, flow, and a User Pre-emptive Design Structure. It was important to us to create a parsimonious design without limiting the user's ability to compare and make quick decisions within the application.

User Testing

User Testing Was completed with 7 completely new subjects, we went through a task-based Usability Study and had our users fill out a System Usability Scale in order to compare our mock-up usability to the original Jamba application.

The System Usability Scores below reflected to us that we were on the correct path to ensuring usability for the Jamba app but that there was still room to improve our design

View of all User interview notes on the mock-ups

Example of a user interview note:

With the increase in User Research and SUS scores gained in this phase we worked out major design implications to be addressed in our final phase of re-design for our Prototype.

In the next phase we go from Exploratory Research to Confirmatory Research in order to test the effectiveness of our prototype.

💡Status Check

P4 🍒

PHASE 4. Testing Prototype for effectiveness in initial goal

🍉GOAL: We switch to a confirmatory design phase here. We are looking to confirm all of our changes to the application before our final presentation to the Digital Team at Jamba

🍉PHASE 4 PROCESS:

  1. Expert Evaluations with 3 Field Experts using Heuristic Evaluations

  2. In-store Usability Studies with 5 Jamba Customers + SUS and Timing of tasks

  3. 9 Subjects - Online Remote Testing + SUS and task based think-aloud commentary

  4. Compiling all user thoughts and notes into actionable items on our Figma board

  5. Creating future of the design ideas and confirming the work done over the course of the project

🍉METHODS I TOOK THE LEAD ON: Remote Usability Testing, Expert Evaluations, SUS Analysis, Design Implications for the Future

🍉Link to Full Phase 4 Brief: details on Remote Usability Study Design, Expert Evaluation Methods, Constraints, and Design Ideas for the Future

2. Usability Testing at Jamba with users + Findings

Conducting Task-based Walk-throughs that were timed, in-store in order to combat biases in our feedback we were gaining

-A/B Testing Original Jamba VS Our Prototype

-Timed Each Task

-SUS scores completed afterwards

3. remote Usability Testing on user-testing.com

Conducting Task-based Walk-throughs that were timed, and recorded online

-9 participants accross the United States

-Timed Each Task

-SUS scores completed afterwards

CHALLENGES

This phase faced unique challenges. We ran into technical errors with our Remote Online Interviews. The way we structured tasks and questions had to be altered to be more clear since we were unable to use a moderator in this phase.

In the expert interviews, we came back with some major findings in regards to the voice of the overall application that we ended up working on before completing our in-person testing.

A final challenge was creating actionable future ideas for the Jamba team to work on that we just did not have the bandwidth to handle. For example, one of our main findings was the need for dynamic nutritional information which we did not have the ability to test but advised the Jamba team to look into it for future User Experience Modifcations.

1. Expert evaluations + Findings

Conducted Walk-throughs with 3 Experts

-Walk-through 1 was a think aloud to get them familiar with the app

-Walk-through 2 was designed for them to rate us on Heuristic Criteria below

-After this phase, we altered a few things and moved forward with User Testing in store and Online Remotely.

Quantifying our Improvement of usability

The SUS Score we ended up with from Testing our final prototype In-store and Online is reflected to the right. We tested users we did not know in order to decrease bias. We were happy to present this news to the folks at Jamba, as a way to solidify our design concepts.

Research constraints

future design research ideas

Final Note

Research and Design on this project would not have been possible without our Partners at Focus Brands, our Professors at Georgia Tech, and my amazing team members. Thank you to Team Fly Like a Beagle for making this project re-design so enjoyable and enriching!

Thank you! :D

©2020 by Shelby Reilly