Planogy

Designing a dashboard for users to see and manage all their projects from a single page

Company

Planogy was founded in 2018 as a collaborative feedback web platform made for designers to give and receive feedback on their work

Role

I designed the entire dashboard from scratch, which involved conducting market and user research, low fidelity sketching, high fidelity designing, prototyping, and validation testing

Timeline

Six weeks, 2019

Skills

Research, sketching, high fidelity design, prototyping, validation testing

The problem 💣

Users didn’t have a home-base to work out of, which meant that they could only access a project if they had the project link

Also, users were unable to see and manage all of their projects from a single, macro-level view

The opportunity 🙏

Design a dashboard feature that existing users can land on and navigate from once they visit Planogy.com

Allow users to stay organized by letting them see and manage all of their projects from a single page

Final designs and results

Without a dashboard, Planogy users were unable to see and manage all of their projects from a single screen. Now, users have a home-base to work from where they can quickly navigate around the product and make the most out of the tool. I was able to ship the design before the end of the six week period which allowed Planogy to include the dashboard feature in their launch by the end of Q4 2019.

First step: research

I conducted market research to identify common dashboard UI/UX patterns and establish mental maps

I also conducted user interviews, with the goal being to gain insights into which elements to include in the dashboard design, as well as how to arrange the elements based off of users’ existing mental maps

I then synthesized the user research findings by identifying recurring themes and grouping together like terms, pain points, and other key takeaways. Common paint points included lack of technical knowledge across team members, slow decision making processes and disorganized feedback systems

Next, I created provisional personas informed by the user research findings for different users, including a designer, engineer, PM, and a marketer

Low fidelity sketching

I created several iterations of low fidelity sketches, each with emphases on different dashboard elements. The sketches were all informed by data collected from the market and user research processes

I ultimately decided to draw the most inspiration from the first iteration, which included the sidebar navigation on the left and the project cards in the main part of the dashboard. This design maximized screen real estate for the project cards while still allowing users to navigate seamlessly between pages

Style elements

The style elements used in the dashboard design were largely inspired by the existing colors and typefaces on Planogy’s landing page. However, as such a young company, Planogy lacked strong brand guidelines so much of my work went toward establishing and reinforcing a strong brand identity. Additionally, Planogy worked with several outside designers, so it made sense to establish colors, typography, button styles, icons, and other style elements upfront

High fidelity mockups V1

Once the low fidelity sketches were refined through critiques with the client and other team members, I moved on to creating my first iterations of high fidelity mockups in Figma. The high fidelity design process was highly collaborative between designers, which allowed us to pivot and iterate in real time

We employed the law of proximity between project cards to differentiate between project categories

The main takeaway from the V1 high fidelity design was that the design caused too much friction for the user. After running validation tests with a design advisor, I realized that a pivot needed to be made to reduce the amount of noise and distractions for users trying to reach their end goal

High fidelity mockups V2

Once we realized that the V1 design caused too much friction for the user, we iterated on the design

The sidebar navigation simply offered too many options, most of which were distracting for users trying to accomplish their end goals, which were to open an existing project, manage a project, and create a new project

The V2 iterations better accommodate the needs of the user and are more aligned with each specific use case

In the V2 design, I removed the sidebar navigation entirely, and instead replaced it with a more subtle horizontal navigation toward the top of the dashboard. Validation testing showed that users’ attention upon landing on the dashboard was immediately drawn to the, “New project” button and the project cards. In the V2 design, users are naturally drawn toward accomplishing their goals, which ultimately reduces friction, empowers users, and increases retention and engagement

In the list view, in addition to significant UI improvements, users can now filter their projects by simply clicking the filter name

Deliverables

At the end of each week during the sprint, I delivered one piece of the project to the client to keep them up to date and to promote transparency. Before the six week sprint came to a close, I delivered the final high fidelity designs, a walk-through video of the prototype, and the validation testing findings to the client, which allowed Planogy to launch their product with the dashboard by the end of Q4 2019

Takeaways

I learned a lot over the course of this project, although the most notable learning point came when I pivoted the design to reduce friction for the user. I learned that oftentimes it is best to design for specific use cases, rather than designing for every possible use case. In this situation, it made more sense to design the dashboard with three use cases in mind: open an existing project, manage an existing project, and create a new project. Allowing any additional actions for users to take ultimately proved to be a distraction, and blocked users from achieving their end goals