x-out

Luvo Search and Sitemap

Luvo is an online student-to-student study material marketplace where I work full-time as a UX designer. Luvo worked with an SEO consultant to up its SEO game, driving the need for several new pages types and features. Planning out these new pages took us in interesting directions – see the evolution below.

Mapping Out the Sitemap

After understanding the kinds of pages we would need – new subject pages, school pages, subject-school-specfic pages, subject-specific tutoring pages, and more – I mapped out a sitemap so that I, the product team, and development team could get a better handle on the direction and scope of the project.

Sitemap – Luvo Content Tree

Sketching and Discovery

When I started sketching concepts for these pages and really thinking about how this would work coherently, I realized that to do this right, we would really need a complete overhaul to how search worked on Luvo. This was especially clear after I did further research into other successful ecommerce platforms with structures like the ones we were proposing.

I pitched the project and development leads on the need to include a search overhaul, and what that would roughly look like, while using my research to support the proposal. It was agreed that it was the right direction, so we worked to integrate new search features into the design.

Sketch of a Subject Page


Luvo subject page sketch

Sketch of the Tutoring Landing Page


Luvo tutoring landing page sketch

Sketch of a New Search Bar


Search bar sketch

Wireframing

With the search overhaul being a complicated featured, having five main behavior variations depending on the page type, it made sense to wireframe the possible scenarios using Balsamiq and go through the proposed rules with the product and dev teams.

Wireframe of Search on the Marketplace Homepage


Bobby Klucevsek

Wireframe of Search on a Subject/School Page


Bobby Klucevsek

Click-mapping

After feedback and a clear direction, I went to work on high-fidelity mockups. Before finalizing designs however, even though time was tight, I wanted to get the new search bar in front of at least a few users and test some of the UI variations I had in mind.

I uploaded mockups to a click-mapping tool called Usaura and created tests that compared different UI versions of the search bar, then pulled it up on an iPad and got out to Faneuil Hall to find some users. I asked people to tap where they would go to conduct a search, and compared the time it took for them to do so against industry-standard search bars like Amazon and Home Depot. No user was exposed to more than one Luvo design, to eliminate some variables (users knowing where to click after seeing the first design).

This Amazon search design acted as a "control" to compare our variables against.


Clickmap - Amazon

This Home Depot search design also acted as another "control".


Clickmap - Home Depot

Luvo search design 1.
We favored this design at first, but it became clear that this wasn't working.


Clickmap - Luvo search design 1

Luvo search design 2.
This was the clear winner over other designs – users found it much quicker.

(Note: Since this was the first page in its test, users were more confused than on the control pages, which came after.
Keeping this in mind, we concluded that the average click time was more like 2 seconds.)

Clickmap - Luvo search design 2

High-Fidelity Mockups

After the iterations above, I finalized high-fidelity mockups through Sketch. Below are just a few samples.

Luvo Marketplace Homepage (not the site's main homepage)

(Note: Number of product tiles reduced for image size.)

Luvo marketplace homepage - high-fidelity mockups

Marketplace Subject Page and Search Bar


Luvo marketplace subject page and search bar - high-fidelity mockups

Luvo Marketplace Subject School Page

(Note: Number of product tiles reduced for image size.)

Luvo marketplace subject school page - high-fidelity mockups

Clickable Prototypes and Documentation

As always, I delivered the mockups to the devlopment team via clickable prototypes in InVision, with embedded comments and extensive documentation in Confluence. I also sat down with the product team and developers working the project and do a final walk-through.

Clickable Prototype of Search on a Marketplace Product Page
Created in Sketch and made Clickable InVision.


Luvo marketplace homepage - high-fidelity mockups