Overview
With a heavy focus on selling online through in-depth product pages, Iridium Labs became one of the top 10 supplement brands in Brazil in only 4 years. After this initial growth spur, conversions started decrease. Most of the user based accessed through mobile and didn't finish their buy.
I was tasked with designing a new version for the mobile payment interface for that could improve conversion rateAfter the UX redesign, the conversion jumped from 0.64% to 2.11%.
Let's see how it was done.

THE FINAL DESIGN WE ACHIEVED

Problem
Iridium Labs growth was exponential. Kimera, a fat loss thermogenic, became the most desired fat loss on the year of its launch. Although the product was still strong on the market, it's product page was the same since the launch four years ago. Usability, speed and navigation started to suffer as technology and changed. Sell-out started to decrease. It was then that a hard truth came:
The conversion rate for the mobile version was 0.64%, way lower than the Brazil benchmark of 1.63%. 

There was a lot of room for improvement.
Hypothesis
Even though the mobile site had a lower conversion rate, the desktop had an above average one. The problem wasn't in the product or the advertising, but the device they were using.
Statiscally we knew people start their shopping process in the phones and finish them on the desktop. Where out users doing that? We couldn't track directly the multi-device access, but there were ways that we could analyze the performance of the old page. For long we thought that the payment page had problems both visual and usability aspects. Since the desktop page was improving and doing, working on the mobile was a low priority task.
Maybe we couldn't change people behaviour, but I firmly believed that if we improved their experience, we could budge our numbers in the right direction.
Do the scrollable design compromise usability and the user experience and trust in the brand?
Do users quit the mobile payment page due difficulties on navigation?
Challenge
Our goal was to improve conversions on the mobile website without completely reestructuring their design and code. It was a project needing to be done fast and with low work-hour consumption. My role was to lead the visual and UX design. I worked alongside a Researcher, Prototyper and a Developer and a Project Manager.
Research
We didn't know exactly why our consumers didn't convert from the mobile page. Our first step was to see how they navigated. Using Hotjar and Lighthouse, our team watched recording and compared heatmaps of users on the mobile page with our sales data.
The heatmap revealed structural and navigation problems on the paument page. The first thing we noticed was: people gave up. Our researcher followed this data with a series of phone interviews with randomly selected users. Here are some highlights:
"Looks like a green blob. It was confusing. Things were over one another."
"I didn't know where to click."
"The payment form jumped back and forth when I typed."
"There are some errors in the page. I didn't trust if it was real.

Over and over again, we noticed that the user lost focus before getting to the payment. The tapping started strong at the start of the page but it lost a lot of momentum when reaching the bottom.  They had difficulties filling the form: fields were wrongly filled and sometimes people had trouble opening the field they wanted.
We concluded that the scroll was long, tiresome and the information was too densely packed.
Devices
Our team studied the Google Analytics data to see the type of user and where they came from. Brazil is a country with heavy import taxes, this translates for a different cultural use of mobile devices. Quality internet plans are very expensive, so most people avoid using data heavy apps when outside, relying more on light messaging apps like WhatsApp.
The phones themselves are very expensive, so the entry-level and mid-range models are the most widely used. Most of these phones have less screen area, making the scroll seem longer and the information more tight. We looked into the viewport resolution  stats to see how our users saw our mobile page:
OUR USERS TOP 5 RESOLUTIONS
The data we gathered corroborated with our prior heatmap behavior. Our users have less screen size than most. Although they could be coming back to the desktop version to finish their shopping, their experience of navigation was heavily compromised. 
We didn't have time to gather enough data to understand if most of our sales came from the phones with bigger screens, but with such drastic different numbers, we could test and see for ourselves.
Persona
Vick enjoys exercising before going to work. While on the bus, using Facebook she views an ad about Kimera, a fat loss supplement. She clicks the ad but the sites loads slowly, specially since she is in movement. Once she gets into, she reads most of the information and enjoys the product. After reaching the bottom of the page she decides to buy and proceeds to the payment page. Everything is packed tight and the formatting looks off and poorly made. She wanders up and down, but decides to buy later and closes the browser.
When she gets to the desktop, will she remember the url to the product page? If she Googles for it, she will be probably impacted by ads from other companies. Will she stick with Iridium Labs product or she will start searching and comparing for similar products?
Goals
Rethink the navigation on a smaller viewport resolution
Make it load extremely fast: when the users clicks on Buy, she needs to get to the cart quickly.
Reduce the clutter on the page, make more breathable and less crowded
Improve the readability and comprehension of buttons and clickable things.
Wireframe
One of the core ideas for the new mobile checkout page, was to break it down in parts. We went for a vertical scrolling page, for a step-by-step one. Since Iridium Labs isn't an ecommerce, the user has to input their data manually. Putting them to write everything down in one scroll was a burden.
Dividing the checkout process we would have two wins: One, it would bring the information clearer for the user, making him focus on each step and avoiding any missed field. Two, we could gather data from each of his steps to understand better where she was giving up from the checkout.
With the checkout proccess broken into steps we achieved another goal: make everything load faster
VISUAL DESIGN

THE "ALMOST" FINAL DESIGN

The mockup above was the first fully develop concept of the checkout process. It was made of four steps before the order confirmation. Even though the visual design was attractive. User testing showed fundamental flaws on it:
The type was too small. It was dependable on a larger screen size, away from the reality of our customers, as we would later know.
People were using the top diamond bar to try to navigate back and forth, instead of the button.
People thought that swiping changed the product quantity, when there was a button for it.
To go back a screen, you needed to swipe back and it wasn't explicit enough.

WHEN WE GOT IT.

We needed to revisit the design and make everything clearer, we took out the background image and the excessive card overlay that needed a bigger viewport.. We went with a more minimalist and white-spaced design. This breathing room on the visual was immediately felt after the first round of testing.
Since people were trying to use the diamond bar as a navigation, we chose and changed for something easier to understand and move back and forth. Words worked better than symbols.
We took the arrows away from moving between steps and used them to change the product quantity.
The button that "concluded" a step, became very distinct from the rest of the page.
Results
The new mobile checkout page was a complete success. Inside two weeks we already noticed an increased engagement with the payment page. As written earlier, the conversion jumped from 0.64% to 2.11%. Prooving that the lack of engagement was due to usability issues.
On top of that we noticed that the main breaking point in the checkout was during the credit card form, the obvious commitment step. The benefit of having the checkout page broken intp steps instead of a single page, allowed us to collect email data before the abandonment and follow the user back with a cart abandonment email sequence.
In overall, the whole new strategy increase our total sales from the mobile devices from 12% to 17% over the course of three months, already corrected by seasonality.
Credits
UX Designer: Ricardo Esteves
Developer: Cauê Queiroz
Project Manager: Tatiane Maiolini
Back to Top