shining scars : an app and responsive website for the transplant community
Overview
Driven by a desire to make a positive impact, I took on the role of UX designer to develop an app and responsive website aimed at empowering and assisting the transplant community*.
-
In 2020, my husband selflessly donated part of his liver to save his brother's life. However, as a living donor, he encountered rare and uncommon complications following the surgery. During this challenging time, we realized the lack of easily accessible information online, leaving us feeling overwhelmed and lost.
Before being able to get a transplant from my husband who lived in a different province, my brother-in-law, was on the liver transplant waitlist amidst the COVID pandemic. He faced difficulties in finding a suitable living donor. It was during this period that he conceived the idea of a "matchmaking app" to connect patients in need of organs with potential living donors. Inspired by his vision, I became passionate about expanding the concept further to address the needs we personally experienced.
I envisioned a comprehensive platform called “shining scars” that not only facilitated organ donor matching but also offered additional features we wished we had access to. For instance, the ability to connect with other living donors who had encountered similar complications would have been invaluable. As a caregiver, I also recognized the importance of connecting with others facing similar challenges.
"shining scars" was inspired by our personal journey, illuminating the path with hope and empowerment for organ recipients, donors, and caregivers, as we come together in a supportive community.
The challenge
The transplant community lacks a dedicated platform for connecting and supporting one another. Existing options like social media groups or donor programs have limitations.
My goal was to design an app and website specifically for the transplant community. It would provide a space where patients, living donors, and caregivers could connect, exchange tips, offer emotional support, and share experiences. Additionally, I aimed to create a "matchmaking" feature for potential living donors to explore profiles of patients in urgent need of organs, initiating the workup process.
This platform empowers the transplant community by fostering connections, facilitating knowledge sharing, and potentially saving lives through compassionate organ donation.
Discovery and Research
During the competitive audit, I explored support groups offered by various transplant recipient organizations, aiming to understand their networking opportunities and peer-to-peer interactions.
Most of these organizations have a web presence, and a few have developed specific apps. However, these apps are usually limited to a single hospital or transplant type. Additionally, many websites provide forums or chat features for member interaction, but they often suffer from navigation difficulties and are restricted to a particular transplant type.
Through this analysis, I identified several design and content opportunities that could enhance the user experience and address the limitations observed in existing platforms.
Users and Audience
I conducted interviews with various individuals from the transplant community and developed empathy maps to gain deeper insights into the users I'm designing for and their needs. Based on these findings, I categorized them into three primary user groups: organ transplant recipients, organ donors, and caregivers.
All user groups confirmed the challenges they face in connecting with others who share similar experiences. They often have to rely on their personal networks or navigate existing social platforms like Facebook groups, which can be complex and overwhelming when dealing with such traumatic life events.
Furthermore, research revealed that patients and caregivers actively seeking living donors (due to the limited availability of organs from deceased individuals) often lack guidance and would greatly benefit from a dedicated tool to assist them.
Another frustration expressed by users was the difficulty in finding relevant and specific information tailored to their unique circumstances. Internet searches often yield an overwhelming number of results or provide general information that doesn't address their specific needs.
To further understand these user groups, I created personas that represent two distinct profiles within the transplant community.
Outcomes and results
(scroll down for design process)
What I learned
While designing the shining scars app and responsive website, I realized that my first ideas were only the beginning of the process.
Through usability studies, I was often surprised and confronted by my own biases. They were essential to iterate on my designs and make my app really answer the users’ needs.
Impact
“I wish this app would have existed when I felt lonely and overwhelmed. It would have helped me so much!” - user feedback
Next steps
Conduct another round of usability study to make sure the pain points users experienced have been properly addressed.
I have presented the app and responsive website to transplant organizations to see if they would like to help launch it in reality. They are currently evaluating the feasibility of the project.
Digital wireframes
In the initial stages of my designs, I wanted to respond to the users’ needs of finding tips quickly but also allow them to ask their own questions, right from the homepage.
Design Process - Phase 1
The user is able to quickly ask their question to the community
The user can browse through existing posts to see if their question has already been discussed
Low-fidelity prototype
The initial low-fidelity prototype connected the primary user flow of key interactions such as searching posts, initiating new posts through questions, and finding private chat partners. This prototype was subsequently tested with users in a usability study to gather feedback and insights.
Usability Study
Study type
Moderate usability study
Participants
5 participants
Location
Canada, remote
Length
30-60 minutes
findings
The homepage needs to be streamlined to avoid disorienting users with an overload of information on one page.
The distinction between the public forum and the private chats needs to be clearer.
The copy has to be condensed for the app because it’s too wordy.
Design process - Phase 2
Mockups
On the homepage, I created menu cards with large photos to declutter the screen as per users’ feedback and introduce the features of the app more clearly.
After usability study
Before usability study
I created a separate page where users choose their preferred way to interact with the community - privately or publicly - along with a short explanation of the advantages of each.
After usability study
Before usability study
Final mockups
High-fidelity prototype
The final high-fidelity prototype has a clearer user flows for interacting with others via the forum or private chats, while also helping patients find donors through a pairing page, and getting general information divided by transplant patient, living donor, and caregiver.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the design to fit the specific user needs of each device and screen size.
*Note that I have since changed the UI and name of the app and website but I kept the same layout.
Accessibility considerations
Used icons to make navigation easier
Ensured colours and contrasts aligned with accessibility guidelines
Used headings to show hierarchy in the designs and help users easily navigate the page.