internal Values Survey
A fun, word-color matching interactive survey for kids
What I Did
-
Character design
-
UI / UX Design
Other Team Members
-
NASTYA_RMN – Illustrator for Tier 1 (Fiverr)
-
Isaac – Architect
-
Avadh – Front End Developer
Tools I Used
-
UX Pin
-
Figma
-
Photoshop
-
Illustrator
Project Timeline
-
1.5 months including design and development
The Brief
Motion had proposed an interactive survey experience to CIS:
“To inculcate a sense of belonging, a survey tool is created to facilitate all 3000 students to match the values with CIS colours. The aim of the exercise is to give them a voice in the embodying the values.
More than a survey, this will be an interactive experience that takes into consideration the wide student age range.
The survey will be carried out during the UN Week from 8th to 12th March 2021.”
CIS Values
User Flow
Approach Tier 1
Value Colour Match
Tier 1 Character Moodboard
Tier 1 Style Frames
Tier 1 Summary
Approach Tier 2
Value Colour Match
Tier 2 Summary
Tier 2 Inspirational Quotes
Rolling up my sleeves
Tier 1: Children characters
As usual, I turned to Freepik and looked for children characters that I could use for Tier 1.
Initial Samples I Prepared
Oliver
Sarah
Client Feedback
The client had some feedback on the first draft.
-
Needs diversity (client suggested Sarah could be Asian since it’s Singapore)
-
Needs CIS uniform
Reiteration
I modified the characters based on the feedback.
Interaction Design Approach
I wanted the experience to be exciting, fun, and stimulating for the kids. So, I added a lot of elastic motion to the clickable elements, and I added a confetti effect on the headline text each time a selection was made.
I used the same approach for both tiers.
First UI Sample
Client Feedback
-
Use CIS red for the buttons.
-
Reduce pencil size.
-
Remove background from text.
-
Remove sky from illustration.
Tier 1: Creating the Scenes
The client required the following characters in the scenes:
-
Curiosity – Oliver
-
Collaboration – Oliver & Sarah
-
Creativity – Oliver
-
Generous – Sarah
-
Respect – Oliver & Sarah + 2 or 3 of their friends
To save time, I looked for illustrators on Fiverr who could work on the scenes while I worked on the UI and UX of the survey. I found Nastya on there and contracted her for 5 scenes featuring Oliver and Sarah (and 2 other characters that she could come up with).
Final Illustrations
Apart from removing the sky from the Curiosity scene, I was pleasantly surprised to see the rest of the illustrations approved without revisions. Good job Nastya!
Curiosity
Collaboration
Creativity
Generosity
Respect
Tier 1: Final UI Design
Tier 2: WPAP Art Style
The client had already shared the WPAP style photo of Steve Jobs with me, now I needed to find (or create) the same style photos for the remaining 4 personalities.
I was able to find WPAP style photos for Einstein and Mandela on Shutterstock, which was great. Now I was left with Branson and Keller, both of whom I couldn’t find such photos online.
So, I took their real photos and applied the WPAP style to them in Photoshop. I had to really increase the contrast and levels so I could clearly see light and dark areas for tracing.
Results
Compared to original reference photo of Steve Jobs.
Tier 2: Final UI Design
Results
This project was so much fun for me. I got to create illustrations and art styles that I hadn't dabbled in before. Overall it was very exciting and satisfying to be a part of this project.
The team at Motion was amazing too; they were very cooperative and super receptive to any ideas I'd throw at them.
The survey was conducted successfully from 8th – 12th March 2021, and we provided a report to the client at the end.