Mobile Website Improvement On Android
FEELUNIQUE
Timeline: 4 weeks
WHAT IS FEELUNIQUE?
Online beauty products retailer, ranging from perfume and make-up to hair and body care among many others.
KEY PROJECT GOAL
The goal of this project was to improve the mobile website experience to increase repeat traffic, basket size, and conversion rate.
MY RESPONSIBILITIES
Research
Analysis
Experience design
A/B testing
THE PROBLEM
Shortly after I joined the team, the newly hired head of UX noticed the mobile website had a lot of issues on his Android smartphone and gave me the task of reviewing the overall usability of the website.
WHAT I DID
I was the sole person working on this project, however, I collaborated with the mobile website front-end developer in the initial phase, to discuss and negotiate the changes for the minor bugs I discovered and potential improvements I envisioned, of which he ended up fixing and implementing.
RESEARCH & ANALYSIS
I did all the research and analysis for everything involving ecommerce conversion funnel, along with persona, competitors and the current state of the website.
CONCEPTUALIZING
After my analysis I began to make informed decisions about the solutions to the problems I identified and sketched up design concepts.
TESTING & LEARNING
I implemented the designs and tested them with an A/B testing tool and analysed the results.
REMOTE TEAM
Working across 2 different teams. I was based in London where the team was dedicated to the desktop website, but due to being put in charge of the mobile website project, I had to work closely with the Jersey Island team which was working on the mobile website. Our communication was mostly remote, however, in the period of 6 months, I travelled there 3 times.
DISCOVERING A PROBLEM WITH WEBSITE ON ANDROID DEVICES
Analytics revealed that there were more people completing purchases on the mobile website (56%) than on the desktop one (42%) and that there were more people accessing the mobile website with an Android phone, however, more people were completing purchases on an iPhone.
DISCOVERING MAIN PAGE DROP-OFFS
The analytics had also revealed that the main mobile website page drop-offs were the search page at 50%, hair department at 33% and the product page at 30%. This report showed me that there was a big opportunity to improve the mobile website for Android smartphone users.
CAPTURING ISSUES IN THE TOP 3 PROBLEMATIC AREAS
I performed a heuristic analysis of the mobile website on both iPhone and Android smartphones and captured all the problems I identified, especially focusing on the 3 more problematic areas revealed in the analytics report, and found mostly usability interaction issues and lack of best practices.
Mobile website heuristic analysis - problem area inventory
HOW COMPETITORS APPROACH THE USER JOURNEY
I compared the top competitors’ mobile experiences and created a pros and cons list of each one’s conversion funnel friction and gain points. Besides a few minor differences, the 4 experiences were pretty similar. This helped me in verifying there wasn’t anything I could be overlooking.
EMPATHIZING WITH THE MOBILE USING PERSONA
This persona helped me focus on not only how a woman uses her smartphone but what she would expect from an online beauty retailer. It helped me empathize with what little time women often have to dedicate to themselves and add a little pampering to their lives due to their jobs and family life.
DECIDING WHAT TO FOCUS ON FIRST
I chose the main navigation menu as my first issue to solve because it had problematic functionalities like the sub-item list would never expand and always take the users to the category page. Solving this would have a big impact on the usability and it was also easy to build.
Opportunity assessment prioritization
SKETCHING OUT THE SOLUTION USING WIREFRAMES
I created simple wireframes to test out the concept visually before making the changes to the interface. I divided the link and expanding actions where the label of the button would link to the main category and the icon at the end of the menu item would expand the sub-categories for that item.
BUILDING AND RUNNING THE A/B TEST
I built the A/B test using a tool called Maxymiserand the objective was to divide the website traffic so that 50% would be shown the original version and the other 50% the test version to see which one would perform better. The test ran for 2 weeks in which I tracked the progress.
CLICK-THROUGH TO DEPARTMENT
The results showed that click-through to department pages increased by 100% and there was less interaction with the search, which made me believe that with the previous navigation, users couldn’t really find what they were looking for, thus using the search more.
PAGE VIEWS
Product page views were also up by 3% however there was still a leak between department pages and checkout, which could be due to sloppy carousel functionalities: content jumping up and down depending on the size of the image in the slide along with horizontal and vertical scroll conflicts.
KEY TAKEAWAYS
WORKING WITH REMOTE TEAMS
When working remotely, it’s important to communicate often and consult team members for insightful input in order to design something relevant.
THE IMPORTANCE OF MOBILE
It was a rude awakening for the company to see that their most-used mobile device had the least conversions and start to appreciate it more.
THE VALUE OF A/B TESTING
I felt more committed and with a higher sense of investment by building the tests and analysing the results myself, which hadn’t been the case in previous roles.
THE IMPORTANCE OF ANALYTICS
Having access to the analytics of a website is like having a crystal ball, it is a vital tool that allowed me to discover that there were problems and allowed me to fix them.
HEURISTIC ANALYSIS
This type of analysis is important to refine the user experience, to reveal the friction and figure out how to optimize the end-to-end usage of the product.
GOOD RESULTS DUE TO INFORMED DECISIONS
It is important to resist the temptation to make assumptions when conceptualizing design solutions and always make informed decisions about your designs.
