Aybell

Creating a simple, mobile customer service experience
Role

Prototyping &
Usability Testing Sprint Lead

Timeline

Feb - May 2018

Deliverables

Hi-Fi Figma Mockups
InVision Prototype

Overview

I worked on this project during my Spring 2018 semester at UC Berkeley, through Berkeley Innovation, a design consultancy I belong to on campus. My team and I were approached by Aybell, a startup with a mission to connect consumers to customer service agents without the need for interactive voice recordings. Aybell enables the consumers to connect to the correct agent in any company by creating a visual menu for all features of customer service platforms. In this project, we redesigned the UI and UX of Aybell's web app to facilitate a better interaction between the caller and agent.

The Problem
Problem Statement

Aybell's app had all the basic information a user would need at first, but lacked intuitive features and was difficult to navigate.

Design Challenge

How might we redesign the app in a way to make sure all users feel emotionally cared for before, during, and after their call? 

Initial Research

We started off the project by conducting user research utilizing various methods in order to get an understanding of how people feel about interactive voice recordings (IVRs). Using the initial prototype Aybell provided us with, we conducted user testing to gain a better understanding of user interactions and pain points with the app.

Usability Testing

We assessed how easily new users could navigate Aybell's prototype through in-person and online user testing,

Surveys

We sent out public surveys to gauge people's trust in customer service calls and identified major pain points of wait time, accuracy of answers, and being redirected based on over 100 responses.

Competitive Analysis

We researched the competitive market to identify pros and cons of similar working apps to better understand where Aybell could improve.

Interviews

We interviewed 15 people about their experience with customer service calls and IVRs. Based on these interviews we identified elements of the UI that could be improved upon.

Affinity Diagram

We took key observations from our user interviews and categorized them in order to pinpoint the underlying themes and trends from research. By doing so we were able to see which aspects of the customer service experience were best liked and disliked and which parts could be improved upon. What really stood out to us was the fact that users felt an information overload when using the app, disliked speaking to actual agents, and the amount of time a user was willing to wait.

Key Insights
Trust

People have issues with trust when interacting with IVRs because they do not provide concrete solutions.

Complexity

People prefer to not speak with an agent, but struggle to place complex solutions into simple categories

Passed Around

People want to have their problem solved during their first call and do not want to be passed around.

Wait Time

The time that people are willing to wait depends on their patience and importance of their problem.

Meet The Users

Using our research and insights, we created two primary personas: the daily student and the working professional. Throughout our design process, we made sure to always refer back to these personas when making our design decisions.

Empathizing With Users

To get a better understanding of how a user would feel throughout the process, we mapped each phase of our potential user's journey of using the app to connect with an agent and get their problem solved. By seeing where in their journey the user had lows or difficulties using the app, we were able to recognize areas where we could improve the app in our redesign.

Ideation

We sketched out our ideas on how we could improve upon the existing prototype in our redesign. We focused on the two ideas we felt were most important for the app: a easy to use search feature and an onboarding process.

Out Of Left Field

After having our weekly meeting with the founders of Aybell, we were surprised when we were asked to change our target user. Up to this point we had spent half of our project timeline researching, drafting, and creating these insights and user personas.

Both of the founders of Aybell were Israeli veterans who decided that they wanted the focus of their prototype to be based on helping other veterans. This made our new target user: veterans of all ages.

This was a major shift for us and was our biggest challenge during the project as we had to start from what felt like scratch midway into our project timeline.

Field Trip

After adjusting our focus to our new target user: veterans, we quickly realized that none of us knew any veterans. How would we make a product for a user we knew nothing about? The only solution we could come up with was to go directly to our user.

Palo Alto Veteran's Affairs

Our trip began on a Saturday morning where we rented a Zipcar and made the hour and a half drive from Berkeley to Palo Alto where we visited the Veteran's Affairs to speak with and learn more about the users we were now designing for.

After making our way through the maze of Veteran's Affairs, another redesign for another day, we found some veterans who were waiting to be seen by the doctor for a check-up. They agreed to speak with us and we were able to learn more about their daily routines and what their experiences were like dealing with Veteran's Affairs customer service.

