Fat Straws: Online Ordering Process

This was roughly a 2 month project that I started during my time in the User Experience program at the University of North Texas.

The goal of this project was to re-design and improve the mobile experience of online ordering of a local business. The team consisted of myself for the designing process and about twelve peers in the program for feedback and criticisms.

User Experience Designer - User Researcher - Wireframing - Prototyping - Testing - Visual Design - Pitching

The mobile site was overall very cluttered with excessive photos, words and colors. This makes the site difficult to navigate and overwhelming.

This can be a huge problem for the business as it can turn away users who aren't willing to navigate through a frustrating experience. This leads to the user either abandoning the cart or the website altogether - negatively impacting the business's brand, sales numbers and returning customers rate.

To find a solution to our problem, I defined the main goals for the project and prioritized the top three goals based on importance:

• Reduce the cognitive load to allow users to find exactly what they are looking for without the clutter

• Restructure the information architecture of the online ordering page to create a smooth and appealing experience for users to shop

• Increase business sales by upselling products during the check-out process

User Persona & User Journey Map

The first step I took was to create the user persona and user journey map in Figma to better identify pain points in the mobile ordering experience and empathize with the users. In doing so, I was able to begin brainstorming about different features as solutions for each pain point identified.

(See Opportunities section below the User Journey Map)

Wireframes & A/B Testing

I conducted multiple competitor analyses with Dunkin' Donuts and Starbucks, which helped me solidify the "Home" and "Locations" wireframes, as they seemed to be the most optimal.

I completed the wire-framing process in Figma and conducted an A/B Test with my UX cohort at the University of North Texas for the "Order Online" wireframes. Wireframe A received 8 votes, winning the majority vs. Wireframe B with 4 votes.

New Locations Page

Interactive Map and "Find a Store" feature

Decluttered of excessive photos and colors

"Drive Thru" and "Online Ordering" icons

Horizontal scrolling feature for each section of the menu to break up the original long, repetitive vertical scrolling throughout the entire menu.

Eliminated unnecessary text and photos to reduce the user's cognitive load

"Allergen" icons in each section

One-click Add to Cart feature

My Cart Page

Upsell section with a one-click Add to Cart to encourage users to purchase more

Visuals of each product to "see" what is in the user's shopping cart to emulate a real shopping experience

Prototype of the Re-Design

The biggest takeaways from this project were:

Too much information can be as detrimental to an experience as too little information

Heuristic evaluations and user journey maps are great tools to pinpointing pain points from a consumer's perspective

How to take constructive criticism from my peers/team in order to make better design decisions for the project as a whole

Improvements

If I could do anything differently, I would be more mindful of placing the price of the items in their respective sections so that the user would not have to add the item to the cart in order to see the price.