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.

android_2.png

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.

analysis_white.png

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.

problem_solve_white.png

CONCEPTUALIZING

After my analysis I began to make informed decisions about the solutions to the problems I identified and sketched up design concepts.

test_learn_white.png

TESTING & LEARNING

I implemented the designs and tested them with an A/B testing tool and analysed the results.

remote_teams_2.png

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.

mobile_website_conversion_funnels.png

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.

conversion_funnel_user_journey_2.png

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

heuristic_analysis.png

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.

competitor_analysis.png

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.

persona_fu.png

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

impact_effort_matrix.png

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.

menu_navigation_wireframes.png

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.

a_b_test_implementation_2.png
100_increase.png

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.

30_increase.png

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.

I wrote a full case study about this project to go into more detail about the stakeholders, the process and the decisions I made and why I made them.

MORE PROJECTS

Content Management System Redesign -B2B

Dashboard_dark_theme_skin.png

Broadcasting Center Europe

A large redesign project of the company’s internal content management system, called MediaCMS, aimed at B2B.

Family Trip Booking Process UX Case Study

storyboard_text.png

Personal project

UX case study of an improvement to a taxi service booking process, based on a problem of a day-to-day experience that I had and set out to try and solve.