Sunlight Financial is a fintech company that provides loans to homeowners buying rooftop solar panels.

As a member of Sunlight's agile product team I led a design sprint to create a portal for our solar customers, empowering them to manage and track projects, find answers to FAQs, and more.

Our UX gapThe problem

Installing solar panels is a long multi-step process that can quickly become complex for homeowners.

A substantial gap in Sunlight's customer experience was we didn't provide homeowners the ability to monitor their installation's progress.

Problem

Customers can't track or manage projects on their own, leading to confusion, mistakes, and frustration.

Solution

Build a portal for customers to oversee, advance and modify their projects without external assistance.

Core membersMeet our team

Our product team was comprised of many cross-functional members who collaborated with stakeholders across all departments. If I listed everyone who had a hand in our product operations you'd be scrolling for awhile.

This project's team was an immensely talented group of two other designers, an engineer, a product manager, a system architect, a business liaison and compliance officer.

Nick

Lead designer

Liz

Design supervisor

Christine

Junior designer

Abhishek

Lead engineer

Rachel

Product manager

Olaf

Systems architect

Tim

Business liaison

Zafreen

Compliance officer

Analysis & interviewsResearch

For exploratory research I analyzed finance portals created by our competitors and other fintech companies. The best interfaces simplified complex processes, clearly communicated key details and deadlines, and leveraged their branding to create a pleasing and cohesive layout.

I also conducted user interviews to gain invaluable insights from the perspectives of internal stakeholders, partners, and customers.

"Too many of the same calls."

Our support reps noted volume spikes from similar questions that could be avoided with an FAQs page.

"A better way to communicate."

The legal team wanted a better channel for customer communications and to improve transparency.

"We can't fall behind."

We were constantly trying to outpace competitors in a race to offer new groundbreaking tools to partners.

"Are our products working?"

Our product team needed a consistent and reliable method to survey customers about our products.

"We want to choose you, but..."

Partners will do business with other loan providers if they offer customers better tools and features.

"Customer calls eat up our time."

Similar to Sunlight's support team, installers received too many avoidable questions from customers.

"Customers want autonomy."

Homeowners don't want to have to call up their solar rep every time they're curious about their project.

"We can use this as a marketing tool."

Installers could show customers our Consumer Portal as an impressive selling point for their services.

"Why do stipulations take so long?"

Roadblocks (a.k.a. stipulations) could be resolved quicker by homeowners directly in their own portal.

"I can't find the paperwork."

Customers often misplaced physical mail or deleted emails with important loan or installation information.

"Why can't this be like my bank?"

Customers mentioned how their other financial institutions provided them with helpful portals.

"I don't know what comes next."

Customers were often confused about timeframes and the next steps needed to get their panels installed.

Agile collaborationUser flow

Before designing, I met with our product manager (Rachel) and system architect (Olaf). Together we mapped user flows and discussed technical details to fully scope the portal, its features, and its boundaries.

The main flow begins in our Orange POS lending platform and transitions the user to their own personal portal after they're approved for a loan.

Orange

Solar rep's device

  • Applicant info
  • Choose loan
  • Run credit
  • Credit approved

Consumer Portal

Customer's device

  • Email verification
  • One-time sign in
  • Credit approved
  • Loan sent
  • Loan signed
  • Notice to proceed
  • Installation
  • Turn on power
  • Review us!

Secondary actions

  • FAQs
  • Loan calculator
  • Contact installer
  • Upload files
  • Chat
  • Modify project
  • Cancel project

When building an MVP on an accelerated timeline there should be consensus around which features are A) essential and B) feasible. In this case, due to technical feasibility we had to descope the chat and modify project features and push them to the subsequent sprints.

Cancel project was not deemed essential and required additional input from the legal team, so this was also moved to the following sprint.

Building a pipelineWireframes

My research showed the majority of customer questions were related to basic loan information, such as monthly payments, the credit's expiration date, or the lender name. For easy reference, I prominently placed a loan summary below the customer's name and address.

The next most common questions revolved around the installation's progress, so below the summary I visualized the project pipeline. I wanted the user to always be able to clearly tell how many steps were left until completion, and what those steps entailed.

The majority of site visits would stay within this main layout. Secondary features appeared as modals (loan calculator, contact support, cancel project) or another page (FAQs, review us).

Pipeline

Wireframe for the shop's hero

FAQs

Wireframe for the shop's product gallery

Cohesive visualsMockups

For a seamless UX it was crucial to align the Consumer Portal's styling with our Orange platform's so when the user moved from the latter to the former it would feel cohesive and adjoined.

I workshopped the wireframes and mockups with the stakeholders and product team, iterating based on their feedback until our requirements were satisfied and we felt it was intuitive, polished, and easy-to-use.

Coding with AbhishekDevelopment

For most of Sunlight's important initiatives I worked with our engineering team on the product's code to create the most high-fidelity UI. I wrote the HTML and CSS and they handled the back-end operations.

I sat down with our dev (Abhishek) lead and built the portal with him over the course of a few days. See below for notes on our development results.

Images out, icons in

We incorporated FontAwesome's icon library into the codebase as a lightweight alternative to images.

Made with Angular

The final iteration of the product was built with Angular, which I was familiar with from our other portals.

Connecting APIs

We hooked up the platform to our APIs to easily and quickly transfer customer information and data.

Quick, light, efficient

We worked hard to shrink the portal down to a miniscule file size so it was quick, light, and efficient for users.

Our resultsTakeaways

The portal was an instant success as thousands of homeowners regularly logged into their accounts in the months following launch.

But it wasn't perfect; the analytics data and customer feedback helped me improve the platform in the following years' design sprints.

Below are my project takeaways: four big wins and two lessons I learned.

Reduced support volume

Our support team's burden lightened as users referred to the portal's pipeline and FAQs instead of calling.

Satisfied solar installers

Our partners reported happier customers, far fewer questions, and better ratings on projects with us.

Positive customer reviews

We created a new review channel for the portal with ratings averaging 4.8 out of 5 stars.

Standout feature

The portal was a solid project management product that differentiated us from competitors.

Thinking outside the box

We couldn't directly advertise to consumers at the time, so I had get creative with our marketing team.

Adjusting to the time crunch

I had to be flexible as features I coveted, such as chat and project cancellation, were descoped from phase 1.