4-finished

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…

The enormous settings page, as it originally stood
Click to see it at full size, and really experience the length of this page!

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.

Finished design

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.