Doug Crissman

Category: Spruce Finance

  • Quick Solar Design

    Quick Solar Design

    Overview

    Designing the Quick Solar Design feature was the first major UI/UX project I worked on at Spruce. Along with the Product and Development teams, we collaborated with Pivotal Labs to learn more about the Agile Design and Development process. While leading the UI design of the project, I also worked with the Pivotal UX designers to interview and test prototypes with our users.

    Project Goals

    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.

    • Simple way of calculating system production and electricity savings that was “catered” to a particular homeowner
    • Create a system design feature that reduced time needed to train users
    • Provide homeowners with confidence of their potential energy and cost savings
    The original feature was limited to data entry form fields with no visual display on a roof

    Discovery

    Through several interviews with our users, we found what information was most important to them in selling a solar installation. We were also able to learn more about their frustrations working with our software platform.

    Most notable pain points:

    • I don’t know the exact measurement and values to input
    • It’s too difficult to get an accurate estimate of how many solar panels will fit on the roof
    • I talk about the savings at the beginning of my pitch, but there is too much information to add to get to this point in the application

    Initial Mockups

    For this particular project, I started creating hi-fidelity mockups in order to be able to quickly get validated portions of it to developers while others were still being tested.

    I created many iterations and with continued feedback from users, was able find a balance that made it easy for them to find the information they needed.

    Some samples of many that were created in collecting feedback and testing with users

    Prototypes

    Due to the complexity of this interface, I also created interactive prototypes in Principle that we were able to use validate assumptions on the ease of creating, moving, and resizing arrays of solar panels on the map.

    Outcome

    • Sales people were able to easily show homeowners a quick view of their solar installation.

  • End-to-end process overview of designing a product

    End-to-end process overview of designing a product

    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

  • Finding the Right Problem to Solve

    Finding the Right Problem to Solve

    Features for our new platform would often result in requests like:

    “We need to cancel documents on this page.
    Please design a mockup here with a Cancel Documents button.”

    Defining the Problem Before Creating a Solution

    For this and other features, I put this chart together to use with product managers in order to frame the problem from the perspective of our users.

    This is the problem statement that we arrived at:

    I, Norman (our sales person persona), need to increase the loan amount because more expensive materials are required for this installation.

    Next Steps: Focusing on the Customer’s Journey

    Mapping the journey helped identify areas where customers fell off (red) of the happy path (green) in our software
    [button-group size=”lg” justified=”” vertical=”false” xclass=”btn-toggle” data=”target, cancelDocs”][button link=”#” xclass=”active btn-primary”] Before [/button][button link=”#”] After [/button][/button-group]

    Pain Points

    • Customers couldn’t remember the multiple steps required to edit the loan amount of their deals.
    • Using two separate software portals increased confusion and subsequently increased the number of support calls.

    Proposed Solution

    Reduce the amount of steps required for the customer to get back on the happy path in our software:

    • Allow customers to edit the loan amount in the software where they set it in the first place.
    • Automatically do things that the software requires after such a reset, in this case, cancel the previously finalized documents in order to create new ones with the revised information.
    • Align wording to coincide with the action/goal that users are trying to achieve. In this case, Make Changes instead of Cancel Documents.

    Outcome

    By framing the problem around the needs of our users, we were able to create a better solution that directed them back onto the happy path within our software.

    Prototype sequence of the implemented feature

  • Scalable Design Systems

    Scalable Design Systems

    At the core of the Spruce style guide

    Building blocks to make it easier for users to read & find the information they need

    Summary

    Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).

    Original Style Guide

    MVP Style Guide

    When I started designing for the SpruceFlow web application, there was a bare-bones style guide in place.

    • Styles that worked within the Bootstrap framework
    • Allow for easy handoff to developers
    • Create more consistency in designs from hi-fidelity mockup to implementation
    To accommodate a variety of component and screen layouts, the styleguide eventually expanded to allow for increasing complexity of information while maintaining ease of use and minimal one-off customizations

    Design Fundamentals

     

    Elements

    Rather than continue with custom-built elements like buttons and form fields that had been implemented in the software, I advocated for the use of the Bootstrap framework of components. This allowed for easy stylistic customization to align elements with the Spruce brand while also reducing development time.

    Wireframes

    Additionally, I created simple wireframe elements and layouts that allowed project managers to explore ideas for features themselves.

    Developer Handoff

    Created in Sketch, the style guide was shared with developers in Zeplin. 

    Also pairing with developers while features were implemented which reduced tickets rejected for visual reasons during the QA process.

    Outcome

  • Why Designers Should Know How to Code

    Why Designers Should Know How to Code

    Problems:

    In designing an application for existing customers, I found that the simplicity of wireframes and InVision prototypes ended up lacking and disrupting any usability testing.

    • When users tested prototypes, they would become frustrated and unable to complete tasks when elements in the prototype did not work.
    • Creating clickable sequences for InVision prototypes becomes exponentially complex when visual or sequential changes need to be made.
    • Can’t test with real data.

    Starting simple with a focus on new users to our platform

    Assumptions

    • Entering either a ZIP code or address would be confusing to users

    Testing Method

    • Determine the task
    • Get 3-5 people to perform the task
    •  

  • Spruce Marketing

    Spruce Marketing

    While my main role at Spruce was with the Software Product team, I also supported the Marketing team on design projects when needed.

    Web design for the Spruce corporate website
    Web design of the homeowner solar monitoring dashboard
    Illustrations/infographics for Spruce blog posts and articles
    Print Design – Solar Hardware Troubleshooting Guides
    Print Design – Finance Product Spec Sheets
    Logo mark concepts for Spruce sub-brands
    Branding creative direction of Spruce offshoot company, Solar Service Experts. Design by Jacqueline Kinney.

    Previous

    Spruce Software

    • UI/UX Design

    Next

    SAFARI Montage

    • UI Design
    • Print
    • Marketing
    • Web Design/Development