Streaks app redesign prototype

Revisioning of an existing self-motivation app as a tool to help users live their values

Phone displaying a screen full of face images with the words 'Greta Thunberg: Who is she and what does she want? Here are some of the 14,000 Streaks users who read this today, including you!' Links to the Figma prototype for my Streaks app redesign project.

Face grid by CrushPixel user Isantilli

Top left photo by Pixabay user Free-Photos

^ Problem statement

Many people who want to make a difference in the world feel that they don't have the time and energy, or that they're too small to matter. How might we enable and inspire them to work for positive change?

^ Client

Crunchy Bagel Pty Ltd. (hypothetical, we didn’t contact them)

^ My role

Set the initial design goal
Contributed extensively to the design of the overall prototype
Performed a usability test
Implemented two key features in our Figma prototype

^ Details

Timeline: July to August 2020

Team size: 3 students

Tools used: Figma, Adobe Photoshop and Illustrator

^ Key learnings

Skills: Working within and making changes to a design language created by another team member.

Lesson: While limiting a project's scope is usually vital, especially when the timeline is short, a strong enough team can implement a prototype with a variety of features to share with testers and get more feedback.

Summary Psychological basis Rough prototypes V1 prototype Peer and user feedback Final prototype Next steps

🡅 🡇

Psychological basis

As per the assignment in our Psychology of UX course (part of the University of Washington's Human-Centered Design and Engineering (HCDE) program), we chose to emphasize the following psychological principles:

The Fogg Behavior Model for persuasive design

Ability: The user is only asked to do 1-3 simple actions per day.
Motivation: Keep your streak going (basic idea from the original app).
Trigger: Phone notification once a day.

Diagram of the Fogg Behavior Model showing how people are more likely to act when they're 1 highly motivated, 2 find the action easy to do, and 3 see a trigger that might increase one of the other two factors or just remind them to do it.

Alarm clock icon by Kung Lao from The Noun Project

The bandwagon effect

Pressure to join many other users in taking action (also used in a prior project of mine called InLeague)
(Mild) sense of community: Users "join" advocacy groups by doing actions they suggest.
Strength in numbers: Many people acting together can make real change.

Cartoon of a horse-drawn carriage with people playing horns and a sign saying 'Act for change'

Original image by Flickr user hazlett12000, CC BY-SA 2.0 license (heavily modified)

🡅 🡇

Five screens from a rough prototype: a checkbox list of environmentalist actions, a date-time selector for action alerts, an alert screen with three actions listed along with how many other users have done them, a screen with details for a specific action, and an action-complete screen with fireworks

Alarm clock icon by Kung Lao from The Noun Project

Fireworks by Rainbow Designs from The Noun Project

Rough prototypes

Each team member created a rough depiction of a possible design direction in Figma. My quick-and-dirty prototype revised the existing Streaks UI to include:

A list of actions for environmentalists.
More effective notification triggers.
Information on the size of the "bandwagon" you would be joining by performing an action.
An attractive reward page when you complete an action.

🡅 🡇

V1 prototype

Ultimately, we decided on a much more radical departure from the existing UX, mainly implemented by my teammate Brayan, who effectively created an implied design language for us to work within. My contributions to the V1 prototype included:

A setup screen where the user captures a selfie.
A "who's doing this action" screen with a face grid borrowed directly from my InLeague video prototype, in which the user's face is featured prominently.
Orange text on the action-list pages to emphasize the number of other users who have performed each action.

Three screens from our V1 prototype: a camera view with capture and 'I'd rather not' buttons, a screen full of face icons including that of the user representing people who completed an action, and a categorized list of action buttons including orange text showing how many people completed each action

User photo by Pixabay user Free-Photos

Face grid by CrushPixel user Isantilli

🡅 🡇

Photo of a person interacting with a laptop showing a screen from our V1 prototype

Peer and user feedback

We took the V1 prototype to an in-class critique, and we each tested it with one housemate.

Peer feature requests
- More customizable timing of action notifications.
- Saved actions to go back to later.
- Others we didn't have time to implement, e.g. "forgiveness" if you occasionally miss a day.

Feedback from my user test
- Our app is similar to a website called My Civic Workout.
- It wasn't clear whether you have to do all three actions shown in the daily notification to continue your streak.
- Request to provide more action options, including the option to create your own.

🡅 🡇

Final prototype

To complete our final prototype, we worked together to narrow the suggestions from the class and our research participants down to a few new features:

"Join" organizations: I designed a setup flow where the user selects organizations that will send them curated actions (hopefully creating a more powerful bandwagon effect).
Facebook integration: This replaced the photo capture screen, and enables the user to share custom actions (and potentially other things) with friends.
Create custom actions: Ellen created this feature based on my test user's suggestion and linked it to the Facebook network feature.
List of past actions: Brayan started implementing this based on peer feedback. It doesn't currently support saving incomplete actions for later.

Four screens from our final prototype: a list of selectable image tiles with the names of advocacy groups that provide curated actions; a Facebook integration notification screen; a form allowing a user to describe a custom action and share it with either their friend network or all other users who support the relevant cause; and a stats screen showing which days the user completed actions in the past week, along with a list of the completed actions

Duwamish ceremony and Sierra Club speaker by Flickr user Backbone Campaign, CC BY-NC-SA license

Woman in BLM mask by Pixabay user Christopher Salerno

Bird by Pixabay user James Brimley

User photo by Pixabay user Free-Photos

Our final prototype got rave reviews from both the class and Professor Daniella Kim, who particularly appreciated my page with the grid of fellow action-takers' faces. She posted this message to the class Slack team: "I think that we HAVE TO share your prototype with the HCDE [department] Slack. It is such a great idea. How can we get traction on this and develop something like this??"

🡅

Next steps

At some point I'd like to improve the prototype further based on tester feedback we didn't have time to address, such as:

I would change the notification to clarify that you can maintain your streak by doing just one action.
On reflection, I decided the custom actions and peer-requested list of saved actions belonged on their own page, not with the completed actions on the stats page.
Based on more recent learning about accessible design, I'd make it clearer which elements of the UI are meant to be tapped.

Given how far our UX design has shifted from the original Streaks app, this project could potentially be developed and released under a different name - perhaps something like "ActTogether," to further promote the bandwagon effect.

Our original design

My updated version

Our original concept

My new page

Two pairs of screens showing possible revisions to our final prototype. 1: revising the text of the 'continue your streak' notification and adding an option to complete a different action than the three suggested ones. 2: Moving the custom action UX and our planned list of saved actions to a new My Actions page, changing the 'new custom action' button from gray to blue, and increasing font size.

This portfolio is released under a Creative Commons BY SA license.