Kelly Phillips
 
hero-image-15.png

Nod
An interaction design project for Hopelab

 

PROJECT OVERVIEW

During a week-long sprint with Cactus, my design team and I worked with Hopelab on Nod, an app that helps college students to take social risks. With the phrase “awkward is normal” in mind, my team and I developed a notification deployment strategy for the app, as well as delightful interaction patterns for the reflection portion of the app to help Nod resinate with its target users.
1-week project completed with Sarah Cohen and Karen McClellan.

ROLE

My responsibilities included UX design, UX research, visual design, and interactive prototyping. I collaborated with my teammates on the UX research and design phase, and was individually responsible for the illustrations and animations.  

DESIGN SCOPE

Online Research, Interviews & User Testing, Persona, User Journey, Rapid Sketching & Ideation, Wireframing, Prototyping


PREFACE

Design is translation.

As we dove into this sprint, we realized a unique factor about Nod is that it asks the user to engage in a cycle that occurs on and off screen to meet their goal. Because the reflection after the challenge is key to achieving the overall product goals and improving mental health, it is essential to close the “loop” of each cycle. Our goal through the sprint was to encourage movement throughout these cycles. Thoughtfully deployed notifications help to prompt and encourage completion of each challenge, and the reflections and their design metaphors connect users back to end goals and help close the loop. Our research has shown generation Z is already invested in mental health— our job was to translate it in a way that resonates with them.

 
cycle-chart-02.png
 

THE CHALLENGE

How might we enhance and deepen reflection with delightful interactions to close the loop and drive learning?

Joyful reflections and their design metaphors connect users back to end goals and help close the loop. Our goal was to use the creative interactions to enhance the reflection process in a way that resonates with Gen Z.

Jump to solution

color-3.png
 

RESEARCH

Interpreting insights

During our research sessions, we conducted 12 user interviews with students on the University of Colorado campus. Along with this, we dove deep into secondary research around Generation Z and what resonates with them the most. This information directly informed our tone, notification styles, and interaction ideas, and was then used to direct sketching sessions.

 
affinitymap-12.png
 
 
 
 

Personas & User Journey

Understanding the ideal user

Nod’s ideal users are students who are the most at risk when entering college for the first time. My team and I decided to create three different personas, each representing a different type of college freshman. Our main persona was Eric, “The Loner”, who spends a large amount of time in his dorm room gaming online with his friends. Along with Eric, we created Kaylie and Margot. Kaylie, “The Small Talker”, has a large friend group, but feels like her connections are only surface-level. Margot, “The Go-Getter”, doesn’t feel like her relationships are lacking depth, but she’d like to learn a few more life skills that might help her in the future. From here, we created user journeys to help us understand how Nod might organically fit into each persona’s day through message, channel, and timing.

 
 
 
 
 

Rapid Sketching

Sketching against opportunities

From here we did a rapid sketching session, including IDEO’s 30 circles method, that was informed by our previously collected research. These sketches were starting points for locations and times where notifications might be deployed, as well as ideas for delightful interactions.

 
 
notes-2-15.png
 
 

Interaction Design

Rapid designing and testing to create a sense of whimsy

 
color-3.png

INTERACTION DESIGN

Using Cognitive Behavioral Therapy to create delight

With our insights in mind, we worked with the Principles of Cognitive Behavioral Therapy to draft interaction ideas that might spark joy with our Gen Z users after reflecting on an experience they’ve had. During our user interviews we asked what students’ go-to Instagram accounts were when they needed a laugh or smile, and what they might send their friend who was having a bad day. Some of the most popular answers were things like cute animals, funny fails, memes, and inspirational quotes. From here we developed an organizational method to keep track of our brainstorms and the CBT principle wrapped into them.

cbt-03.png
 

INTERACTION DESIGN

Conveying animation with paper prototypes

Due to time constraints, my team and I decided to use low-fidelity paper prototyping methods to conduct user testing. Using printed iPhone frames, clear acetate paper, and creative tools we created paper versions of the delightful interactions we brainstormed. The goal of the paper prototypes was to gain insight to how these interaction patterns resonated with our target audience, and see where we could iterate and move forward.

 
clouds.gif
balloons.gif
turtle.gif
sunflower.gif
 

INTERACTION DESIGN

User testing with interactive prototypes

We had overwhelmingly positive reactions to the paper prototypes that we tested. Even when testers were informed of the CBT principle associated with each prototype, most seemed to embrace and understand the metaphors we created. One thing we realized was the importance of testing with interactive assets. Those who we tested with had an immediate change of mood between us approaching them, and them seeing the paper prototypes we wanted them to try out.

 
 
 
 

User Testing Quotes


"I get it, this is me actively turning my day around."
⁠— student, 18.


"I would chill on this app."
⁠— student, 19.


"I love how wholesome this is. This would ground me."
⁠— student, 18.

INTERACTION DESIGN

Turning physical into digital

The final stage of the interaction design process was translating the paper prototypes into digital animations. The information gained from user testing allowed me to choose the most popular interactions for the final versions that would be presented at the end of the week. Using After Effects, I was able to capture the essence of the overall design in a way that could be delivered to the clients seamlessly.

 
 
ezgif-3-b0edfcfdf6ba.gif
 
color-3.png

Client Work

Results of our sprint

As a result of our week-long sprint, Hopelab and Cactus decided to move forward with out delightful interaction designs for Nod. With the assistance of an illustrator, they created a final version of our designs.

 

FINAL TAKEAWAYS

Breaking out of my comfort zone

Because this was my first design sprint with a real client/brief, the takeaways from this project were invaluable. During this project I took on the role of Sprint Master to keep my team on track, and dealt with the challenge of managing personalities much larger than my own. During the week I realized that forcing myself out of my comfort zone during a project about embracing the uncomfortable was the best thing I could have done. I was able to fully empathize with our target users along the way, as well as Nod’s message that these tough moments will help me grow as a person.

 

go home 👋🏼

color-3.png