User Experience Design

4-finished

Project Description

My client brought me on because they had been struggling. They’d been repeatedly told their application was confusing and too hard to use. After my complete redesign, they immediately raised a round of funding. They raised an even larger round the following year.

Skills Used

  • Interaction design
  • Wireframing

Design Process

Their existing design had become sprawling, and undocumented. Engineers added elements as they implemented them with little thought for organization. Note the right screen — I’ve cropped it because it’s 4x longer than wide!

Client's original homepageOriginal configuration screen (one of many!)This settings screen is 4x longer than it is wide!

One unique challenge of this project was that no one in the company knew what everything in their application did! So about 25% of the fields I noted as “come back to it later and ask [another cofounder]”. The client marveled at my attention to detail in following up on those, and on edge cases (see below).

Variations and iterations
Once that was completed, I started producing variations to explore different design directions and priorities of the elements on the page:
Homepage design directions

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.

Once the design fulfilled the client’s major needs, I turned my wireframes over to a branding and visual design house they had also hired, and we further collaborated on the design. That led to this finished version:Finished homepage

Edge cases
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: An example of illustrating and explaining edge cases

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: Many other pages went through a similar transformation

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.

The enormous settings page, as it originally stoodThe page's final designThe page's final design

Results

As mentioned above, the client immediately raised a round of funding, with an even larger round the following year. Additionally, both the client and the visual design shop loved the designs, and working with me.