Project Description
Users and venture capitalists had said the client’s web app was too confusing. VCs were refusing to invest for that reason, too. I met them at a networking event and they asked if I could come in the next day.
Amongst many issues, the 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.
After my top-to-bottom redesign, they quickly were able to raise funding!
Skills Used
- Interaction design
- Wireframing
Before I came on
They had already received strong user feedback that the blue-green “summary” bar was confusing. 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 (e.g. you had to create a “Site” before creating a “System”).
When it was completely filled with data, it was almost overwhelming.
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
Multiple layers of navigation is confusing, so I tried merging the summary bar with the top navigation bar:
Ultimately, they decided they wanted the navigation separate, so I attached the “summary bar” to the top navigation, to make it clearer that it was still navigation.
So much better!
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.
Further improved into final state
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.
