company
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
Social Solar
My Role:
ux Designer
Tools used:
Duration:
15 Weeks
Overview
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
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.
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
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
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
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:
