Project Description
It had been designed by engineers and, much as I love engineers (I was one for years!) it showed. They’d been struggling, and repeatedly told their application was confusing and too hard to use. After my complete redesign, they immediately raised funding!
Skills Used
- Interaction design
- Wireframing
App was crammed with undocumented controls
Their existing design had become sprawling, and undocumented. The engineers had added elements without considering organization, nor making them comprehensible to users.
The original dashboard, with heavy technical details that most users didn’t need (or understand)
One of many configuration screens, showing configuration filled with magic values (“don’t change them!”)
Click to see this configuration screen in full. I’ve cropped it here because it’s 4x longer than wide!
One unique challenge of this project was that no one knew what everything in their app did! More than a quarter of the fields I noted as “come back to it later and ask another cofounder”. The client really appreciated my attention to detail in following up on those.
Exploring directions for dashboard
Once that was completed, I started producing variations to explore different design directions and priorities of the elements on the page:
This exploration was done to not only help the client choose the most powerful display of information, but also to suss out the details they had unconsciously left out of our discussions. This is common in design projects, and why so much iteration occurs.
“Edge” cases that were critically important
There were many edge cases I need to track, and the bar shown in the upper right was a good example. The client strongly preferred the number be below the bar, so the label needed to move when it was at each edge. I provided these edges to their engineering team:
Other pages went through a similar transformation. This configuration screen is one example, which started out as many dropdowns and text boxes, with overly technical detail and few labels. It turned into a set of controls that was a few text boxes and mostly sliders:
Here is the enormous settings page that I cropped above, some of the steps of the design process, and the final page. This page had many fields that could be hidden until their feature was turned on, as well as others that could be presented more easily graphically. Other fields were able to be hidden from the user, and simply assigned good defaults.
How big was it? It was so big…
Branding and visual design collaboration
Once the design fulfilled the client’s major needs, I worked with their branding and visual design team. Our collaboration led to the finished version:
Wireframes indicating placement of all items, along with helper text and placeholder within the elements
Finished comp provided to engineering team
Here’s the final comp of the dashboard, which was then handed to the Engineering team.
Results: they loved it!
The client loved how much I’d simplified their app. They were also wowed by the visual design team, who expressed appreciation for the clarity and detail in my mockups.
As mentioned above, the client immediately raised a round of funding, with an even larger round the following year.