BEEP MOBILE APP

A mobile application that allows customers to check out items on their mobile phones, thereby eliminating long lines.

CLASS - INNOVATION IN INFORMATION SYSTEMS

UI/UX Design

UX Research

Keynote

Invision

beep-cover-16-9-white

01  /  PROBLEM

Lines at university stores and eateries are too long, demotivating students from purchasing items, thereby, causing a decrease in overall sales. 

As typical students on a college campus that are under stress and time pressure and are always in need of an energy boost, we recognized that a common problem at campus eateries and stores was long lines. This is especially the case when students are trying to purchase something during peak times in between class periods. Long lines can easily demotivating students from purchasing items, thereby, causing a decrease in overall sales. In order to validate that this was an actual problem worth solving and not an issue something that only we struggled with, we, as a team, surveyed 52 university students to better understand their pain points and validate our hypotheses that long lines demotivate people from shopping.

chart2
chart1
long-line-compressed

02  /  USER FLOW AND LOFI'S

Before moving into high-fidelity wireframes, we to envision what the user's journey would look like so we make sure we understand the user and our functionality satisfies their high-priority needs.  
user-flow
lofi-3
lofi-6
lofi-4
lofi-1
lofi-2
lofi-7

03  /  THINKING ALOUD

We engaged in think-aloud exercises and used user-testing heuristics with our users in order to see whether our app was intuitive and useful. We also constantly sought to validate that students would find our app helpful in their daily purchasing routines.
script1-cropped
script2-cropped

04  /  USER STUDY RESULTS

By repeating the user testing process above two more times, we were able to garner great insight on how to make our user experience less confusing and more intuitive. 

Our users really liked the app concept and told us that they would likely use it. They also like the simplicity and consistency in the user interface. However, they did mention that instructions in the beginning could've been useful. They were also able to point out a couple buttons we didn't know were confusing or ambiguous. 

What should the users see first?

Since users would likely open this app when they are about to scan items at a store, we thought that the first thing they saw should be a button prompting them to scan at the nearest store, "Entropy." After user testing, we discovered that the button was more confusing than helpful, so we added the distance and a "purchase at" action verb to the button. In the end, we wanted to add a pre-order functionality that allows users to pre-order items for pickup, especially useful if they are between classes. Therefore, we switch the orange button to a switch button, letting users switch between a scan mode and a pickup mode. 

home-iter-white
One-click payment or not?

Our top priority was speed and clarity for the payment process. However, we were also worried that users would want separate screens to look over their cart and to choose a payment method. Therefore, our first iteration of the payment process lacked clarity and visual hierarchy. 

payment-iter-white

After much user testing, we kept the payment process fixed to one screen so that a one-click payment would be more straightforward. Users can still change their payment methods, in which case a modal window would pop up instead of a separate screen. Furthermore, we added the ability to favorite items so that users can quickly add them to their cart when they are pre-ordering for pickup later on.  

payment-method-white
"But won't people just steal stuff?"

By talking with potential users, our Deloitte mentor, and our peers, many were concerned that people would just pretend to scan items and then leave the store with unpaid items. Since this is definitely a concern for university stores, our key stakeholder, we sought to address it in the most time-efficient way. 
Our solution simply requires an employee to stand by the exit and scan a QR code, generated on the customer's phone, and the items that were purchased would pop up on the employee's phone. Similar to what Costco does, the employee would quickly check that the list matches the items that the customer is leaving the store with, which is most definitely faster than individually scanning and checking out every customer. Lastly, we set up a geofence that sends a notification to the user if he or she has left the store without paying. If they haven't paid, they wouldn't be able to make their next purchase. 

securityvid

05  /  VISUAL IDENTITY

Overall, I aimed for a font that looked modern and clean that doesn't distract from the user experience. And I chose colors that are often associated with food and snacks (warm tones).
visual-identity-1

05  /  FINAL DELIVERABLES

Overall, I aimed for a font that looked modern and clean that doesn't distract from the user experience. And I chose colors that are often associated with food and snacks (warm tones).
hi-fi-user-flow

06  /  RESULTS

In our last user tests, we concluded our prototype with a SUS score (System Usability Scale) of 76%, meaning that the usability of our app is above average.
team-photo

Try the Invision Prototype below.