Designing an ecommerce experience for Sunrun x Ford partnership

Category
Website
Year
2023
Client
Sunrun
Role
UX Design Lead
Functions
  • Product Strategy
  • Design and Art Direction
  • Content Strategy
  • Responsive web development
Case Study
Please contact hiyewonshin@gmail.com for the full case study.

I designed the end to end customer journey and drove the overall UX from scratch to production, resulting in strong initial results.

Click to View Website

Images for this project are coming soon.

Impact

Received positive feedback from Sunrun and its customers:
OverviewProblemsUserflowsWireframesFinal DesignsAnnotationsImpactReflection

Outcomes

Over 2,000
Ford Charge Station Pro orders thus far
Rapidly ramping
Installations and initial conversations
Half of customers
are purchasing bidirectional home backup capability

Quote from client:

"Sunrun’s partnership with Ford...continues to gain momentum."

Overview

Sunrun is the leading home solar panel and battery storage company. It has a partnership with Ford, serving as Ford's preferred installer of F-150 Lightning trucks' charging stations.
‍
The ask was to design an ecommerce website where customers, who have purchased a F-150 Lightning truck, can place an order for their charger installations.

3 Experience Principles

01. Simplify the Complex
02. Harmonize Everything
03. Inspire Self-Discovery

01.

Simplify the Complex

Build New Ecommerce

Initially, Sunrun had a single landing page for the Sunrun x Ford partnership and customers had to call customer service to inquire or place an order. We worked together to create a new ecommerce experience, humanizing every touchpoint to make experiences feel intuitive and offer guidance with clear and straightfoward flows.

Reduce Friction

One of the major business and user goal was to reduce friction while customers learn about Sunrun products and installation process and ultimately check out. We provided more guidance around products and financing models and transparency around how pricing changes based on offers and removed steps it takes to understand, choose, and purchase your Ford/Sunrun products. Reducing dense copy and confusing language also helped making the checkout experiences easier.

Design and Flow Iterations

Model 1 - Inspire & Empower

  • This model drives users to the configurator page where they customize their product selections.
  • Although with this model users can simply select an option without having to learn the differences between bundle options, it doesn't feel like a proper ecommerce's checkout experience, providing enough information about each product..

Model 2 - Linear

  • This model goes through a step by step product selection, asking questions about what users want.
  • Although this model is friendly for users, it takes multiple steps to get to checkout, potentially losing customers on the way to checkout.

Model 3 - All-In-One

  • This model allows product selections on the landing page, letting users check out in the least number of steps.
  • Although this model is quick and easy to check out, it doesn't educate users enough on products and installation.

Model 4 - Step by Step (Selected Flow)

  • This model goes through a bundle selection page to bundle detail page to checkout, guiding users thoroughly in each step.
  • This model was selected to proceed to final design due to several reasons. It first provides an overview context around Sunrun and its mission on the Landing page. Then it asks users to select a bundle first - which Sunrun had difficulty educating users on. By dedicating an entire page to give an overall view of all the bundle options first before diving into each of the details on the Bundle Detail Page (PDP), users are able to digest complex information in a concrete order that we strategically planned.

Optimized Outreach

When placing an order for the Ford Charger Installation, there are various customer journeys to be considered in order for customers to not face dead end paths (i.e. customers have to be homeowners).

By placing gate screens and informational screens at necessary touchpoints, we helped Sunrun to not lose on those customers. Also, we crafted the experience so that Sunrun contacts customers throughout their engagement. The outreach enabled customers to explore and shop at various journey moments and encouraged reengagement for future sales.

Final Userflow

02.

Harmonize Everything

Build Trust Through Continuity

Since majority of the users were coming to this site after purchasing a Ford electric car, it was important that they sense a smooth transition and not be dioriented or loose trust. Leaning on Ford’s trust equity, we centralized systems and platforms to enable better holistic experiences, and deliver a consistent brand interaction, no matter the channel, touchpoint, or team.

03.

Inspire Self-Discovery

Supportive Content and Visuals

To properly introduce customers to Sunrun and the value of integrating solar into their home charging set-up, we incorporated educational resources on solar energy, product value and how the different types of products integrate into one system.

