Social Charging

<span>Wireframing</span><span>Seductive Interaction Design</span><span>Mental note cards</span><span>Visual Design (Photoshop)</span><span>Motion Design (After Effects)</span><span>Prototyping (InVision)</span>

Briefing

When I followed the minor “User Experience Design” in Amsterdam, one of my assignments was to make an app that can help electric car drivers to share the small amount of charging spots in the city. The app needs to be based on “seductive principles” to seduce/convince/help people to share charging spots. The ultimate goal is to make a user replace his/her electric car when it’s almost fully charged, so that another electric car driver can charge his/her car on that spot.

Psychological brainstorm

The psychology behind this project

I gathered thoughts on good reasons for someone to swap his/her car with a driver whose car is in need of urgent charging. The behavioral goal (to make someone walk to his/her car to let someone else use the charging spot) is quite a tough one, so I enabled the psychologist in me and started brainstorming about some theories.

The Ben Franklin Effect

Helping someone feels good. Once you’ve helped someone, you will also be more likely to help that person again in the future. The more you help someone, the more you will like that person.
Swapping a car with someone can make you feel good.

Reciprocity

If someone has given you his/her car charging spot in the past, you will feel obligated to do the same thing when that person is in need of a charging spot while you’re on it. Reminding a user of reciprocity will likely make him/her swap cars.

Pygmalion Effect

When you tell someone that he’s social, that person will act more social and eventually become more social. By telling users of the app that they’re part of the most social electric car drivers community, they will be more likely to behave towards it and share charging spots.

Storyboard

I wanted to sketch my overall concept, so I sketched a very simple story board. Users get to see an introduction, can connect their car to the app and start charging. The high five is a social gesture to represent “swapping the car” to help someone.

Signup flow – Low fidelity wireframes

Visual Designs

Micro Interactions

Prototype interaction

Check out the interactive version of my button animation!

<p data-height="265" data-theme-id="light" data-slug-hash="qZMKEz" data-default-tab="css,result" data-user="MaxDeMooij" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/MaxDeMooij/pen/qZMKEz/">Sign up input transition</a> by Max de Mooij (<a href="https://codepen.io/MaxDeMooij">@MaxDeMooij</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script>