SCTY-banner.jpg
 
 

Overview

SolarCity (now acquired by Tesla) is the leader in full-service solar power systems for homes, businesses and governments providing custom design, financing, installation and monitoring. SolarCity wanted a complete redesign of their website to generate more leads, increase user engagement and drive organic traffic to their website.

My role on this project was lead designer. I worked closely with a lean team of: 2 project managers, 1 senior art director, 1 writer and 2 engineers to design, explore and iterate UI concepts, interactive prototypes. My responsibility was to redefine the visual language and create a better user experience of the company website. The timeline for this project was 4 weeks.

My Process

My team and I were under extreme pressure to move fast and deliver this brand, new website within 4 weeks. The combination of a hard deadline, lean team and limited resources meant we needed to  get the website’s information architecture right quickly.

I. RESEARCH
The first step was make sure I had a thorough understanding of the project–so I conducted stakeholder interviews to understand the business goals and gathered any available data or information that would help me understand the user’s motivations, needs and pain points. I also met with the development team to learn about any technical constraints and roadblocks that I might encounter.

Heuristic Evaluation
Next, I conducted a heuristic evaluation of the website by scrutinizing the structure/layout and identifying usability issues.

 SolarCity's website before the redesign.

SolarCity's website before the redesign.

1. Outdated UI. Website hasn’t been updated in 2 years.
2. Chaotic architecture. Web pages were buried within the website and was not accessible through the main navigation menu.
3. Information overload. Web pages had too much content and information about solar energy was not clear.
4. Poor customer experience. Site visitors that did not qualify for solar were frustrated that they submitted their contact information before finding out they did not even qualify. 

Competitive Analysis
In addition to my research, I evaluated out competitors’ websites with our existing website. I reviewed free quote flows, navigation, terminology, branding and overall design. This helped me understand what it will take to come up to par with our competitors and what I can do to innovate and lead.

User Research
Due to time constraints, I didn’t get to test the original website with real users to understand their pain points. However, I was able to collect existing data from previous usability tests on homepage–which I found helpful in discovering the user’s pain points and the development of my user personas.

User Personas
Meet John Adams & William Jones. My two personas are both middle-aged males and married.

persona_the-saver.jpg
persona_the-environmentalist.jpg

Solutions
With the findings from my research and insights from my personas, I listed down my solutions.

1. Refine UI. Consider font types and sizes, color palette and photography.
2. Enrich usability on desktop and mobile. Simplify the website’s navigation by organizing and removing pages that would not be valuable to the user.
3. Polish voice & tone. Educate potential customers in a simple, clear way. Highlight benefits and identify the process of going solar.
4. Improve lead form flow. Check if website visitors qualify first and provide time options to receive a phone call.


II. IDEATION/BRAINSTORM & EXPLORATION:
Once I sketched out all of my ideas on paper, I created the sitemap, low-fidelity wireframes and user flows. This helped me see early road-blockers, missing content and experiment with different concepts. 

01  - sitemap.jpg

Based on stakeholder interviews and usability test findings, we reduced the amount of items in the navigation tabs by focusing on products and pricing.

02 - user flows.jpg

To reduce the number of invalid leads and ensure site visitors are not wasting time submitting their information, we verify their qualification for solar by retrieving their zip code first. 

Before moving on to the visual design, I presented a low-fidelity prototype to the stakeholders to gather feedback and make refinements. By doing this, it made the workflow more efficient for my team.

SCTY-wireframes.jpg

III. VISUAL DESIGN
During the time of this project, the company was in the process being acquired–which influenced my decision on the website’s overall visual design. I envisioned the website’s look and feel to be a combination of both companies: Sleek, modern and innovative–yet friendly and approachable. By using both companies’ style guides as my guide, I redefined the typography treatment, color palette, imagery and iconography.

I created a visual design system and handed it off to the engineers which helped streamline the workflow and avoid any errors during development.

A Play on Shapes
To add visual interest between modules, I worked with the creative team by adopting an angular shape for each module to represent a roof.

A Clear, Concise Voice
To educate visitors and provide clarity about the installation process and how solar works, I created a vertical carousel with visuals and simple explanations. When the visitor clicks through each step, the background image transitions from the sun to the solar panel installation to the well-lit home.

Improving Lead Quality
To reduce the number of invalid leads and frustrated potential customers, we notified those that don’t qualify for solar immediately after entering their zip code. For those who don't qualify for solar, they have the choice to be contacted via email when solar is available in their area.

flows.jpg

Results

Due to time and budget constraints, only a portion of the website was built–even though the entire design was complete. My team prioritized building out the homepage and residential section, as it made the most sense because majority of the revenue comes from the residential side. As a result, the website was successfully launched on time. This is what happened within the first week of launch:

  • Increased web traffic and reached highest record overall
  • Improved visit-to-lead conversion rate
  • 900+ unique articles (all of them uniformly positive)

After the website launched, I switched gears to design the energy pages on the acquiring company's website. Therefore, I didn’t get a chance to gather user feedback and work on the next iteration. But if I could go back to make improvements, I would:

  • Team up with a developer to build out the remaining sections of the website
  • Continue to optimize the lead generation form
  • Increase the current paragraph font size

Take Aways

  • Be Flexible. This experience taught me that even though you go into a project with a plan, it's important to be flexible and adapt easily to issues that arise. In this situation, I was able to work with my team to come up with a new plan and deliver great results.
  • Be scrappy and resourceful. Nothing fuels creativity like a timeline and a budget. While I constantly wished we had more time, resources, and visual assets–I realized it was fun to be scrappy and resourceful. The challenge of all these combined made the project more fun.