After listening to their stories we introduced them to Aybell and got their thoughts on the product. We quickly realized that we were becoming aware of insights we would have never developed if we did not take the trip to speak with the veterans first hand.

New Insights
Text Size

Veterans who were older found it hard to read the small text on the departments listings and wished it was bigger.

Relevant Info

Many veterans felt it would be helpful to have useful information listed for each department: hours, opened/closed, etc.

Button Size

Many veterans struggled with clicking the button to make a call to the department they wanted to reach.

Oversimplify

It's better the app be overly simple rather than complex and expect the user to know what we think is intuitive.

Meet Carl

Using our new research and insights, we created a new primary person; Carl. He embodies the traits and technological skills of many of the veterans we spoke with. We felt it was important to redefine our persona as our target user had shifted as well.

New Sketches

After taking our new insights into account we made new sketches of the features we felt would be helpful for our new user.

Mid-Fidelity Prototype

After sketching out our low-fidelity mockups, I was in charge of leading my team for the prototyping and user testing sprint. We decided on the ideas we felt would be best for our redesign by combing different parts of our mockups. We thought through the preliminary user flow and went over what parts were important, unnecessary, and what areas we could make better. I made sure that we placed and importance on crafting a cohesive mid-fidelity without focusing on the visuals; in doing so we could focus on testing the experience and flow of the app rather than what color people felt a button should have been.

User Interface Design Flow

User Interface Onboarding Process and Main Screens

Interactive InVision Prototype

User Testing

After creating our mid-fidelity prototype, I continued with my sprint and led my team in conducting our user testing in-person, as well as online through a platform called usertesting.com.

For the in-person testing we made a second trip to the Palo Alto Veterans Affairs and tested our new redesigned app with the veterans we met there. Gathering feedback and insights from our target user was crucial in making the necessary adjustments to the final prototype.

For the online testing, we could not find veterans in specific on usertesting.com so we created a scenario for the tester to imagine they were in.

Given Scenario: Imagine that you are a veteran and you need to make a call to Veterans Affairs with the feeling that you want to reach a customer service representative as quickly as possible without having to listen to a long voice menu or wait on hold.

What Users Liked
  • Buttons are easy to click
  • Bigger text option is a plus
  • Navigation of app is done well
  • Very clear, simple, and easy to read
What Needs To Be Fixed
  • More menu prompts
  • Onboarding / Tutorial
  • Potential map of office locations
  • Homepage option needed in menu
Iteration

After incorporating the feedback from our user testing, we created our final prototype with high-fidelity screens and a revamped interactive prototype.

Final User Interface Design Flow

Final User Interface Onboarding Process

Final User Interface Main Screens

Final User Interface Call Back Feature

Final User Interface Menu Options

Final Interactive InVision Prototype

Style Guide

Final Style Guide For Aybell Redesign

Reflection & Takeaways
A New Career Path

This was my first ever experience in the design world; I worked on this project during my first semester in my student run design consultancy, Berkeley Innovation. This project is what made me excited to pursue a career as a ux designer. I had just switched from pursuing software engineering to now pursuing design during my sophomore year and I was unsure if it was the right fit for me. Growing up I always wanted to be able to help people whenever I could and as a ux designer I would get to do that everyday. After, doing this project I quickly realized how much I loved solving real world problems using the human-centered design process.

Getting My Feet Wet

Looking back on the project I learned that you can quickly pick up the skills and abilities necessary to do such a project even if it is your first time doing so, such was the case for myself. Through this real world experience, I was able to build the foundation for future consulting projects that would help impact the lives of real people.

Pivoting

A major takeaway I learned from this project is that people change their minds and you have to learn to roll with it. These type of shifts happen in the workplace and it requires you to learn to how deal with unexpected circumstances and re-frame the situation. When the founders of Aybell changed our target user halfway through our timeline my team and I had to quickly adept and pivot to make sure our work so far was not wasted. By using the research we gathered from the veterans, as well as our previous research, we were able to help redesign Aybell's app into not just an app accessible by veterans, but also allowed for the Aybell team to translate the app into a product for the daily student or working professional.