Katarina Blind

Navigation overhaul

This project was part of my internship at Pillar — a business suite for online content creators combining a link-in-bio, media kit and brand deal opportunities.
It rethinks navigation to help creators understand and use the product better.

Time

4 weeks (Jun - Jul 2022)

Team

UI designer, Engineer, Co‑founders

Tools

FigJam, Figma, Notion

Role

Research, information architecture, UX, Handoff, QA

Navigation overhaul

Time frame: 4 weeks (Jun - Jul 2022)

Team:> UI designer, Engineer, Co‑founders

Tools: FigJam, Figma, Notion

Responsibilities: Research, information architecture, UX, Handoff, QA

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.

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

Measuring success

We aimed to improve the overall retention rate and increase app-activity, especially for features besides the link-in-bio. We also want (new) users to understand the product better and avoid confusion.

Solution

We created a sidebar with a secondary top navigation and a small drop down for settings. This modular approach allows for the navigation to adapt to new features or changing priorities.

The navigation update improved retention and increased page activity on for Pillar's other features. We also monitored the social media response and 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

information architecture

I started by documenting 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.

UX thinking

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.

Wireframing

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.

Handoff and QA

After receiving approval on the UX, I handed of my design to the UI designer. While he was 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 UX engineer.

In the end, I conducted design QA on the visuals, assisted the UI designer in handing off his work to the UX engineer and tested the implementation.