Project - 2022
Biobank
OVERVIEW
During my Master's at Pitt, I had the opportunity to do an internship at the University, where I worked for the University of Pittsburgh Medical Center (UPMC). I worked as a Student Software Designer and was able to work on a research project under their mentorship. I chose to work with Biobank since I loved the idea of working with patients and researchers for a cancer-related study and learning more about designing UI interfaces.
Dr. Marielle Gross had this unique idea of designing a software prototype of the NFT-based framework to help patients track and learn about any of their biological specimens that were collected and stored for research. My major role in this project was mainly designing wireframes. I was responsible for creating initial front-end design screens for patient experience. and was on a team with 2 other students, and we worked with Professors, Researchers, and Patients.
Solo UX/UI Designer, Research, Wireframes, User flows, Low Fidelity design, Prototyping, Usability Testing
MY ROLE
May - Sep 2022 (5 months)
SCOPE
Research, interviews, survey, ideation, prototyping, user testing, evaluation
DESIGN PROCESS
Figma, Adalo, Whimsical, Qualtrics
DESIGN + SURVEY TOOLS
There is a market gap for a mobile app that allows patients to track and learn biological specimens donated for Cancer-related research…
“How might we help patients to allow them to track their biological specimens that were donated for research and have a common platform for patients and researchers to explore more about resources in Biobanking?”
THE PROBLEM
I designed a preliminary Mobile UI prototype that serves as a platform for patients and it has the following features:
- To view and access their biosamples and be able to see where their samples have been donated.
- To see the status of their sample, i.e., if their samples are in use by some researcher or if it is available for research.
- For researchers and patients to be able to explore the Biobank and learn more about it.
THE SOLUTION
Here is my mobile design flow of the Biobank app where I walk you through different wireframe pages I designed.
USER SURVEY & TESTING
I conducted user surveys on Qualtrics by taking feedback from patients on my UI wireframes and revised my designs based on their reviews. During the design process, I interacted with patients in the form of surveys to gain feedback on the app design. Their feedbacks were very valuable since patients were a crucial part of the entire user journey and this is a user-centric design.
Based on the patient reviews, I had to further refine the front-end screens. I was expected to use a no-code platform such as Adalo to create these wireframes for the data from BIOS(patient data). At the moment, we can enable just current/former patients at UPMC to track their biosamples, but anyone can sign up to request the service.
Since the proprietary data is confidential to the patient and is under the legal rights of the app owner, I won’t be able to show the user survey information here.
USER STORY MAPPING
As a team, we discussed some of the important steps in the user journey while navigating through the app and I mapped out the user story as follows. It mainly consisted of some basic activities and tasks a user would generally perform while navigating through the app. These tasks include logging in / creating an account, accessing the biobank and biowallet, reviewing the bioassets, tracking research use, etc.
LOW-FIDELITY WIREFRAMES
We had to formulate a lot of content on these wireframes and we began brainstorming our ideas for what was important in the eyes of Dr. Gross, as the main idea of the app. It was really fun to do the whiteboarding on Whimsical and have our ideas in the draft mobile UI wireframes. It helped us conceptualize our thoughts on how the first version of the app should look like.
The primary wireframes were the log-in/sign-up screens, the home page, the biobank, the biowallet, explore gallery, and the studies screens. Also, we built rough sketches of how the user profile page should look like, be able to see where their samples are being used, and learn more about the research.
FINAL THOUGHTS & REFLECTIONS
Designing for Biobank taught me
The goal was to provide a solution that would help patients to view the biosamples that they donate for research and keep track of them. Since this was my first time designing a prototype app, it was challenging but it was quite rewarding since I got an eye for visual design and this is where I picked up interest in UI/UX Design as well!
I witnessed the team's impressive progress and grew professionally. At the end of the project, my team had accomplished building a working mobile app which was also released on Google Play.
I chose to work with Biobank since I loved the idea of working with patients and researchers for a cancer-related study and learning more about designing UI interfaces.
Since I like to keep users in mind while designing, I conducted user surveys and received feedback on app design from the patients. Their feedbacks were very valuable since patients were a crucial part of the entire user journey and this is a user-centric design.
To enable more patients outside the UPMC network to track their biosamples.
To allow anyone who has donated their samples for research to find their samples that are “banked” at any institution – wherever they received medical care in the future.
To update more information about Research and research labs that perform cancer-related research studies.
CONCLUSION & NEXT STEPS