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 designed and installed solar panels on the roofs of homes and buildings and provides energy services.
SolarCity wanted a complete redesign of their website to generate more leads, increase user engagement and drive organic traffic to their website. As the only designer of a lean team on this project, 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.
Lead designer. I worked closely with 2 project managers, 1 senior art director, 1 writer and 2 engineers to design, explore and iterate UI concepts, interactive prototypes.
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.
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.
Next, I conducted a heuristic markup of the website by scrutinizing the structure/layout and identifying usability issues.
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.
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.
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.
Meet John Adams & William Jones. My two personas are both middle-aged males and married.
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.
Ideation/Brainstrom & 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.
Based on stakeholder interviews and usability test findings, we reduced the amount of items in the navigation tabs by focusing on products and pricing.
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.
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, we 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
Rather than having the user complete the form, a user that enters an out-of-territory zip code is immediately taken to sign up to be notified when solar is available in their area. This reduces the number of invalid leads and frustrated potential customers.
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
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.