Happy Being

New Mobile App Feature, March 2022
The Problem
Daily chaos of everyday life can distract users of a mental heath app from working towards their goals, especially when they are only working on one goal at a time.

The business identified a need to offer a vision board feature which would serve as a frequent, visual reminder of the big-picture goals users are working towards.
My Role
In this forty hour sprint, I performed the following tasks to develop the first iteration of a vision board:

1. Map the board creation process
2. Sketch possible solutions
3. Prototype the corresponding screens
4. Test the solution
5. Iterate based on feedback

I primarily worked independently, but collaborated with one other designer to discuss how the vision board would be linked from the main screen.
Day 1: Mapping the Problem
Define
User Goals:

1. Be inspired to work towards their goals.
2. Be reminded of what they are working towards.
2. Express gratitude for the work they have done to achieve their goals.

With the problem and these user goals in mind, I mapped the task of creating a vision board.
Task Map
Day 2: Sketch
Ideate
With inspiration from competitor analysis, I began sketching two possible solutions for a vision board. The first solution creates a video made of images and captions, connected by animated transitions. The second offers a static screen full of images, allowing users to tap on each one to view, enlarge, and / or add captions.

To decide which option to prototype, I consulted with the business and surveyed users. Ultimately, the video option emerged as users' preference, due to the ability to integrate into their daily habits.
Right: Vision board as a video sketch; Left: Vision board as a static board sketch
Day 3: Protoype
High Fidelity Mockup
As I developed the sketches into the prototype, one update emerged after reviewing the wireframes with the business: vision boards may not be familiar to every user, therefore there was a need for added guardrails and constraints.

With that in mind, the business asked for a solution that allowed users to create smaller vision boards, one at a time, separated by category. As a result, I added the screens highlighted in yellow below. The addition enables segmentation by category, but requires a lengthier, repetitive vision board creation process.
First iteration of the high fidelity prototype
Day 4: Test
Validating the Design
Five user test were conducted in 30 minute sessions, held in person and online with interviewees that expressed experience and/or interest in using mental health apps. The two main goals of testing were to determine:

1. If users unfamiliar with vision boards would understand how to create one & the value in doing so.
2. If the ability to segment vision boards by category was worth the tradeoff of requiring a lengthier and repetitive creation process.

User tests validated the two primary concerns above, but highlighted some additional pain-points that were addressed in the iterations below.
Issue - Major: Users valued the ability to create vision board by category, but wanted the ability to view them separately, and create the segments one at a time.

User Feedback: Users expressed appreciation for the guidance that segmented categories offered, but also expressed interest in accessing "mini vision boards" containing content from a single category.  

Revision: The categories were added to the main screen that users arrive at after completing the creation of their vision board(s). A "finish later" button was also added to the edit state list of all categories.


Issue - Minor: The ability to upload their own images is seen as highly valuable and was not recognized by two users in the test.

User Feedback: Users expressed a desire to upload their own images, but did not realize that was an option.

Revision: Altered the UI to make the upload button more clear.
Issue - Minor: Enhanced user control during creation process

User Feedback: Users expressed the desire to have the ability skip certain features (gratitude statements, notifications, and music).

Revision: Added a "Skip" button to the gratitude statement page and "Later" buttons to the music and notifications page.
Day 5: Iterate
Implement User Feedback
To address the primary concerns identified during user testing, I kept user control in mind. As a vision board is highly personal, it is critical that the experience of creating and watching it be customized to each user. The final prototype reflects an increased amount of user control while still maintaining guardrails that guide users through the process.
Graphic showing process: 1 Research, 2 Sketch, 3 Test, 4 Hifi mockup, 5 validate, 6 iterate
Final Design
VIEW Prototype

Reflection & Next Steps

Final Result: MVP Development in Progress

At the conclusion of the project, I recommended that future iterations should attempt to decrease the repetitive actions required by the vision board creation process, while still retaining the ability to divide the vision board into categories.