I worked with Main Street (they help people start small businesses, help them with trainings and tools required to kickstart their business journey) for 2–3 months to design a dashboard that helps their clients with managing estimates and invoicing.

This is a UX case study of redesigning the proposal flow for the dashboard. Main Street already had some designs for the proposal flow but the designs lacked usability and consistency. They wanted me to fix the design to make it more user-friendly.

• Client: Main Street
• Project duration: Jun-Aug 2020
• Roles I assumed: UX Designer, Visual Designer

What was my approach?

I outlined the current information architecture, and mapped out the flaws and drawbacks of the existing model via a heuristic evaluation. Using these points, I designed a new layout that addresses the concerns. Finally, I sketched out prototype and then converted them into hi-fidelity prototypes.

Design Flow

Here is the user journey in detail

Flaws in the current design

Owner Preview Screen

• No clear information hierarchy leading to bad scannability.
• Users have to scroll through to see the entire proposal and the popup approach makes it difficult to scroll.
• There are two different proposals : One is estimate (which is for the customers) another is work order (which is for the crew).Right now there are two different flows for them. User at a time can not send the proposal to both customers and the crew.This takes more time and makes user more confused.
• User can not see the preview of the proposal just before sending it out. Right now the preview flow and send proposal flow are different. This makes the process inefficient and lacks usability

Customer Preview Screen

• The CTA’s are not straightforward and says more than it needs, increasing cognitive load for the users.
• The pop up over the pop up look sloppy and increase the distraction for the user.

Prototyping

Owner Preview Screen

• Making the preview space as a separate page instead of popup, this makes it easy for the user to scroll through the view and make a decision.
  
• Merging preview and send proposal flows. This reduces a step and enhances usability
  
• Added a dropdown so that the user can switch between work order and estimate and can send the proposal to both the crew and the customer in one flow.
  
• Download is the secondary action and thus is put up just on the top of the template view . While the main CTA of the page goes on the rightmost corner where users eyes focuses most while scanning.

Customer Preview Screen

• The main actions for the customer would be to either accept or reject the proposal and so the CTA language has been changed and made more concrete.

What I have accomplished?

• Simplification of the overly nested model
• Introduction of a few new features that enhance interactivity and usability
• Easier access to certain settings with the introduction of the preview dropdown