Memento
Mindful Productivity Tool
The constant stimulation of modern life makes it difficult for us to set goals with intention and make meaningful memories. Memento offers users a solution that isn't focused on productivity and task completion, but rather provides a space for growth and reflection.
Memento helps us to shift focus away from quantified goals and external validation, helping us to set growth-oriented goals and encouraging us to reflect along the way to orient us in our journeys.
Overview
Details
This project was created for CS147, a 10 week intro to HCI course. I worked with a team of 3 other students in the 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.
My Roles
User Researcher
UI/UX Designer
Front End Developer
Tools
Figma
React Native
Firebase
Empathizing
We began by interviewing a wide variety of people about their daily habits, then pulled out any surprises, harmonies, and tensions to reveal the problem space.
“Staying busy actually makes it easier to be productive.”
“Part of my self worth is based on productivity; I don't know if that's an internal or external force.”
"Much of my past failure was due to me focusing too much on what was out of my control."
"Power in the 21st century is knowing what to ignore."
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.
Defining Problem Space
Once we had sorted through our interviews, we used generated a selection of "How Might We" statements that helped us to better frame 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?
To test our hypotheses, we asked participants to engage in a variety of experience prototypes and 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 define emotional goals helped participants to feel better about doing things that weren't "strictly productive"
Being asked to reflect on positive memories helped participants feel more optimistic.
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 goals that growth-oriented 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.
Ideation
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 & aspirations
mementos
individual units to track progress within a vision
.png)
We began with broad brainstorms, going wide and incorporating fun potential themes like plants and galaxies before narrowing in.
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 task flows.
Low-Fidelity Prototyping
Our first pass at prototyping the UI involved a home page that displayed all of the user's visions, then users could click on a vision to see the respective memento feed and track their progress toward that goal.
With this prototype, we conducted user testing to identify friction points in the UI and used this streamline our user task flows.
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.
Med-Fidelity Prototyping
In addition to fixing the issues uncovered by the initial prototyping, we made some larger changes and feature introductions in our new Figma prototype.
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.
-poster-00001.jpg)
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
Users weren't sure which mementos they should favorite or what that meant
There was no warning before users deleted an existing memento
Some of the empty state text wasn't descriptive enough
mementos were too large on the home page
Reflection prompts were uninspiring at times, and users wanted to be able to create their own
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!
High-Fidelity Prototyping
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 vision colors and titles and for archiving, unarchiving, and deleting visions
Support for editing memento text and vision category
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
Sorting mementos with time periods and making them collapsible to help progress more visible
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
Final Prototype
Creating a new memento:
We encourage users to add thoughtful reflection prompts to deepen engagement with their goals and foster internal motivation.
Creating/managing visions:
Users can customize vision names and colors to give them full flexibility and control.Visions can be archived or deleted if users want to take a break from a certain goal and return later.
Editing mementos:
Users can edit mementos so they can curate their journey in the app.