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

Orange is Sunlight's flagship lending platform, with a web and mobile app that have serviced hundreds of thousands of users, funded over $8 billion in loans, and financed 350,000+ solar systems.

In 2023, I led a comprehensive initiative to relaunch Orange with a new UI/UX and additional features.

ProblemOrange wasn't scaling gracefully

In 2018, Orange had hundreds of users. In 2023? Hundreds of thousands.

Orange, like many startup platforms, wasn't designed with scale in mind. As we added pages and features the platform began to feel labyrinthine, the UI was overcrowded and the UX wasn't as intuitive or efficient.

Data analysis backed up the eye test. Key metrics such as user retention, support volume and how long flows took suggested changes were needed.

Problem

Despite its success, Orange wasn't scaling well enough. Metrics underperformed and support calls increased.

Solution

A redesign that wasn't just a fresh coat of paint, but also overhauled the UX, flows and information architecture.

ResearchAuditing the current experience with feedback from 1,000+ users

I regularly spoke with users but really ramped up interviews to seek their opinions on a redesign. I organized in-person workshops, hopped on Zoom calls, exchanged emails and sent out a survey. I even tried to reach out to every user who rated Orange three stars or fewer, which wasn’t always fun but led to some of the most constructive feedback that I received.

Over a thousand users provided input. Key insights are highlighted below.

129 new features requested

Users had plenty of bright ideas for Orange. We added the best (and most feasible) suggestions to our roadmap.

Piles of competitor intel

Users compared the platform to competitors, which helped us understand our advantages and pain points.

Cross-device insights

Feedback was comprehensive, extending to Orange's web platform, mobile app and APIs.

Technical difficulties

We also learned of technical headaches, such as loading and logouts, and added them to the project's scope.

Direct quotesRead (some of) what users told us

I compiled the thousands of pieces of feedback into a spreadsheet, then organized them all into specific groups and categories.

After revising and highlighting, I wrote up a 57-page report with data viz and summaries. The following are samples of quotes featured in the report.

Suggestion for Orange

A side menu that's always accessible...each of [Competitor]’s pages have a navigation bar at the top

Suggestion for Orange

More spacing to make tapping easier

Suggestion for Orange

Make it less clunky for screen size depending on [your device]

Most frustrating Orange problem?

I struggle navigating Orange and operating the dashboard to get to clients

Suggestion for Orange

A more accessible sales dashboard

Most frustrating Orange problem?

[Applying] always takes a minute to find the right thing to click on to get the submit button to light up

Most frustrating Orange problem?

Mobile app crashes often

Most frustrating Orange problem?

I don’t feel that the app allows you to flow through information as easily

Suggestion for Orange

Better search capability

Orange vs. competitors

[Competitor] has a more organized dashboard

Suggestion for Orange

Less clicking for homeowners

Orange vs. competitors

Make your stip requests more clear and precise

Most frustrating Orange problem?

Orange is easy, however loading screens take forever...I can submit for funding quicker on competitor platforms

Suggestion for Orange

Easier way to upload files

I presented the report and data to our leadership, business development and product teams, which led to fruitful discussions about Orange's current state and possibilities for the upcoming relaunch.

We ideated project requirements, considering feasibility, alignment with business goals, compromises between departmental wishlists, and so on, until the redesign's shape and scope started to take form.

TimeframePlanning out project sprints

Our sprints usually lasted a month and contained many different initiatives, so I had to balance leading this relaunch alongside other key projects.

With a full docket for the team, plus the redesign's comprehensive scope, we moved at a quick and efficient pace through four sprints.

Sprint 1

Sprint 2

Sprint 3

Sprint 4

User flows

Retooling and streamlining processes

Desktop and mobile designs

Overhauling the design system; iterating through new UIs and flows

Prototyping and testing

Testing usability and accessibility; final adjustments

Development

Translating designs into pixel-perfect code; QA, UAT

Team CollaborationMeet the key players

This project looped in every company department, from operations to account management to legal to marketing. I met, collaborated with and consulted dozens of teammates during the sprints.

The following group, besides myself, are who I worked with the closest.

Nick

Lead designer

Liz

Design supervisor

Christine

Junior designer

Shruti

Lead web engineer

Juan

Lead mobile engineer

Rachel

Product manager

David

Business stakeholder

Zafreen

Compliance officer

FlowsFocusing on user flows first

Many of the frustrations I heard in interviews could be attributed to friction with flows that users felt were inefficient, tedious or confusing.

Our design team met with Rachel, our PM, and Olaf, our software architect, to brainstorm solutions to flows before working on the interfaces.

Home menu to kickstart an action New

Previously, logging in sent users to customer dashboards. Now, they're sent to a home menu with popular actions.

Better navigation to serve as a north star New

Orange was becoming labyrinthine with its new features. We introduced a side nav to orient and guide users.

