Flavorus Mobile Purchase Flow
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.
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.
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.
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.