Overwhelming Navigation Combined With Summary

Final version

Project Description

Sighten’s application had a “summary bar”, which both displayed content and was used for navigation. It wasn’t clear that it could be clicked on, and it wasn’t clear that it was meant to indicate a workflow, rather than distinct pages.

Skills Used

  • Interaction design
  • Wireframing

Before I came on

They had already received strong user feedback that the blue green “summary” bar was hard to use. It wasn’t obvious that you could click it — there’s nothing “clickable” about it! Worse, it didn’t indicate that there was a workflow (you had to create a “Site” before creating a “System”).
1 before

When it was completely filled with data, it was almost overwhelming.
2 before

Wireframes

To show it was a workflow, I turned the bar into arrows. Then I played with various bar and pie charts to visually show the percentage of energy generated from solar. (It’s faster to interpret a ratio in a simple graph, than with text labels.)

Variations:
3 wireframe - two charts 4 wireframe - simpler lables 5 wireframe - attach bar to top nav

Then I tried merging the summary bar with the top navigation bar, since having two layers of navigation is often confusing.

Variations:
6 wireframe - merge nav 7 wireframe - simplify merged 8 wireframe - simplify more

Ultimately, they decided they wanted the navigation separate, so I attached it the “summary bar” to the top navigation, to make it clearer that it was still navigation.
9 wireframe - separate from nav

Implemented

Once their engineers implemented it, it significantly improved the readability of the page. It also made it much easier to focus on the purpose of the page, instead of the huge summary bar at the top of the screen.

10 implemented early in process 11 implemented later in process

Further improvement

Optimally, navigation and a summary should be separate, but they had wanted to keep them together. A front-end engineer and I worked together to prototype a further simplification, with summary on the left (reduced to just name and address!) and navigation on the right.
12 final version