x-out

Luvo Homepage

Luvo is an online student-to-student study material marketplace where I work full-time as a UX designer. This is the homepage, which was redesigned in summer 2015. See the process through final designs (and beyond) below.

Ideation

Luvo needed a new homepage to meet several new demands – drive buyers to the new tutoring service while not mimimizing the legacy offerings, integrate a new brand, showcase student success stories, speak to college faculty, and more.

I set up an ideation session with the branding and executive teams. I asked everyone in the group to think of the homepage as having "sections" of contents, and to spend 5 minutes writing as many "sections" and features that they could think of on flashcards. After 5 minutes, we put every flashcard on the whiteboard and saw which features kept coming up, which felt most important when weighed against our most important audiences, which to scrap, and which to refine. We then strategically organized the features top-down to grab our most important audiences first, while redirecting certain audiences at certain points, etc.

A whiteboard sketch during ideation with the branding and executive teams.
On the left, you can see a list of critera we needed to meet.


Luvo Homepage Whiteboard Sketching

Wireframes and One-Click Testing

After some good direction from our ideation session, I quickly wireframed two designs with some key differences. I asked users to perform simple, but essential tasks while going through these wireframes. I also asked them what they would change or add to these pages, and to directly compare the two designs.

I also had conversations with top Luvo users to get their feedback.

One-click Testing Essential Tasks in Two Designs


Luvo Homepage One-click Testing

Design 1 General Feedback


Luvo Homepage Design Feedback 1

Design 2 General Feedback


Luvo Homepage Design Feedback 1

Design 1 and 2 Side-by-Side


Luvo Homepage Design Feedback Side by Side Designs


I could clearly see which elements were working and which weren't – and moved forward on the designs and features that were (much) more successful.

High-Fidelity Mockups

With a strong, informed direction through collaboration and user feedback, I created high-fidelity mockups, with web, tablet and mobile versions to help guide their responsive design. I delivered them to the development team in clickable prototype form, via InVision, along with extensive documentation and a walkthrough. Some features were tweaked after some developer feedback.

Clickable Prototype with Clarifying Comments, in Invision


Luvo Homepage Clickable Prototype

User Testing

Once I created high-fidelity, clickable prototypes, and the new homepage was developed and live, I went out to find our userbase where it lives: on college campuses. I took a laptop to Northeastern University and asked students to complete tasks on our newly designed site – with the homepage being our front door into the experience. In this case, our early research proved effective, and our users had more trouble when leaving the homepage and landing on our more legacy features and pages, such as our search results. So the product team and I took those results and focused on how we could improve those features.

Screenshot of an On-site User Testing Video Recording


Luvo Homepage User Testing Video Screenshot

Final Designs

Final desktop and mobile versions of the Luvo homepage.

Desktop


Luvo Homepage Final Design Desktop

Mobile


Luvo Homepage Final Design Mobile

A/B Testing

Even after launch, I also A/B tested homepage features for how they could improve. Below is an example of testing a simple button color on a homepage CTA –  with results showing that we could double our click-throughs with a simple change from orange to green.

The Homepage CTA


Luvo Homepage CTA for A/B Testing

The A/B Testing Results


Luvo Homepage CTA A/B Test Results