Diagnostic Engine is a multi-use property management tool used to create accurate invoices, proposals, and more. Users were reporting disappointment in the time it was taking to complete a proposal, as well as having to click multiple tabs to see entered information. It was my team's job to reimagine the process and create a more user friendly version.
Company: SMS Assist
My Role:UI Designer
Team:UX Designer, Product Manager,
Key Stakeholders, Developer
Type:Infrastructure, Portal Design
Tools:Sketch, Invision, Figma
Timeline:4 weeks
• Meet with PMs and stakeholders to prioritize jobs-to-be-done
• Meet with users to understand concerns and pain points
• Define problem and narrow requirements
• Begin wire-framing and iteration process
• Review plans with development
• Recruit additional users and test initial designs
• Refine design and integrate learnings
• Repeat interviewing and iteration until success metric is reached
Interview 1:“This is so confusing. I’m constantly flipping back and forth. My guys can’t spend all
day doing this.”
Kelly,
HVAC Office Manager
Interview 2:“I’m submitting 30-40 of these a day. Sometimes I spend like 10 minutes on just one.”
Mike,
Plumbing Co. Owner
Interview 3:“I don’t like the tabs at the top. I don’t even use the incurred costs most of the time.”
Tali,
Plumbing Co. Office Manager
Problem:The process for submitting a project proposal is taking too long. Users can’t see all the necessary information on one page, and they are having to make too many clicks to submit.
Hypothesis:If we condense the proposal page length by integrating an alternative UI and allowing each unique user to decide which specific information
they need displayed, we can reduce the time spent creating proposals and improve the user experience.
Interview 1:“This is a complete 180 from what we had before. I love that we can keep sections closed.”
Justin,
Plumbing Office Manager
Interview 2:“This is exactly what we need. It’s nice to only see what I need to see.”
Ron,
Landscaping Company Owner
Interview 3:“This looks great to me. Very clear. I know exactly what I’m clicking.”
Corrine,
Handyman Company Office Manager
Technicians will click 'create proposal' on the ONE portal to open the proposal process. As a team, we strongly debated how to organize the page. We began with a static layout, but quickly moved to collapsible drawers due to the length of the page after multiple proposals.
Step one is including incurred costs, or costs that technicians had while addressing the problem before the proposal. During user interviews, technicians were adamant that they wanted to see as many added tasks as possible on the screen. This view went through many iterations to reduce information and adjust the layout.
This is the bread and butter of the whole page. After interviewing users, they appreciated the condensed feel and the ability to quickly add multiple technicians and parts all above the fold. Notice on the right rail how the total cost is updated as the technician adds information to the left rail.
Lastly, we included sections like adding attachments for any photos or documents that are critical to the proposal. The final step is a series of questions tying up the process.
