Johnson & Johnson

Sun Hero

The Brief

The sun can have very harmful effects on the skin if we don’t protect ourselves from UV rays. Our client, Johnson&Johnson, gave us the challenge to design and create a campaign aimed at parents and children to ensure that children are always protected under the sun.

The main goal of this campaign was to ensure children remain still whilst parents apply sunscreen to their face and body. By gamifying this experience, kids are more likely to look forward to their next application, as well as providing an innovative way to remind parents of re-application.

Team & Role

Working with our New York office, I lead both the UX and UI for this project. My key responsibilities included designing the whole experience, the game logic and the UI of the app. The team involved a creative director, an illustrator, two 3D modellers, two developers and a project manager. This project was particularly difficult as being the only team member overseas made communication and coordination extremely important. I was also in charge of leading client meetings with over 20 participants and focus groups, including the analysis of the results. I also ensured that everything I designed was well-documented and explained. 

User & Audience

The Hero - Child
Ages: 4-8
'Your child is about to become a superhero. All they need is their super lotion which gives them incredible super powers. The only catch is you have to stay still while it’s put on otherwise your powers are too weak to be a true hero. Still that’s easy for a super hero right? Staying still? Piece of cake! POW!!!!'

The Sidekick - Parent

'You are the Alfred to their Batman. Every 2 hrs you will get an alert to call your little hero back to base and make sure they get another coating of super lotion before you send them off to do battle in the name of good once more!!'

Design Process

I was brought into the project after the conceptual stage, meaning that concept had already been presented and accepted by the client.

The proposal: Create a superhero themed game, with the aim to encourage the child to keep still in order to transform. The sun and sunscreen contain magical properties that will transform any kid who wears the lotion into a superhero. 

The client's requirements:
- Fulfil the aim of keeping the child still whilst their parent applies sunscreen on them
- Gender neutral heroes that are represented using a face filter (similar to Snap)
- Front-facing camera
- iOS 11 only
- Access to additional information about the weather, UV rays and the client's products
- An option to add a second hero
- The ability to enter information about the child's exposure to water (this can alter the amount of time in between re-application of the lotion)
- The use of AR in both the face filters and in a potential mini game
- The experience should be flexible in any situation - from a day out in the sun to a week-long holiday. The AR activation should offer variety and incentives to encourage repeat engagement with the game, and therefore the application of sunscreen.

I created a high level flow of the experience that satisfied both the client's requirements, as well as the key aim of captivating 4-8 year old children. After a few sketches and iterations, I created a shareable flow to present to the team: 

Wireframes UX flow

After signing off on the high level flow, I started designing screen wireframes of the experience. I created flow documents as well as Invision Prototypes to be shared with the rest of the team and the client. 

Focus Groups:

We organised a focus group with parents to discuss the Invision Prototype of the above flow, mood boards for the Visual Design and some game concepts. The aim was to identify whether any important steps were missing or whether any key parts should be better highlighted in the AR experience.  

Participants:
-  9 J&J Parents
- 3 Fathers/6 Mothers
- Among them, they had 5 boys and 7 girls aged 3-7 

Learnings:
- Parents find the timer very helpful to remind them of reapplication
- The app needs to voice out the instructions for children too young to read
- A minimum of 5 minutes is required to engage the child while sunscreen is applied
- The face is the most difficult area to apply and the app should especially engage children during this process
- “The re-application reminder was great!” 
- “Unlocking new suits is a great motivator” 
- “Too much text for the parents, needs to be simpler.” 
- “Needs to be gender-neutral.” 
- “I don’t want to touch the screen after I applied sunscreen to my child’s face.” 
- More clarity was needed to establish which screens were for the children and which were for the parents
- Parents liked the idea of education, but wanted it geared more towards the kids to help them learn about the importance of sunscreen in a fun way
- Mothers were concerned that the phone would be in their bag and they wouldn’t hear the reminder

After gathering all the feedback and sharing this with the client, I amended the flow to the final version below:

Game Mechanics & Game UX

The game was based on the concept of a superhero training ground, where four skills are needed to gain full potential as a superhero. To ensure the experience was both re-engaging and that the sunscreen was applied multiple times throughout the day, I decided to split the training into four separate application sessions. On the first day, a minimum of four applications would ensure that the child is protected and has trialled all the different skill games. From then on, the child was free to pick whichever skill they wanted to train in. Stats, high scores and new hero masks can be unlocked throughout this process - changing the sunscreen application process from a tedious task to something enjoyable and fun to look forward to.  

User Interface

The objective of the interface was to keep the app superhero themed. We needed the game screens to be very visual and clear, as most of our users might not be able to read yet. The screens dedicated to the parent would be more informative, but we still wanted to maintain the superhero thread throughout to involve the parents more (as their sidekick). We opted for bold colours with a comic book/Top Trump-inspired design. 

Outcome - Ongoing 

The project is still in progress.