End-to-end process overview of designing a product

  • company Spruce Finance
  • year 2015 – 2018
  • role UI/UX Designer

Company Summary

Spruce Finance is a solar and energy efficiency financing company. They provide contractors with the ability to sell and finance home improvement projects to homeowners through the web-based SpruceFlow application.

 

Project Goals

  • Add a loan product to the SpruceFlow application for contractors to offer more financing options to homeowners
  • Provide an easy way for contractors to use SpruceFlow through all stages of the project; from selling to collecting documents and financing
Screenshot of the old Spruce web application

Information Overload

Even without interviewing customers, it was clear that our old software platform was cluttered with too much information and too many options. Universally, my aim in designing features for SpruceFlow included:
  • Making it clear to users what they should and/or can do within the context of the screen they are viewing
  • Using clear and concise wording that is useful and meaningful to users
  • Minimizing the use of color and use it to highlight important information
Prioritizing Features

Interviewing Customers and Prioritizing Features

I collaborated with product managers to determine features that would provide high business value and reduce risk to disrupting our customer's selling processes. From there, we were able to prioritize a list of features to begin the iteration process.

Wireframes

I used simple wireframes to explore initial concepts of adding new information to our platform that could then be extended to future products. Creating several options, I then worked with developers to determine the most feasible solution to fit within the timeline of our release schedule.
Wireframe options for displaying product details

Prototypes

To gather feedback and test usability, I used hi-fidelity mockups and prototypes for users to get a better sense of how the final product would look and work.
One of many sets of iterations on carousel slides for gathering feedback from users

Outcome

Adding the loan product to the SpruceFlow application increased the number of finance options that our customers were able to offer homeowners. This design set up the framework for adding even more financing options to our platform as the business expanded its product line.
Hi-fidelity mockups created in Sketch and exported to Zeplin for developer handoff