UI/UX Design
Flavorus Mobile Purchase Flow
Challenge: Streamline mobile purchase flow. Ensure important content appears before you scroll. Eliminate extra steps on checkout page.
Responsibilities: UX Direction / Design / Whiteboard / Wireframe / Research / Project Management
Solution: Eliminated friction in the purchase flow by making form elements more clear, converting select elements to steppers and making the sign in page easier for all types of customers.

I had been thinking about our mobile experience for a little while. Since going to a responsive layout in 2012, our traffic had steadily increased on mobile to 60% of our total traffic. Since we are a ticketing company, I thought the best place to start was the customer purchase flow. The four pages we focused on we're the event page, the sign in page, the checkout page and the thank you page. Each page had it's own challenges, but a common issue was minimizing the friction and getting the customer to get through the checkout process quickly.

Flavorus Mobile Purchase Flow Wireframe
There are a minimum of four steps to buying a ticket, select your ticket, sign in or guest, enter credit card and billing info and confirm/print your tickets.

For the event page, we focused on consolidating the fees on the page and switching to a steeper instead of a drop down. We still want to be upfront about our fees, something that sets us apart from our competitors, so we added some helper text to let the customer know what was included in this price. We also have a full break out of all the fees on the checkout page. Switching to a steeper in place of a drop down should save the user a couple taps when choosing how many tickets they want.

Flavorus Mobile Purchase Flow Luke W 1 Flavorus Mobile Purchase Flow Luke W 2
Checkout Luke Wroblewski's how-to videos on user experience.

When it came time to focus on the sign in page, we knew a few things from listening to our customers. First, checking out as a guest needed to be faster. Second, if the customer doesn't login with Facebook, we eliminated a step by exposing the Flavorus account login and making it more obvious. Everyone benefits (customer, client, brand) when a customer uses their Facebook login, but we don't want it to be at the detriment of all other users. To compromise, we kept the Facebook login as the first option, but exposed the Flavorus login inputs that were previously hidden. We also employed a radio group for our sign in/ sign up and guest checkout options. The larger buttons stand out better and create a large touch area.

Flavorus Mobile Purchase Flow Final
Designing for mobile is a great opportunity to remove friction and exercise restraint. We realized that we could continue this thinking beyond mobile to bring some of these changes to the desktop experience.

The checkout page was an opportunity to reduce form errors and increase checkout conversion. We focused on input types and input masks to help reduce customer error and make the checkout process simpler. We made sure the input types were set properly so the user would get the proper mobile keyboard and only input the characters we want them too. The input masks help show the customer what the correct format should look like and help reduce errors.