Redesign Mobile Experience for Vertical Search Engines

Graphiq has 22 vertical search engines covering a wide range of topics—from electronics to pets, schools, software, and more. That was how Graphiq started as a company. We use a centralized template to generate pages for all those verticals and make regular updates to this system.

Last year, we decided to redesign the mobile screens for our vertical search engines to improve the user engagement metrics and roll out our new card design language.

Background

Graphiq started out in 2009 when people were struggling to make their websites responsive, and the mobile-first design concept was yet to exist. We completed quite a few mobile improvement sprints, but the poor mobile experience was still a legacy we bear.

The mobile page design before this sprint:

Baseline

At that time compared to desktop, on mobile we saw:
Therefore, the goal for the sprint was to:
  1. Increasing filter rate, click through rate, and time on page on mobile
  2. Improve the overall design and aesthetics of the page on mobile

Designs and Prototypes

With the new design, we wanted to simplify the interface, adopt card design, and focus only on two core interactions: filtering and clicking through to see the details.

Here are a few mocks created before we implement the new design:

Mockups
Mockups

An interactive prototype built with Framer.js:

 

A/B Testing

Discussed within the team, we consolidated all the designs into three variations:

A/B Test Variations

 

Then, we ran two rounds of A/B testing across five domains:
  1. A/B test the first one of the three new versions against the old version and see if it improved the metrics.
  2. When we saw positive impacts, we then tested amongst the three variations.

Test Result

We moved forward with the first variation which brought:

Others Tests

Testing is a core part of Graphiq design. We keep a brief record of all the tests we ran on a Tumblr blog. It’s not as organized as it’s mainly a internal knowledge-sharing platform, but if you are interested in our day-to-day user tests, check it out →

twitter github envelope file dribbble medium close menu