company

2021fb39-9835-4a04-8e91-f1ddc97a9098.png

Social Solar is a 3rd party service that connects owners and renters in New York City with clean energy suppliers. 

Teammates

Product Manager (CEO)

UX Designer

Visual Designer

Marketing Lead

Front-End Engineering

Back-End Engineering

What I did

Wireframing

Storyboarding

Interaction Design

Usability Testing

Impact

1. Created the first desktop experience for Social Solar

2. Proved increased engagement through small interactions

3. Allowed people to connect with the offered services

During the first meeting with our client Social Solar, we were given a mobile web-app prototype that just went live at the time of our meeting. We identified Social Solars biggest need to be building an enhanced webpage of the mobile web-app for desktop or large screens in general. We needed to focus on enhancing and differentiating their service from others.

SOCIAL Solar Mobile
old_ss@2x.png

Social Solar

Tools used:

logo-adobe-illustrator-png-4_edited.png
Adobe_Photoshop_CS6_icon.png
figma-logo-E4E21D3AEA-seeklogo.com.png
airtable-logo-216B9AF035-seeklogo.com.pn

Duration:

15 Weeks

Overview

My Role:

ux Designer

 

The Challenge

We defined the challenge with our client and came up with a goal that we used during our entire design process to remind everyone of what we are trying to achieve:

Create a customer landing experience that motivates users to sign up for a plan.

Design with an exploratory phase that informs the user of the benefits of using sustainable energy.

Social Solar also gave us major insight into their main consumer base and the personas that characterize them at our first meeting. They identified two personas with one being price conscious and interested in saving money whereas the other one is environmentally conscious and has the goal of going green.

User journey

 

Understanding

the User

The first thing we needed to do is understand the product better as well as what the user is going through when using Social Solar's services. To better understand the user behavior we analyzed the research reports given to us from Social Solar and created a User Journey Map which would help to uncover moments of both frustration and delight throughout a series of interactions, and reveal opportunities to address possible pain points.

User
Journey
Map
ss_journeymap

We identified that the second stage of the experience land on site is where our biggest opportunity lies. People at this stage are usually already consuming information on the site but have only discovered it. Depending on how well designed the website is and how relevant the information is for them, they are more likely to feel either motivated and enthusiastic to continue exploring Social Solar or confused and overwhelmed and get of the site.

 

If we are able to get the user excited about the services they are more likely to finish the sign up process which can be exhausting to go through because of all the requirements needed. 

 

Progressive Enhancement

A mobile-first approach helped us to identify priorities first. We started with the foundation, which was the existing mobile design, and then used those elements to re-create those elements and additions for bigger screen sizes.​​​​​​​

These are the main mobile elements that we identified:

  • Hero header

  • Sign up CTA

  • 3 steps of choosing clean energy

  • Partners

  • The environmental and social impact

  • Questions/contact us

  • Footer

Main
Mobile Elements

WIREFRAMING

After understanding the scope, identifying our goals, and evaluating the existing content, we came up with wireframes that would help to find the best possible way to arrange all the elements.

ss_wireframes.png
wireframes

prototype

The prototype is a combination of all the main elements with enhanced features. The new design does not take away from the first impression a user gets but makes it better with information that is easier to understand and more accessible. 

 

The mobile web-app that we started off with was only a prototype and had therefore designs and content that was not fully developed yet. We rearranged and re-designed the section of the explanation of the product. By adding relevant iconography and rephrasing the sentences, the overall readability and accessibility has increased.

DESIGN

 
Picture1.png

HIGHLIGHTS

 

LOW-Effort

interactions

Through User Testing on our first prototype we learned how impactful the small interactions were. It is not easy to keep people engaged by only providing information unilaterally and it is crucial to keep people on the site during their exploratory phase as that is where they decide whether or not to stay. 
The interactions that worked well in user testing were first an energy consumption calculator, which is placed at the top half of the page, so people can interact with and get a personalized result. We believe that by adding this, people are going to be more interested and curious about what impact Social Solar can make.

interactive
Calculator
f1279b33-b15f-46e3-a879-1e5e38be78cc_rw_
interactive
header

showing impact

Another element that showed big impact in Usability Testing was showing the impact through various visual elements from different perspective​​​​​​​. This allows us to help people understand their possible impact if they decide to use Social Solar and their services.

We identified the home page as our biggest opportunity to get the users attention and interest, so we wanted to add some infographics to differentiate Social Solar from other suppliers by showcasing convincing and appealing evidence of what impact the user and Social Solar can make together.

Showing possible
impact
Picture10.png

RESULTS

a NEW PRODUCT

This was the very first website that was accessible on all devices other than mobile, which is a huge step toward making the services of Social Solar accessible to a much larger audience.

We were able to expand on the information provided to people and through user research we could make first iterations to improve the design. The next steps are to monitor behavior and continue doing research to further improve the experience. Important metrics to consider are: 

#

Number of

Sign Up's

%

Percentage of

new Sign Up's

vs. renewals

Average

SESSION DURATION

 
 

SOcial

Solar

TEAM:

Veronika Kostova

rAN hAO

Felicia Tu

Yiqiao Karen Li

Duration:

August 2019 - December 2019

NEXT:

focus-chatbot.project

Chatbot Header.png

#ux writing

#Productivity