Katarina Blind

Navigation Overhaul

Pillar is a business suite for online content creators. This project rethinks navigation to help creators understand and use the product better.

Role

Design lead (product design, information architecture, user research, QA)

Team

UI designer, engineer, co‑founders

Time

4 weeks (launched in Jul 2022)

Navigation overhaul

Role: Design lead (product design, information architecture, user research, QA)

Team: UI designer, engineer, co‑founders

Time frame: 4 weeks (launched Jul 2022)


Problem

With the old link-in-bio builder, Pillar had three separate top navigation bars and an additional drop down menu. This led to confusion and meant that users didn't see, understand and use the entire product. This meant that they weren't able to utilize Pillar's core functionalities that move it way beyond just a link-in-bio.

We also worked on changing the builder to feature a live preview for which the current navigation wouldn't work anymore. And as Pillar is constantly moving and growing, they will also add or highlight different features in the future which isn't possible with the currently limiting navigation.

Hypothesis

We believe that updating Pillar's complex navigation navigation to a single sidebar with secondary top navigation will increase retention, app activity (especially for other product areas), and reduce confusion, especially for new users.

It will also set up Pillar well for future product updates.

Impact

The navigation update improved retention and increased page activity on for Pillar's other features. We also talked to a variety of users which showed that they were able to understand the product better.

Key learnings
  • Startup environment: creating adaptable solutions

  • Communication: understanding the right amount of async and sync communication

  • Product overview: truly understanding the entire product and potential future developments


Understanding the problem

We had usage data and power user interviews to roughly guide this project. Both quantitative and qualitative data helped up understand the general issue and justify the project.

This project was also time sensitive as we were working on a new website builder at the same time which wouldn't fit with the current navigation stucture. There also were a number of future iniatives mapped out that wouldn't be discoverable enough with the current structure. The design dept had built up to be a bottleneck so rethinking what lives were was essential.

Documenting the current navigation

I started by creating the information architecture to Pillar's navigation structure and adding notes. These were from my hiring process and discussions I had with the CEO regarding the main product areas.

I also created a low-fidelity prototype of the current navigation to understand it better and show the difference later.

Restructuring the navigation

After asynchronously checking if the site map was correct, I applied my design thinking to the structure. I grouped page titles to be more cohesive and documented feature priorities and actions.

I presented the new structure it in our weekly design critique and received positive feedback as well as approval to continue.

Visualizing the new structure

I then proceeded to roughly visualize the navigation and created another low-fidelity prototype. This didn't focus on the visual design though as we had a UI designer in our team.

I presented these again and also later asked for opinions asynchronously as I explored further.

Preparing for implementation

After receiving approval on the UX, I handed of my design to the UI designer. While they were working on the visual designs, I was available asynchronously for any questions. In design critiques, I proceeded to give more feedback and answered questions for the engineer.

Since everyone was at their workload capacity, I assisted the handoff between the UI designer and engineer. To ensure this process would be smoother in the future, I created a new Figma file structure with state management and explanations all stakeholders would easily understand.

Impact

Since the navigation update was launched with the new page builder, it's difficult to pinpoint what impact exactly came from this project. However, the launch drastically improved retention and increased page activity (I unfortunately can't mention numbers) on for Pillar's other features.

We also continued monitoring account creations through recorded sessions or interacting directly with users. The sentiment towards the product completely shifted, as user didn't show signs of confusion anymore and interacted notably more with other product areas.

Key learnings
  • Startup environment: creating adaptable solutions

  • Communication: understanding the right amount of async and sync communication

  • Product overview: truly understanding the entire product and potential future developments