FLIPTOP DASHBOARD REDESIGN
I led a full redesign of the Fliptop dashboard in order to solve 3 major problems we were facing with our existing one: the navigation was too complex and not scalable, we needed to give people more control over some tools, and some important features weren't discoverable and usable enough to ensure a good user experience.

SIMPLIFY THE NAVIGATION

A SYSTEM LEVEL CHANGE

THE PROBLEM

The dashboard had been built one feature at a time, as the backend was supporting new and new features, and we never considered it as a whole, to make sure all the pieces were forming a cohesive system. We kept adding more and more pages/features to it, which made the navigation inconsistent and hard to apprehend.

THE CONSTRAINTS

  • The current product lineup wasn't allowing certain features to live on their own, and we wanted the dashboard navigation to match it.
  • Redesigning the navigation meant refactoring the codebase around the new product lineup.
  • We needed to introduce a way to switch from a model to another from anywhere in the dashboard.
  • Since I was also in charge of the front-end implementation, I had limited time resources.

WHAT'S NOT WORKING WELL?

  • Some pages had up to 5 levels of navigation.
  • The content of each page was tailored to a specific audience, which makes navigating through the dashboard an inconsistent experience.
  • We wasted a lot of valuable space showing the most important content in a small frame.
DESIGN PROCESS

I explored multiple iterations and valued the pros and cons of each. The idea was to generate wireframes and prototypes whenever possible for each solution and have a few users play around with them to better understand the efficiency and tradeoffs of each option.

THE PROS

  • Feels close to the existing navigation, less of a change for our existing users.
  • The 3 products (Leads, Accounts and Opportunities) can live independently.

THE CONS

  • Limited space for the main menu. Not very scalable.
  • Takes up some vertical height, which forces scrolling on most pages.
  • Figuring out where you are in the dashboard isn't easy.

THE PROS

  • Great for recognition of the new product lineup.
  • More scalable, there's room for more products and features.

THE CONS

  • It gives too much importance to the navigation.
  • It forces the user to scroll to see all the data at once.
  • Profile dropdown looks disconnected.

THE PROS

  • The sidebar navigation structure allows for more flexibility with menu items.
  • There’s a natural flow of starting on the left side and coming to the right.

THE CONS

  • Too much emphasis on the username/account.
  • The dropdown to switch between models feels like a top level title for the page.
FINAL SOLUTION

After multiple iterations we decided to go with the following solution that's the most space efficient, that focuses on the content first and where every feature is reachable within 2 clicks, while emphasizing the new product lineup.

GIVE PEOPLE MORE CONTROL

A MUCH ANTICIPATED CHANGE

THE PROBLEM

The “Model Configuration” tool was originally used by the company's Customer Success team. As we were growing and were seeing more and more clients joining who each needed multiple models, we had to come up with a more scalable solution that would allow our users to use this tool themselves and give them the ability to create as many models as needed for their business.

THE CONSTRAINTS

  • Make an interface that presents complex data feel as delightful and readable as possible.
  • Add the ability to create nested conditions.

WHAT NEEDS TO BE CHANGED?

  • We were showing way too much information at once to the user, which was increasing the cognitive load and was confusing people a lot.
  • We needed to guide people by giving them inline recommendations.
FINAL SOLUTION

A wizard of 4 individual easy steps ended up being a good solution to help people configure their models. The tool guides the user in every step of the process, by presenting clear questions in an approachable language. Moreover, if the user adds more conditions than needed, the tool pushes some notification to alert them it might impact the efficiency of the model. Finally, showing a live count of the opportunities included in the model based on the constraints the user is setting helps them realize the effect of their changes.

IMPROVE THE USABILITY OF EACH FEATURE

STARTING WITH THE GRADE CONFIGURATION TOOL

THE PROBLEM

The relevance of the data coming from Fliptop's products is based on the scores that will be applied to the customer's database. We designed a tool that lets the user configure what scores will be included in each group so they can manage their pipeline easily at any given time.

THE CONSTRAINTS

  • The scoring system was firstly based on scores from 1 to 10, and had to move to a 1-100 scale (better level of granularity).
  • If the grades are not correctly set up the performance of Fliptop product might be heavily impacted.

THE PROS

  • Letting the user typing the scores manually makes them more conscious of their actions.
  • Reading data from left to right feels natural and easy.

THE CONS

  • Not interactive enough: text fields don’t look really actionable and aren't delightful to use.
  • Changing a number in a text field might impact another number in another text field. The added friction feels unnecessary.
  • The information about the data included in each buckets isn't sufficient to help make a clear decision.

THE PROS

  • Pie charts are very common among Marketers and Sales teams.
  • Moving sliders feels easier and nicer than typing numbers, and the tool feels more approachable and intuitive.

THE CONS

  • Pie charts aren't usually interactive, and it wasn't always clear to everyone that they were actionable.
  • The selection of each grade is not precise enough.

THE PROS

  • Sliders are very easy to control and feel intuitive.
  • Including the grade letters directly in the slider makes it easier to understand.
  • Including the Win Rate of each bucket helps people understand how the number of potential closed has been calculated.

THE CONS

  • The slider is displayed horizontally while the information for each grades is displayed vertically, and they feel disconnected.
  • The scores included in each bucket aren't being presented.
FINAL SOLUTION

The slider solution increased a lot the usability of this tool, so we decided to continue exploring it and came up with a nice set of improvements: A bigger slider and buttons make it easier and more delightful to use, the scores are displayed at the top of each group so the user can precisely know what we will be included in each grade, and the additional information is neatly organized under each group.