1. Scoping + Research & Documentation + Kickoff Meeting

In addition to scoping to lay the foundation and create some definition around the project, I performed the same three steps as here as I did in this project. This included a full set of personas, user stories for personas, aesthetic direction, initial navigational structure as well as early design ideas sketched by the group.

✔ Dashboards: Utility + Key Actions

Dashboards contain a ton of utility. When done correctly, they do a number of things well such as give users quick insights into what has happened since they were there last, activity and metrics around key actions. Most importantly though, a dashboard allows users to see quickly, what actions they should do next.

✔ Designing for the Workspace First

Since designing a dashboard can be a fairly large task, my initial goal was to break the design process down into smaller steps. I also wanted to make sure the group had more than one option to consider for how to entire UI might come together. I started by designing options for the workspace (the container of the app) first.

2. Designing Workspace Options

I designed four Workspace options. Each option has the same exact navigational structure — as defined as part of the initial phase of the project. The difference between them is that each Workspace option shows the navigation elements presented in a different way.

workspace designs

Workspace Options With Content & Color

While options are great, it takes quite a bit of imagination to visualize what the dashboard(s) might look like in their end state. To mitigate this, I pulled some existing dashboard designs out and copied them into the blank space of the Workspace designs and just added a little color to match. Now easily and very quickly, we had solid visuals to look at and better understand. It took all of two minutes for the group to decide which Workspace design they preferred.

workspace designs

Related Blog Post

➲ Designing for the Workspace First on Medium

Top Olark Livehelp