File uploads elevated beyond just a button

Users said the upload process was unintuitive and slow, so we scrapped and rebuilt the flow from scratch.

Application process streamlined

Sunlight asks for more information than competitors do, so extra effort was needed to make forms feel quick.

ComponentsModernizing an outdated interface

As our oldest platform, Orange's UI wasn't as polished as our new products. It was badly in need of a visual overhaul, which started with evolving its design system. I zoomed in to the molecular level to redesign Orange's components and create new elements when necessary.

Our team often built wireframes for large projects, but after the extensive user flow and design system work was finished I felt confident I could jump right into the mockups to allow for as much time for iteration as possible.

For brevity, the following sections are simply high-level redesign overviews. If you have questions about the designs or want to see more, let me know!

Signing inAdding a promotional space and aligning with the design system

During interviews, I found 39 users who didn't know Orange had a mobile app despite our emails and marketing efforts. Extrapolate that number to our entire user base, and suddenly we had an awareness problem.

This led to a requirement to create a promotional space where we could advertise the app or an initiative or product change. The signin page was a sensible home for this with its high visibility and abundance of blank space.

I also tidied up the page and aligned it with our updated design systems.

Home menuJumpstarting user journeys

Previously, logging in sent users straight to their customer dashboards. Many of the interviewees I spoke with told me this was inconvenient for them and required extra clicks to get into their flows.

The solution: the first screen a user will see is a new home menu that's a directory of their most popular actions, jumpstarting their processes. Each user's home is uniquely tailored to them depending on their role/settings.

NavigationOrienting users throughout Orange

Because certain features aren't feasible or logical on mobile, Orange's desktop app is a more built out and all-encompassing platform.

But as our team continued to add new pages and features, more users lost their bearings and needed some guidance. There was a nav menu, but it wasn't encompassing and research showed most users weren't aware of it.

This new navigation pane aimed to plainly map out Orange so the user could quickly find their way around.

DashboardsImproving the dashboards to feel more intuitive and structured

Users wanted improvements for the dashboards more than any other page, and I personally felt the same way. The dashboards were designed before I joined Sunlight, when there were far fewer features, flows and customers.

I started from scratch and redesigned the dashes, focusing on presenting customer info in a cleaner and structured way, improving search, enhancing filters, reorganizing the hierarchy and emphasizing the user's next step.

ApplicationMaking our longer forms feel quicker

A common complaint from users was that Sunlight has a longer application process than competitors. Due to technical and compliance requirements we couldn't cull any fields, but better design could make it feel streamlined.

I added a progress tracker to give the user a sense of where they were and what was left, redesigned each component with simplicity and accessibility in mind, condensed the form and trimmed any fat that wasn't required.

This flow benefitted the most from user testing, as A/B tests and observing how the user approached the forms led to helpful design insights.

Customer detailsEnhancing an information repository into a useful management tool

When the customer details page was first built, it was only meant to house the homeowner's data and project details. Over time it turned into a tool to manage and move along projects, but its basic design was never enhanced.

This new version better organizes all the elements and presents them in a clearer hierarchy. Everything is contained in a single page – no tabs or folders to click through. To advance the project, users will see the required steps and stips prominently featured with the necessary info and context.

Prototypes & DevelopmentWriting front-end code alongside our engineering team

For our largest initiatives I wrote the front-end HTML/CSS code with our engineers. I did this for a few reasons: to make their lives' easier because they didn't have much bandwidth, to ensure pixel-perfect fidelity, prevent delays and to reduce back-and-forth during the handoff and QA processes.

The four steps for my prototyping and development are outlined below.

Developing functional prototypes

I built prototypes in VS Code and tested them with users and stakeholders, then improved based on insights.

Codifying components in our library

New elements were added to our component library, where I improved their code with the engineering team.

Creating Git branches

I transferred the front-end code into branches, then merged into the sprint's environment with the lead dev.

Quality Assurance and User Acceptance Testing

I worked alongside our QA team to fix bugs and optimize, then partnered with the PM to conduct the UAT.

Our resultsA marked improvement

The relaunch felt rewarding to me as soon as it went live and I received emails from users I had spoken with. The emails were all positive, and they were thankful I addressed the pain points they shared with me.

For a more quantitative recap, there are a few takeaways outlined below.

If you'd like to know more about the process, designs, or anything else, please reach out and I'd be happy to share a more in-depth presentation.

Skyrocketing user reviews

After the redesign went live, the average user rating for Orange increased from a 4.71 to a 4.96 score.

Increased logins

The first month live saw 13% more logins, hopefully a sign that users chose us over competing platforms.

Faster flows

Key processes such as running credit and uploading files saw a 20-25% reduction in user time spent.

Improved product foundation

Orange's front and back ends were optimized, paving the way for stabler, smoother growth and new features.