Kelly Phillips
 
hero-image-15.png

A Notification Strategy + Delightful 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.

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.  

Toolkit

Pen + Paper, Illustrator, After Effects, Airtable


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 CHALLENGES

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.

 

How might we nudge freshmen to take risks in a way that’s seamless to their college transition so that they stay engaged with their social goals?

Gen Z are bombarded with notifications, and excessive alerts can lead them to delete an app. Our goal was to balance user control with inference to deliver the right message at the right time, as well as connect them back to their end goal.

color-3.png
 

USER 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.

 
 
05142019-whiteboard-1-bw.png
05142019-whiteboard-2.jpg
 
 
 
 
 
 

NOTIFICATION DESIGN

Identifying key opportunities

Part of constructing the notification model was analyzing the key behaviors, and the barriers and benefits of each behavior. This allowed us to pull out opportunities that helped influence when, where and how notifications would be deployed.

 
 
bbb2-09.png
 
 

NOTIFICATION DESIGN

Deployment of notifications

Part of the final deliverable was to develop flow charts to walk Hopelab through the strategy we developed. To simplify the strategy for hand-off, the notification flows were broken down into 4 separate charts. The initial push notification chart describes the flow that users go through when completing the loop vs. failing to complete the loop. The 3 remaining flow charts dive into when Nod should send a notification depending on user preferences, and whether or not the user is committed and how notifications will be deployed in each instance.

 
 
05162019-whiteboard-4 copy.png
 
 
 
notificationchart-06.png
 
notificationchart-10.png
notificationchart-12.png
notificationchart-13.png
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

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

Physical to 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