Overview

SolarCity (now known as Tesla) is the leader in full-service solar power systems for homes, businesses and governments providing custom design, financing, installation and monitoring.

After SolarCity’s brand refresh launched in summer 2016, I was assigned to redesign the SolarCity website since it hasn't been updated since 2014. During this time, the SolarCity/Tesla product launch event had also been announced–which pushed the project’s deadline to an earlier date.

To coincide with the product launch event, my team was under extreme pressure to move fast. We were tasked to deliver a brand new website within 4 weeks. The combination of a fixed deadline, lean team and limited visuals assets meant I needed to get the website's information architecture right in the first 2 weeks.

Design Process

ResearchBefore I went straight into sketching and wireframing, I conducted some research beforehand which helped me in my design process. I met with members of the Performance Marketing Team to ask questions and gather information about how our users navigate through the website, what challenges they faced and what they thought would improve the website’s usability. They also provided me a list of user personas which defined our users: middle-aged homeowners, predominately male.

With the information I gathered, I listed a solution for each of the problems defined.

Problems· The website was visually outdated· Web pages were buried and couldn’t be accessed through the navigation menu· Website was filled with too much content which made the user feel overwhelmed. In addition, the cost and process to go solar was unclear and seemed to get lost within the content of the website.

Solutions· Design a fully responsive and lead-converting website, using the new brand guidelines· Enrich usability by simplifying the website’s navigation· Curate content by understanding what is important for the user to learn· Polish the website’s voice and tone

SolarCity's website before the redesign.

IdeationAfter I had a full understanding of the business and user goals, I took all the information gathered and strategized a plan by brainstorming ideas first. I found it helpful to collaborate with project members and other designers to get as many ideas out as possible.

Once I had all ideas on paper, I created user flows, sitemap and wireframes. This helped me see early road-blockers, missing content and experiment with conceptual models. Since most webpages were content-heavy and couldn’t be accessed through the navigation menu, it was important to establish a hierarchy. Because of development and time constraints, I had to design within the framework of the current website. I improved usability by simplifying the primary and secondary navigation menu by removing or combining content from the current website.

DesignAs far as visual design, I envisioned the website to be a combination of both SolarCity and Tesla due to the acquisition. Sleek and modern like Tesla, yet approachable like SolarCity. Using both Tesla and SolarCity as my guide, I defined the typography treatment, color palette and created all iconography for the website.

To add visual interest, my team and I came up with the idea of using an angular shape for each module to represent a roof.

On the Residential page, I wanted to visually show the 5-step process to going solar using animation. The idea was that the user lands on the page and clicks through to view each step. While the user clicks each step, the background image transitions from the sun to the solar panel installation to the well-lit home. The simplified steps and visual transitions was meant to educate the user on how solar works and how easy the process is to go solar.

Results/Insights

Due to time and resources constraints, the development team didn't get a chance to build out the other sections of the website. After all, the homepage and residential section were prioritized because it is where most of our leads are generated from. Considering the fact that we only had one developer, one copywriter and one designer with a 4-week deadline, the outcome of this project was impressive. As a result, this is what happened within the first week of launch:

After the launch, I had to switch gears to design the energy pages on Tesla.com–so I didn’t get a chance to gather user feedback and work on the next iteration of the website. But if I could go back to make some changes, I would:

· Conduct user testing, as I think this could have improved the overall experience· Considering that our users are mainly middle-aged men and women, it may be a good idea to increase the current body font size a few sizes up as 15px seems to small· Work with a developer to refine some parts of the overall design such as interactions, hover states and other minute details.