Updating the SaaS navigation to fit with new product evolutions

The context

A new navigation to host new features

Plato is a mentorship platform that connects together engineering managers and product managers who want to grow in their careers. They provide a marketplace where mentees can book 1:1 calls with mentors from prestigious tech companies, as well as a SaaS tool where mentees and mentors can schedule/reschedule calls, see details of their activity & performances on the platform and take notes / write insights during and after calls. Lastly, executive sponsors from Plato's customers can check the progress of their employees on a dedicated dashboard with graphs and insights.

All these customer personas and use cases create quite a lot of complexity on the Plato webapp. And the navigation of the product was making things worse. I've been working for Plato since October 2020 as a part-time product manager and UX designer. Early on, I've identified the complex navigation as one of the reasons why some Plato users only give a 7/10 or 8/10 instead of a 10/10 in Net Promoter Score surveys.

The process

Identifying the issues caused by the navigation

Here was the Plato navigation until January 2021 (when the navigation revamp was finally introduced after this project);

The first step in this process was to do a diagnosis of the problems caused by the navigation. To do so, I did a diagram showing the current architecture of the webapp and listed the associated problems caused by this architecture: 

Next, I listed some solutions and a quick benchmark. We knew we wanted to keep a horizontal bar for the navigation menu to not break the layout of the entire app, so I looked for inspirations in B2B products with a horizontal navigation menu.

Exploring several ideas on Figma

The next step was to deep dive into the ideas I had identified through my initial diagnosis, through a Figma prototype. I came up with dozens of mockups illustrating my ideas; here is a sneak peek into some of them.

First, a dashboard to replace the home page of the app which was "Future sessions", a list of the next sessions of the user.

Then, a new "Mentors" page dedicated to logged in users, where they can see their current and past mentors. 

This is a revamp of the "Future sessions" page, where we would merge all type of sessions, whether they be individual or group sessions, and we would only show "Future" sessions, not "Auto-renewing" sessions, which made the structure of the page quite complex to get for the average user.

The result

Selecting the ideas that could fit with the development bandwidth

After iterating several times on the prototype, we realized with Plato's CPO and Head of Engineering that the proposed ideas weren't all realistic from a technical point of view. For instance, we had to drop the idea of a dashboard as a homepage of the app because it implied too much development versus what Plato could invest into this project. So my role as a product manager and UX designer was to cut into the initial prototype and only keep what was technically feasible.

Here are the final screens we kept and integrated into the development roadmap (these reflect what then went live in production):

A new "Schedule" screen (still the homepage of the app) that now only shows "Future" and "Past" sessions, not "Availabilities" (moved to the settings) and "Circles" (merged with the "1:1 meetings): The page now offers a better focus, with the information being as much as possible grouped and prioritized.

The "Mentee progress" section, a new feature that I designed for Plato, to help mentees track their progress on the skills they're trying to improve on, could now fit in the new navigation menu. Before this navigation revamp, there wasn't an obvious solution where to place this new feature we had been working on.

And finally, the "Workspace" section had been redesigned with a new layout that was respecting the "12 column" grid. Before that, it was taking the full width of the page, which prevented it from respecting the same layout as the other pages (h1 title and description for instance).

It's great to have Lucas on board to step up our product quality, he's senior and independent. Giving him a problem to solve, we know that it will be turned into actionable and good-looking interfaces within days
Jean-Baptiste Coger
CPO @ Plato
Enjoyed this case study?
I’m always looking to work on exciting projects 🔥
Work with me