Defining the Problem
I created this form for product managers and myself to use to get a better understanding of the problems we were trying to solve.
This allowed for multiple solutions and focused the team on designing based on the needs of our users.
The Customer’s Journey
After getting a better understanding of the problem, I created wireframes to map the user’s journey through our software.
This helped identify areas where customers fell off (red) of the happy path (green) in our software.
Task-based Usability Testing
Testing involved three to five users to observe their ability to complete tasks in the new UI. Splitting longer sequences into smaller tasks allowed us to identify very specific areas of the application to improve.
Example of task sequence:
- Task 1 Enter the homeowner’s ZIP code
- Task 2 View the proposal for their area
- Task 3 Customize with info from their utility bill
- Task 4 View the proposal specific to their electricity cost and usage
Collaborating with Product Managers
After collecting feedback or testing design solutions, I worked with product managers to prioritize additional iterative improvements based on user or business values and risk.
From there, we were able to to create action items for either additional iterative improvements for prioritizing user stories for the dev team to build.
Elements, components, and layouts focused on making it easy for users to find the information they needed and to provide direction in using the application.
Style Guide / Design System
While the main goal of the UI design centered around our users, I also considered other technical aspects as a system:
- Modular for both design and development to easily scale with reusable components
- Responsive to be used across a wide range of screens and devices
- Branded for consistency with the Spruce style across other materials from HTML emails, training materials, and marketing
Working with Developers
All designs in Sketch were exported to Zeplin for easy handoff to developers. As our product team was small, I was also directly involved in writing user stories and leading planning meetings with the dev team on implementing design choices.
I also frequently paired with developers and led workshops on best practices in HTML, SCSS, and Bootstrap for building the designs that I had created.