Return results for search query
Give an old product a face-left and improve usability
UX / UI Designer, Visual Designer
Executives, product managers, & developers
A NEW WAY TO SEARCH
Oh, how I have been itching to recreate this most crucial part of the carvana.com experience! Times change quickly and the quick fixes to the search experience became increasingly taxing to the user's experience, to support, and to the speed of the page. Redesigning this section was a daunting task, but one I was very very excited to work on!
The results of the redesign included less cars returned for each query, more vehicle detail page views, and more engagement with our save search product. Let me show you the old one and then we will move forward with the process of starting from scratch for a new "find my car" experience.
RESEARCH & DEFINE THE GOAL
As you can tell, the old interface looks dated and cluttered. It was increasingly difficult for our customers to find the car that they wanted and we wanted to add some innovative elements to help our customers find their perfect match even faster. We set out to perform research on the current experience to really identify those pain points in the design. We looked at other search interfaces within and outside of the auto industry. We studied up on best practices for search results, and took a few of those suggestions with a grain of salt. From their, we defined clear problem statements and then goals that engineering, design and the business could get behind.
SKETCH & WIREFRAME
For this project, we decided to go mobile first, which turned out to be the right choice due to the complexity of this redesign and the need to quickly move through our layout and flow options. In the above wireframe you can see 3 separate options for different ideas that we wanted to quickly explore. Bits and pieces of each were used in the final design. We came to a general agreement of what we wanted to move forward with at this stage and that saved us a lot of time as we expanded the design out to tablet and desktop designs.
HIGH FIDELITY & PROTOTYPING
Next step is to apply the branding and UI to the final low fidelity wireframes. Nothing is ever perfect and changes occur throughout the process but this is where most of the final details are ironed out. Then I'll create prototypes in InVision. It's important to make sure everyone is on board in the step before this one, but I find that this stage is the one that most people connect with and truly analyze.
PRESENTATION & TESTING
Now on to tablet and desktop for a fully responsive design. I created various InVision prototypes for user testing and for presentation to engineering, product and the executive team. These help to choose between different solutions and to help communicate the design to my team. We primarily used usertesting.com to test the iterations.
PRODUCTION & QA
Finally, I continued to work with the engineering team to see the design to fruition through clear communication and support. Once the team handed it over to QA, I helped identify some of the minor CSS flaws.