Mobile Compare Page: Bring the table to the phone
The Project:
The goal of the project was to take our current comparison table and make it mobile friendly. The MVP had been to take a 5 column desktop based table and put it into the mobile pages. This resulted in our users having to scroll left/right and zoom in in order to read the table.
My Role:
For this project I had the responsibilities of a UX Researcher, Project Manager, and Experience Designer.
The Process:
We gathered a core group for an ideation session that I led. This session included key stakeholders, engineers, designers and product managers. Everyone walked through the current experience, did competitor analysis and brainstormed parts of the experience that would work for our needs.
UX Prototyping and Testing:
After the ideation session I went through every section that was in the comparison table and evaluated if it was needed and based on our previous user research the order that the sections should be (based on importance to the user). Multiple layouts for each section were wireframed out and then for consistency’s sake, a stacked approach was taken for each section.
The wireframes were then tested with users to confirm they would be able to compare items in a stacked table versus a side scrolling experience. The user testing came back mostly positive and then the UI designer fleshed out the colors and layout. This was the first layout to use our new design system and it showed us some holes in the design kit.
Prototype used for Usability testing: https://lq7go2.axshare.com
Some Design Explorations of the header area
Options for screen shots on mobile
Final Mocks
The original layout was targeting the mobile experience, so we then had to adapt the desktop view so that the page could be built responsively.
Testing/Results
The design was A/B tested and we saw an increase in time spent on page as well as an increase in conversion (defined as our users clicking on the ‘Visit Website’ button and going to the vendor’s site).
Final Results
Conversion rate: +15% desktop / + 18% mobile
Revenue/Session: +11% across devices
Bounce rate: -22% desktop / -43% mobile
Time on site: +23% desktop / +45% mobile
Pages/Session: +14% desktop / + 21% mobile