Mobile Friendly Experience
Mobile Friendly Experience
Challenge
In 2013, it was clear that mobile commerce was growing very quickly. The Moonpig user behaviour data supported this.
At the time it was possible to make a purchase on the website with a mobile but it wasn’t intuitive and some of the features were not available. This meant that the conversion rate was very poor compared to the desktop computer. If Moonpig did not act soon it would start to lose a lot of custom.
The main challenges to overcome were:
- What will a mobile experience look like?
- What are the technical constraints?
- Define an order to deliver the new experience (there were competing projects too)?
Actions
As the Lead UX Designer, I worked with the Product/Technical Director to create a mobile-friendly experience for the users. To enable the transformation, Moonpig needed to rewrite the entire user interface of the website. I identified the core user journey for purchasing a product which became the roadmap for the initiative.
Collaborating with the Product, Engineering and Commercial stakeholders we established a strategy to deliver the experience by systematically, redesigning and delivering each stage of the journey. Starting the delivery from the home view, where the majority of the traffic is, and work towards the confirmation view. This meant the user would receive a progressively better experience.
I created a design framework for the new adaptive* user interface. The framework focuses users a single task in each view, which added more steps in some instances, but reduced confusion.
When applying the framework to each stage, I led the user research, design and validation of ideas through various testing methods, both qualitative and quantitative. The big challenges here were:
- Navigation
- created a global navigation system, in the form of a menu, to replace the list of categories only available on the home view
- Customisation
- replaced a Flash-based customisation tool with a HTML equivalent
- Basket - redesigned the layout to enable users to review their items on a small screen
I also insisted on implementing event tracking to create detailed funnels. This enabled us to identify the user behaviour and understand the impact of the changes.
Outcome
The outcome was an end-to-end mobile experience that converted significantly better than the non-mobile friendly experience. Each stage was released as soon as it was completed.
This chart shows the progressive increase in the proportion of mobile and tablet orders from the initial release.
The phased method in which the initiative was delivered provided three additional benefits:
- The user continually gets a better experience
- The team had more user data to inform the rest of the development (thanks to the improved tracking)
- The business was strengthened with a growing mobile conversion rate
* Due to technical constraints it was not possible to use a responsive solution where one design layout could flex for all devices. An adaptive solution is where the users device type is detected and served a suitable layout.