superbloom
/plant stories ˈ celebrate life/
project summary
I collaborated in a team of four to design and implement an app to address the key needs of people who have lost a loved one: a strong community and a safe space to remember and celebrate their loved ones. We started our project by conducting in-depth user and market research regarding mental health generally. Our scope narrowed as we realized that most of our needfinding interviews included a common themes of loss and grief. Through low, medium, and high fidelity prototyping and user testing, we iteratively refined our ideas to reflect the heuristic evaluations.
project details
Project Type: Stanford CS 147 & CS 147L Project
Role: UX Engineer, Mobile Developer
Dates: September 2024 - December 2024
Tools: React Native, JS, Figma
Deliverables: Figma (med-fi prototype),
Impact: 1st Best Visual Design, 1st Greatest Personal Impact, 2nd Best Poster Design, 3rd Most Novel (awarded at CS 147 Final Project Expo out of 29 teams)
problem
Individuals who have lost a loved one often struggle to process their grief and feel isolated.
How might we both cultivate community and encourage positive emotional processing?
How might we balance the seriousness of the topic of loss, while designing a celebratory experience?
solution
superbloom provides a “virtual memorial” space for users to commemorate the loss of loved ones and heal. It allows users to: plant their private and public garden, where each flower is a piece of memory; find community by interacting with friends' gardens; and host superblooms, which are dedicaed memorial events that others can collaborate on.
final product
process
based on the Stanford d.school design process
01 - empathize
We initially conducted three needfinding interviews (participants of all ages, race, gender) regarding their mental health and emotional wellness. It was intentionally very broad to let the users guide us to a more targetted group. We were lucky that our interviewees were open enough with us to share their experiences with loss and grief, which motivated us to narrow our scope. We then interviewed three more individuals, who all experienced loss of a loved one. Through these interviews, we were able to create Empathy Maps for each interviewee to better understand the "what" and "why" of their actions/statements.
02 - define
As we unpacked the six interviews, we synthesized the outcomes by creating Point of View (POV) and How Might We (HMW) statements for each participant to define a meaningful and actionable problem statement. We found that people who experienced loss of a loved one had challenges relating to the absence of a safe space to express their grief, or even talk about the loved one; lack of resources for long-term grief (i.e. only felt cared for in the immediate moments of grief); and feelings of isolation.
Example: Alan's (fake name) Empathy Map, POV, and HMW statements
03 - ideate
After defining a clear problem statement, we set out to ideate solutions by each individually defining various solutions ourselves, then coming together to collaborate and vote on our favorite ideas. We repeated this split-come-together process until we settled on one final solution.
However, after settling on a solution and as we started the prototype phase, we received feedback that our solution was not novel enough; we also realized that our solution didn't fully meet the needs of our user base. So, we went back to our brainstorm routine, above, and more intentionally rooted ourselves in the interview outcomes. This was a welcome intervention, as it birthed superbloom as we know it.
Example Experience Prototype from defined solution and assumption
04 - prototype
For the three initial solutions we had, we conducted experience prototyping via existing apps (ex. iMessage) to see if our solutions were feasible and would be received well. For our final solution, we created a low-fidelity prototype using printed drawn wireframes. Then we created a medium-fidelity prototype using Figma. Finally, we created a high-fidelity prototype using React Native (JS) (demo video above). Each of these prototypes were created with feedback of the previous iterations in mind. I was responsible for part of the medium fidelity prototype (creating brand identity and wireframe) and the high-fidelity prototype (coding the complex "superbloom" task).
Example Experience Prototype from defined solution and assumption.
05 - test
For each prototype (except for the high-fidelity, as it was the final assignment of the quarter) we conducted usability testing. For the low-fidelity prototype, we had four participants try to complete our three main task flows: planting a flower (adding a memory media) to garden, interact with someone else's garden, and create or contribute to a superbloom event. For the medium-fidelity prototype, we had four participants from the same class conduct usability testing and heuristic evaluations.
Low-Fi Prototype Testing Results
Examples of Design Changes Based on Heuristic Evaluation
UI Design Process
We defined our values in design as the following: positivity - users should experience positive emotions such as relief from using the app; community - users can connect with others with similar experiences and learn about how their loved ones are remembered by others; and outward-orienting - users should be empowered to shair their memories and turn an otherwise private process into a communal experience.
Design Ideation for Medium & High fidelity prototype
Alongside user testing results and heuristic evaluations, our design iterations were also fueled by balancing our values in design. For instance, when considering positivity and outward-orienting values, an over-emphasis on positive remembrance might take away the authenticity of sharing all emotions associated with the memory. So, our design emphasized the distinction between a private and public garden, to give the user autonomy regarding what they share with the community and keep to themselves.
To take a closer look at our designs, visit our final Figma wireframe.