For customers unfamiliar with Sunrun, we wanted to highlight the brand story, product information, and installation process in a simple, direct way. We used imagery as the primary aid in understanding the product offering instead of communicating with copy.

Scalable Design System

As Sunrun customers evolve their thinking about energy, we thought it was important that Sunrun continue to support them and expand their ecosystem and services to do so. We developed a flexible design system and component library that flexibily scales, easily adapts to our changing world and continually add value.

Please contact hiyewonshin@gmail.com for the full case study.

Next Case: 
Focus Brands User Testing
Location
New York, USA
GMT -05:00
You can find me on LinkedinLinkedin where I try to look professional, or email me at hiyewonshin@gmail.comhiyewonshin@gmail.com

Final Design

I supported visual designers with wireframes. Once the design system was established by the design system designers, I put my UI designer hat on and helped design the components, expanding and updating the existing component library.

Click through the prototype to explore some of the final pages.

Customer Journey

Challenges

Lacking guidance
Lack of clarity around which products are necessary vs nice-to-haves to realize the truck’s full value
Confusing pricing
Limited guidance and transparency  about financing models and how pricing changes based on offer
Lack of education
Limited educational resources on product value and how parts  integrate into a system

Original Userflow

This is the original userflow of a customer placing the order. Customers were notified to place an installation order through email. From then, they were introduced to the original Sunrun x Ford landing page.

Original Experience

Goal

How might we provide clear guidance and transparency about financing models and how pricing changes based on the offer?

Experience Principles

Simplify the complex
Humanize every touchpoint to make experiences feel intuitive and offer guidance as needed with clear and straightforward flows.
Harmonize everything
Centralize systems and platforms  to enable better holistic experiences, and deliver a consistent brand interaction, no matter the channel, touchpoint, or team.
Inspire self discovery
Prioritize visibility and transparency to build trust and lead towards self-service and automation.

Design and Flow Iterations

Model 1 - Inspire & Empower

  • This model drives users to the configurator page where they customize their product selections.
  • Although with this model users can simply select an option without having to learn the differences between bundle options, it doesn't feel like a proper ecommerce's checkout experience, providing enough information about each product..

Model 2 - Linear

  • This model goes through a step by step product selection, asking questions about what users want.
  • Although this model is friendly for users, it takes multiple steps to get to checkout, potentially losing customers on the way to checkout.

Model 3 - All-In-One

  • This model allows product selections on the landing page, letting users check out in the least number of steps.
  • Although this model is quick and easy to check out, it doesn't educate users enough on products and installation.

Model 4 - Step by Step (Selected Flow)

  • This model goes through a bundle selection page to bundle detail page to checkout, guiding users thoroughly in each step.
  • This model was selected to proceed to final design due to several reasons. It first provides an overview context around Sunrun and its mission on the Landing page. Then it asks users to select a bundle first - which Sunrun had difficulty educating users on. By dedicating an entire page to give an overall view of all the bundle options first before diving into each of the details on the Bundle Detail Page (PDP), users are able to digest complex information in a concrete order that we strategically planned.

Final Userflow

Functional Annotations

Reflection

My team and I had to overcome a lot of challenges together. One of the challenges was to identify types of users who will be using this website. There needed to be a state or sometimes a separate page for different user types. For example, Sunrun needs to check if the user's home is in the service area in order to show relevant products and services available in that area, leading me to ask for user's ZIP code first thing on the homepage. Another example is that Sunrun offers installations only to customers whose F-150 trucks are ready for delivery, hence why in the backend the website checks the user's order number and displays a page that informs that their trucks need to be ready for delivery. I workshopped with the clients and another UX designer to understand, prioritize, and translate these user scenarios in the customer journey, keeping the UX and tech level of effort in mind.

Another big challenge was that all 7 bundles had its own unique price breakdown and sometimes different way of placing the order and financing. The initial hurdle was understanding these differences and the reasonings behind by asking specific questions to the Sunrun stakeholders and workshopping with them on the wireframes. Furthermore, I collaborated with developers to create a functional annotation for these price breakdowns, in the simplest format as possible, so that they're built properly.