Spruce Finance
Overview
Spruce provided solar and energy efficiency financing options to homeowners. As a member of the product team, I designed the interface and experience of the web-based sales application, SpruceFlow, for our channel partners.
Challenges
Spruce was the result of a merger between two companies, Clean Power Finance and Kilowatt Financial.
As a result, each had its own software portal for users to sell and finance home improvements. The challenge was to integrate and find new features beneficial to users of our new SpruceFlow platform.
Clean Power Finance
Solar Financing
Kilowatt Financial
Energy Efficiency Financing
Spruce Finance
Solar & EE Financing
Hi-level Goals
- Make it easy for our users to sell, qualify, and finance leases and loans for both solar and energy efficiency home improvements.
- Reduce the time it takes to learn how to use the platform.
Learning from Our Users
With each finance product added to SpruceFlow, I worked with product managers to interview our users and gain more insight into how they worked and sold projects to homeowners.
Each feature was designed around one or several of our user personas:
Norman Sales Person
- Indirect contact with the homeowner through Norman via email
- Needs detailed information about the project and financing options
- Working from an office
Ollie Operations/Finance Manager
- Direct contact with homeowners in-person or via phone
- Needs to quickly find information about financing products
- Collaborates with Ollie via email on detailed information specs
Uma Underwriter
- Direct contact with Norman & Ollie, minimal contact with homeowners
- Needs detailed information about the project, financing options, and any revision history of documents
- Regular contact with Norman and Ollie via phone or in-app notifications
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.
Features requests like:
“We need to cancel documents on this page. Please design a mockup for this page with a Cancel Documents button.”
Now became:
“I need to change the loan amount because additional work was required that increased the cost of the installation.”
Solving the Problem
Designing solutions began with wireframes and journey maps to quickly come up with several concepts.
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
I used InVision or sometimes HTML/CSS/Javascript/React to create prototypes for testing with our users.
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.
UI Design
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.
Outcome
Using this agile method of designing, we were able to build products in a quick timeframe. Here are some samples of how the application changed throughout the years:
