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.
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:
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:
An interactive prototype built with Framer.js:
Discussed within the team, we consolidated all the designs into three variations:
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 →