Critique & Redesign — Pay Kindness Forward
In my quest for a new UX/UI design role, I recently completed a design task set by a London-based marketing agency. This was to critique and redesign their Pay Kindness Forward campaign, in association with Expedia. The campaign encourages selfless acts of kindness with deeds that are submitted to the site. With the aim that kindness would spread all over the globe. This is a great idea and a core message I could really get behind. My first impressions of the existing website were as follows (I have highlighted areas in orange.)
The introduction page is a nice idea. However, in the world of short attention spans and the quest for immediate gratification, a two view, slowly animated introduction like this does not enhance the experience. Especially when you’d like users to return to the site to continue sharing. I noticed that the background image seemed a little low-res, or perhaps it was just me. I wondered about the effectiveness of the logotype and whether it was sending the right message. Why is ‘forward’ bold when the core message of the campaign is to spread kindness? I’d argue that ‘kindness’ should be highlighted instead.
The copy below the logo, in my opinion could be a little tighter. Furthermore, the secondary call to action, ‘Add a deed’ is somewhat hidden. It’s not clear or differentiated from the text, besides an underline. Users should be drawn to it. The music is nice idea because it provides another layer of immersion. However not all users welcome audio, so I would provide an option to mute the sound at the first view the user sees so they can mute it as soon as possible.
The Sky view. The left and right movement buttons are not that easy to see, given the variety of light colours behind them. They should be clearer and will only really be useful when there are a large number of deeds. I question whether it needs them at all — the entire sky view could be a rendered 3D sphere that a user could move around by dragging with the cursor anywhere. That would also be more mobile friendly — swipe gestures and pinch to zoom etc. The deeds themselves are not that well presented. Why can’t information about the deed be shown immediately upon rollover instead of having to click the scaling profile picture? Always aim to reduce the steps the user has to take to reach their goal. In this case to view the deed. Furthermore in the sky view, it’s not clear how many deeds are viewable or if there are any. Only when you randomly roll over in the area might you stumble across one.
Why are the bottom right options lined icons when the other UI elements are filled icons? Consistency is important. I don’t feel the separating lines between the icons are needed. I’ll touch on the share icon later.
While it’s a nice idea with the sequin-like stars all together, this view doesn’t provide any functionality that we don’t see in the map view. It’s visually pleasing and I understand that’s why it was used, but it doesn’t add value to the experience.
The first thing I noticed when I logged in and added a new deed was the music stopped. Why? It takes the user away from the immersion. The add deed view isn’t that inviting. It doesn’t look like something people would want to fill out on a regular basis. When I tried to pick a date for my deed, I found myself being able to select a date well in the future, for example two years ahead. Of course this shouldn’t be an option. Also I’d consider having one ‘send’ button with social network icons highlighted or not to represent their use when submitting. Cleaner. The ‘X’ icon to quit the deed could be clearer. Perhaps a little small and jars with the border of the deed window.
When viewing a deed, I noticed many times that for deeds that were a few sentences or less, there was a tiny scrolling bar (not visible above) that was difficult to use. Frustrating when looking at multiple deeds. The icons below the deed are also lined. The good thing about these is that the facebook icon is present — instead of being hidden as a pop up in the share icon. It would better to have three icons in a row — all the social icons. So the user can see and immediately find what they need, instead of having to go through a single share icon first. Also curious how it was decided that the facebook icon should be on its own. I would consider removing the email icon to reduce clutter. 90% of users know how to copy and paste. The website also has a translate icon. Why? The user should not have to click a button for content to be translated. The website should detect, either with location or the browser’s language to automatically translate any text in another language.
Why have a pop up for ‘add deed’? It renders the ‘+’ icon redundant. Either devise an ‘add deed’ button or keep the ‘+’ icon without the pop up. Faster, easier to use = better user experience.
Map view. A good idea and something I think has lots of potential. And while I appreciate the plan was to initially focus on the Nordic regions and expand, UX decisions are affected. For example using colours to indicate a region. What happens when you need to indicate the other regions of the world with colours? You’ll run out of colours and eventually they will confuse the user. It’s almost always better to design for scale.
Perhaps the zoom in/zoom out buttons could be bigger for ease of use. I also wondered why the map wasn’t a 3D globe? Much like Google Earth. Navigation would be easier and it would improve the mobile experience.
These were my impressions. I then explored a new logo, something I thought would better represent the campaign. Not only does this say that you should pay forward the kindness of others, but it also asks viewers to be kind themselves.
Initially I would have liked to understand the intended users at a greater depth, but of course that can only be achieved with access to primary and secondary research. So I started coming up with sketches for a desktop design. I explored a few different directions, developing some before coming up with final designs.
The splash screen. This view is what users see when they visit the site for the first time. This design removes the sky view to focus on the world map. With a dark colour scheme to represent a world in darkness and growing orange circles to represent kindness — giving light to the world.
A simplified header message sits underneath the new logo. Accompanied with the primary call to action beneath. A simple, type bar that users can begin to type deeds in. It invites users to share their deed by asking the simple question — ‘Done something kind today?’. This can also change to be ‘Was someone kind to you?’. After around four seconds, it could also begin typing out placeholder deeds. As if someone around the world was typing it live, there and then. The length of the type bar is small, and thus encourages users to write succinct, short deeds. This maximises twitter character friendliness for sharing.
This type bar turns a previously daunting and/or slow process into a fast, interactive, maybe even fun experience. Below is what the user would experience if they were logged in to the site via Facebook. If not, the user would be prompted to sign in after they had finished writing their deed.
This experience is largely based on natural language processing. A very interesting technological area that allows for more human conversations with computers. In this instance, in ‘When?’ the user could write anything and the computer would figure out what that is and choose the correct time. So, if someone said ‘two hours ago’, it would understand and do that. Or more complex ones like ‘last week’. It would take today’s date and go back a week to that same day of the week. The user could enter a date or a more specific time. The same technologies for location.
I thought in terms of marketing, asking someone whether they would like to nominate someone on Facebook to do something kind and submit a deed would be powerful for traction. Similar to the viral ALS nominations. This could be replaced with a simple — ‘Share on Facebook or Twitter?’ question if that would be more effective. Then of course a user response of ‘Yes, twitter’ or ‘no’.
One of the important strengths of the type bar is that it turns into an animated progress bar. People love progress bars. We naturally want to know what’s going on. So if you visually show them how much they’ve got left to do in a process, they’ll love you. I was thinking that when submitting there could be an animation of a plane flying off from the centre — to promote Expedia.
I think this is a much faster, more natural and easier way to record a deed.
Here’s the view a user would see if they were logged in and visited the site.
Similar to not logged in. The user’s profile picture replaces the message and top left log in UI. Something I hadn’t touched on in the first design was the bottom row. There, we see the live number of deeds recorded around the world, a live stream (every 4 seconds refresh) of the latest deeds from users and a globe icon. When users see the live stream of people’s deeds, this can help them feel more relaxed/less shy about posting their deeds. When clicked or touched, the globe icon will take users to the map.
The map view. A 3D, fully interactive globe. I found this placeholder map image on Google to illustrate this. Ideally it would be less detailed, with perhaps lines to separate countries. The live orange spots represent deeds in those areas. The bigger the circle, the more deeds in that area. If deeds are sparsely distributed in an area, the circle will have a greater blur. An algorithm would need to be created to provide accurate geolocation of deeds and rate of growth etc. For desktop users, navigation is achieved with dragging the cursor and zooming with the zoom UI controls to the right. For mobile it’s a case of swipe and pinch to zoom. The globe icon has changed to a simple plus. This allows users to add a deed — returning to the previous view. Simple and quick to access. A search by city function is available too. Similar to the type bar, it allows users to search by city — this will automatically move the globe to the typed city’s location.
When a user clicks/touches a kindness spot, the globe moves to centre the spot and data animates in to display on the left. Here we have all deeds in that spot’s area, organised into the cities they were submitted from. These cities can open or close at a click to show or hide the respective deeds. The first city (alphabetical order), will open automatically. If there is only one city in that area, the close option will not appear. All scrollable of course, either with the mouse wheel or click and drag. There is also another natural language type bar that allows users to refine deeds by time. You may notice this location is in Spain — users would submit in their local language and this would be automatically translated for users.
I thought that the website could also offer little status updates at how cities were progressing. Eg if you see, the top left has ‘Rio de Janeiro is on a roll with kindness!’. This could prompt users to explore parts of the world they haven’t before.
Note users can log out by touching the users profile picture — there they will get a prompt — in the same style as the deed submission or spot select views. The mobile version of the type bar shows how, like the desktop version, it expands vertically for longer deeds from the middle outwards. Deeds are displayed in a staggered form to improve readability on a smaller mobile screen.
I imagined how the website/campaign could be presented for embedding in other sites like Facebook.
One of the things I had considered was adding a heart/favouriting system for deeds. Though I decided against it because it would turn it into like any social network — users would vie for the best deeds (opens up the possibility of fake ones) and it would become a reward based activity. Not when it should be doing something kind just because it’s a nice thing to do. I also thought about adding a number indicator for spots. But in the same vein I thought it might inspire competition. Then again does the spot feature in itself already do this?
I thought about a mini-map UI element for fast navigation to parts of the world. Would this complement the city search or would city search be enough in itself? Testing, feedback and further iteration would answer these questions and allow me to further refine the UX.
I hope you enjoyed my take on the campaign. I would have liked to spend more time on it.