Dashboard design

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

Market research and user interviews

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

I then conducted user interviews, which required making a list of interview questions, finding users to interview, facilitating the interviews, and synthesizing the findings. The user interview process was aimed at gaining insights into which elements to include in the dashboard design, as well as how to arrange them based off of users’ existing mental maps.

Affinity Mapping

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

Personas

I then created provisional personas for a designer, engineer, PM, and marketer that were all informed by the user research process. Below is the persona for the product designer.

Low fidelity sketching

I created several iterations of low fidelity sketches, each with an emphasis on different dashboard elements. The sketches were all informed by data collected from the market research and user interview 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 our work went toward establishing and reinforcing a 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.

The main takeaway from the V1 high fidelity design was that the design caused too much friction for the user. After running a validation test with a design advisor, I realized that a pivot needed to be made.

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. This way, 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.