This project was created for CS147, a 10 week intro to HCI course. I worked with a team of 3 other students, winning an award within our project category of "Behavior Change for Everyday Life."

Following the completion of the course, I returned to the project in my own time to redesign the interface and to implement extended features.

We began by interviewing a wide variety of people about their daily habits, starting by simply asking each person about their routines and pursuing anything that piqued our interest.

In choosing our interview participants, we specifically sought out participants that were outside of our own realm of experience: older and younger than us and separated from the unique culture of stress and achievement at Stanford.

We created an empathy map for each interview to help us identify any surprises, harmonies, and tensions to reveal potential problem spaces:

"Part of my self worth is based on productivity; I don't know if that's an internal or external force.”

Our interviews helped us realize the importance of the dynamic between actual productivity and self-perceived productivity, allowing us to narrow our POV to address people struggling with feelings of aimlessness and lack of control when targeting long-term emotional goals.

Interview artifacts: sticky notes from interviews sorted into categories to help synthesize ideas.

From these initial interviews, we narrowed our interview guide and conducted a second round with new participants, this time asking participants more specifically about their relationship with productivity and control. For each of these interviews, we generated a wide variety of "How Might We" statements, then voted for our favorites to better define our problem space:

HMW decrease people's reliance on external motivation through contextualization?

HMW help people to better focus on what's in their control rather than what's out of it?

HMW shift focus to HOW to achieve a goal rather than WHEN to achieve it?

Brainstorming artifacts: on left, generating HMWs from our interview POVs; on right, generating and voting on hypotheses for solutions for each HMWs.

For each of our top HMWs, we ran another cycle of brainstorming and voting to generate a potential solution to each. To test our hypotheses, we asked a new set of participants to engage in a variety of experience prototypes, separated from any apps or wireframes and instead centered on specific exercises.

"The Funnel"
We asked participants to write their to-do list as it exists right now, then to reframe and start instead by writing their long-term, future-oriented goals then working back to specific tasks and reflect on how that made them feel.

"Switching it Up"
We asked participants to move to a new location between every class and task on their calendar, specifically focusing on places that they've never been before, to see how this affected their productivity and attitude.

"Rememory"
We asked participants to look through their camera roll, picking out photos and plotting them on an emotion wheel and on a grid from negative to positive and from major to forgotten.

Experience prototype artifacts: photo from "Switching it up" on the left, "Rememory" on the right

From these prototypes, we collected some key insights to inform what kind of experience we wanted to provide for users:

Being asked to set long-term, future-oriented goals boosted internal motivation.

Being asked to reflect on positive memories helped participants feel more optimistic.

Being asked to define emotional goals helped participants to feel better about doing things that weren't "strictly productive"

Finally, as we set out towards our final product, we defined three key tasks that we wanted our product to achieve, using these as our north stars throughout the prototyping process. Notably, we define that wanted our users to be able to...

1. Create long-term goals

Help users set growth-oriented personal goals

2. Track personal progress

Help users contextualize their achievements while minimizing stress

3. Practice personal reflection

Help users center gratitude and reflection to improve self-perception and general optimism

Outlining these user goals helped us define a clear north star as we delved into sketching thumbnails.

Before kicking off our thumbnail generation and prototyping, we began by defining some key in-app vocabulary to guide our ideation.

visions - long-term goals and aspirations

mementos - individual units tracking progress towards a vision

We began with broad brainstorms, going wide and incorporating fun potential themes like plants and galaxies before narrowing in.

Selected crazy 8 sketches depicting potential interfaces.

In the end, we came to a guiding interface idea: a feed, but without the social media. This interface was a clear choice because it was familiar and intuitive experience for users, it lent itself well to tracking chronological progress with smaller components (i.e. posts/tweets)

With this framework in mind, we started sketching out low-fidelity versions of the task flows.

Screenshots from Figma showing intended flow for task 1.

Our first pass at prototyping the UI involved a home page that displayed all of the user's visions in a list. From there, users could click on a vision to see the respective memento feed and track their progress toward that goal.

We imported our sketches into Figma to add interactivity, then conducted user testing over Zoom with new participants to identify friction points in the UI and any points of confusion to streamline our user task flows.

Screenshots from Figma showing intended flow for task 2.

Some important takeaways from our low-fidelity prototype were the importance of effective navigation and offering simplified choices (for example, in the new memento buttons) to better guide users.

Another important challenge that we noted when moving on to the medium-fidelity prototyping was that users felt overwhelmed by the reflection questions and didn't quite know what to write.

In addition to fixing the issues uncovered by the initial prototyping, we made some larger changes and feature introductions in the next round of Figma prototyping:‍

Changing the home screen to prioritize users viewing all mementos at once, to allow more holistic reflection

Using color to distinguish between different visions in the new home feed

Combining all the memento types into 1 for a streamlined process.

Screenshots showing changes between initial sketch prototype and refined Figma prototype.‍

We conducted further user testing with this prototype and completed a thorough heuristic evaluation to identify more spaces for improvement.‍

Users wanted to be able to edit their existing mementos and visions

There was no warning before users deleted an existing memento

Some of the empty state text wasn't descriptive enough

Users weren't sure which mementos they should favorite or what that meant

Reflection prompts were uninspiring at times, and users wanted to be able to create their own

mementos were too large on the home page

After writing up our heuristic report, my group presented our prototype and evaluation at the class expo for CS 147, winning an award for achievement in our category of behavior change for everyday life!

After finishing the course, I returned to the project alone to redesign the interface and strengthen my front end development skills by fully implementing the app. While we had a rough skeleton in React Native with some of the basic pages set up, the aesthetics and functionality were far from complete.

I developed in React Native and Expo, adding Firebase for cloud storage, and continued adjusting the UI design based on usability heuristics. I identified some key design changes and additional features and worked methodically to bring our prototype to life!‍

New Features:

Support for editing memento text and vision category

Support for editing vision colors and titles and for archiving, unarchiving, and deleting visions

User authentication in Firebase (so users can return to see their mementos later)

Support for image uploading ‍

UI Changes:

‍Combining reflections and mementos into one singular task flow

Unified design with specific colors and fonts

Eliminating extra media types on "new memento" page to simplify experience and to direct focus towards reflection prompts

Sorting mementos with time periods and making them collapsible to help progress more visible