CODA
— Project Overview —
Summary: Designed and iterated an app for people who want to create an archive of memories and stories to pass on to their loved ones as a digital legacy.
Challenge: People want to record and share their memories and life stories but lack a platform that makes it easy, secure and viable in the future.
My Role & Deliverables: I worked closely with my teammates Erin F, Erin J, and Ashima M. I conducted 6+ interviews & usability testing, delivered follow UX artifacts and designed UI
Solution: With Coda, we created a structured memory bank, representing the individual’s life and essence. It integrates the tools needed to tell a story, from photos to audio, to written entries.
Why Coda?
Even the most precious memories fade over time.
The goal of Coda is to create a structured memory bank that represents a life journey through photographs, written material, and voice recordings, allowing individuals to share their life stories in the way they wish.
The name Coda is a musical term that represents the concluding passage, section, or remark. It would be a perfect fit for the app because most competing apps focus on mortality, framing the product in the context of the “end” of life. Coda represents the end of one “movement” but, at the same time, the possibility of another.
Home Page of Coda
Design Process
— Research & Empathy —
Competitor Analysis
The compatible apps in the market are limited because it’s a relatively new concept. A majority of them serve a niche market in death & legacy and have not focused on documenting life. Coda has to be uniquely positioned to address a new aspect of legacy creation.
User Interviews
Mortality is a sensitive topic that could potentially be a pain point for some users. I wanted to validate this assumption in the user interviews and ensure a comfortable environment when discussing such subject matter. The questions asked allowed our seven interviewees to determine the direction of conversation surrounding mortality and legacy. Some questions we asked were:
Some questions we asked were:
– How do you ideally rekindle with memories of your loved one?
– What form of messages or stories would you like to leave behind?
– How does it feel to revisit memories like photos, messages, and voice recordings?
– If given an option, would you like to leave your voice recordings for your family? Why or why not?
Affinity Mapping
An affinity diagram helped us identify common behavioural patterns, desires, needs, and preferences around preserving, organizing, and sharing memories through physical or digital artifacts.
Three Key Insights
1
Relationships
People speak to others in different ways, dependent on their relationship. They want specific information to be given depending on the legacy they want to leave for that individual
2
Centralization
Currently, artifacts of significance are kept in multiple locations rather than in one place, depriving people of meaningful information that they want to pass on or remember.
3
Customization
There are a multitude
of motivations/ideas
for how people want to leave their legacy so customization of this
is important
— DEFINE —
Persona
The next step was to compile our insights into personas to ensure we understood Coda’s users and how we could best meet their needs. We developed two personas – Karen and Simon – to represent the individual creating a legacy through Coda (Karen) and the person receiving it (her son, Simon).
How Might We...
facilitate the documentation, organization, and sharing of people’s diverse personal legacies as one centralized digital artifact?
User Flow
Having decided on a concrete structure for Coda’s chapter system, we created a user flow that represented how Karen would be navigating through the app. The goal of this was to understand and empathize with the decisions and touchpoints Karen would encounter while using Coda.
— IDEATE —
We were brainstorming ideas around the flow of creating, organizing, and structuring memory artifacts that interconnect to form a complete node – an image with an audio-recorded and written message that plays simultaneously in a series of similar nodes.
Design
Concept 1
Applying Skeuomorphic Design
When you think of storytelling, books immediately come to mind. There’s the overarching structure of the novel itself, the chapters, the stories and events within each chapter, and each story the elements that bring it to life like the way a character is described or the tone they speak in. Users can easily understand Coda’s hierarchy of information because its naming convention follows the structure of a book, very much like a book of one’s life that was already familiar to users.
Design
Concept 2
Memory Node
Users can create memory nodes with different types of information, such as text, sound, photos and videos. All it needs is a smartphone that can capture precious moments in such forms, and then Coda will take care of the preservation.
Wireframes
To conduct the first round of usability testing, the main focus when designing the wireframe is to create an intuitive flow for users to edit and manage their memories.
— Validation —
Usability Testing
Using the testing tool: Useberry, the interviewees had to create a new memory node with both audio and video content in a specific chapter. The goal was to get the completion rate and observe the user’s frustration point.
Test Overview
– Participants: 10 People
– Average Time: 7m 31.3s
– Task Completion Rate: 90%
Testing Insights
– Click Rate: The majority of the clicks in the heat map were unrelated to executing functional commands but mostly related to individuals trying to explore the app.
– Frustrated Points: While 58% of users rated the complexity of the task as 1-2 out of 5, and 67% of users got stuck during the execution process, we identified factors that may have contributed to user confusion and reiterated accordingly:
Iterations 1
Pain Point: The call to action is not consistent on every page, and the hierarchy that places new nodes below previous nodes is confusing; users think new content should appear at the top.
Remedy: Removing the media “+” button from the navigation bar and integrating it in each “node” makes this process more intuitive.
Iterations 2
Pain Points: Confusing information architecture of new memory node; The visual structure of the memory page is not clear and makes it difficult for the users to distinguish the newly generated card from other function areas on the page.
Remedy: Decluttered memory page with an option to add a memory node once users are ready
Iterations 3
Pain Point: Users lose track of newly created chapters or nodes because they often click back to see which chapter the freshly added memory belongs to.
Solution: Swiping right from the edge will display a chapter index, allowing users to navigate themselves through different chapters easily.
— Prototype —
UI Design
Colour Palette
Typography
Video Prototype
Interactive Prototype
Next Step
To further improve the adaptability of Coda, I believe it is essential to continuously learn from individuals across different age ranges to gather new insights and update the app with new features and revisions. For example, users over 60 years old may not be as familiar with smartphone applications. Such older users are likely to be a significant part of our target users.
Some Thoughts
This project was done with love and hope because it made me think deeply about my family. When I communicated with interviewees, I found that they all had memories they wanted to keep or feelings they wanted to convey.
Although we now have smartphones and the internet everywhere, our history is scattered between many locations and undocumented for the most part. Therefore the existence of Coda can be used to centralize the family stories.
I collected photos of my grandparents from their youth to the present, although I didn’t see them for two years because of the epidemic and being in a foreign country. I hope to keep as many of their photos and voices as possible to keep this love alive.
