DEFINING THE SITE REDESIGN

Context

Liftoff is a platform that helps people drive traffic and retain users to their mobile apps. They see hundreds of potential clients coming to them with business inquiries. The clients wanted to position Liftoff as a talent leader and a knowledge hub.

While I give an overview of how I worked with a great team of UX’ers to make user journeys, site maps, and wireframes, I want to focus on the resource library work as I claimed ownership of that feature.

Defining our Design Pillars

At the beginning of any project it's important to align on the higher level goals for this work.

Attract Informed Users

It was important for the client to prioritize users that had insight into how Liftoff could assist them.

Reassess Resource Navigation

The team wanted to look at the existing site architecture to make sure it supported this new goal.

Alter Liftoff's Value Prop

Liftoff wanted to shift their image to being a platform for thought leadership. The redesign should support this.

ORGANIZING THE EXISTING CONTENT

Designing For Personas

Liftoff loved the idea of creating user archetypes that fit their primary user bases. We had the idea to organize Liftoff’s new site and huge resource library through these filters so users get quick access to content that was useful to their needs. To begin with this organization exercise, we had to figure out how their content was structured already.

Original sitemap
Their original sitemap. Very segmented and unintuitive
Updated sitemap
Our proposed restructure

Creating Webpage Templates

With the archetypes defined, we created templates for the new site page designs. These allowed us to create a modular design system with clear functions.

Deck slide showing what pages can be templatized
Presentation deck slide showing pages to be templatized
Updated sitemap with the proposed templatized pages
Showing how the template pages sit within the new structure

DESIGNING THE PAGES

Developing The Resource Library

The wireframing process was a lengthy back-and-forth between the XD team, the visual design team, the engineering team, and the clients. While we didn’t start with the resource library, I’ll mainly be focusing on the resource library. I owned this feature and can gladly discuss the other aspects upon request!

Animated image of the current resource library in action
Demonstration of the robust sorting feature on the live site

Working In Sprints

We set out to design all of the templates in 3 big sprints. Earlier sprints would focus on more complex, unique pages, and later ones would be more modular templates.

Initial designs of the resource library
Slide used during client presentation to help align teams and clients on goals and needs of all pages

Working With Other Teams

Designing Collaboratively

To improve our documentation process, I set up a Figma workstream that allowed us to create separate components quickly. This approach also let us approach the creation of all the pages systematically after we built the component library, leading to a smoother workflow. It also helped the visual design team monitor our progress.

Example of the modular design system I made in Figma
Modular Figma auto layout in action!
Sourcing Content

Sourcing the content for the resource library and other pages while still designing would prove a challenge. We pushed for a content sourcing and tagging exercise to ensure all the content was correctly marked with the new tags.

This meant working in parallel with the engineers from the get-go to ensure they had time to set up their pipeline for this and help tackle some of that work for us.

Progress tracker, made in google sheets
Design progress tracker
Content sourcing google sheet
Excel sheet that tracked where pages were sourced

Iteration of Design

The resource library saw plenty of revisions during all 3 sprints. It took us a couple of tries to land on defined features for the page that remained true to the initial design pillars, but I’m thrilled with what we created in the end!

2nd round of lo-fi designs of the resource library
Temporarily removed the tag exploration feature
3rd round lo-fi designs of the resource library
Added the filtering tag feature back in a more effective way
Showcasing the various states of the resource library in lo-fi wireframes
Exploring different states of the page

REFLECTING ON LIFTOFF

In Summary

Overall, I’m pleased with the final product we delivered. There were a few hiccups regarding how we would collect all these pages in a way that everyone could work from. Regardless, we did a great job of reacting quickly to new client asks and organizational bumps.

I’m super happy to say this site is fully launched! I’m happy with the functionality of the resource library. This page was a constant back and forth, and I kept coming back to make changes across all 3 sprints. I’m pretty glad the final design stayed true to the wires I created! Going forward, this project taught me much about communicating across teams.

I'm always happy to share more about this project upon request.

The Team

Gene Lu
UX Design Lead
Mark Malazarte
Senior UX Designer
Andre Ribeiro
Visual Design Creative Director
Ola Pecko
Visual Design Creative Director
Nick Rhodes
Producer
Eric Estes
Tech Lead