"Prototyping at work is giving form to an idea, allowing us to learn from it, evalutate it against others, and improve upon it." - Tim Brown
Angel's Hands Foundation, an all-volunteer non-profit organization dedicated to improving the quality of life for individuals with rare and undiagnosed medical conditions, needed a mobile application. We aimed to help the organization by prototyping an application for them.
Sarah Foster
Jake Cottam
UI/UX Designer
Jan 2023 - April 2023
Illustrator
AdobeXd
Microsoft Word
Figma
My team was given a short timeframe to create a paper prototype for user testing in preparation for designing an application for Angel's Hands Foundation. The following images showcase the prototypes we developed to test users with various tasks.
Using this paper prototype, we tested users on the following tasks:
Task 1 of 5:
You are on Angel's Hands app’s main page and you want to donate to the Angel’s Hands Foundation. Can you navigate through the app to donate a monthly $10 donation by credit card?
Task 2 of 5:
You would like to build up your volunteer hours. Use the Angel’s Hands Foundation app to volunteer for any event you think looks enjoyable on January 20th, a day you have availability on.
Task 3 of 5:
You want to participate in the Angel's Hands Foundation, but have a couple questions that you’d like to ask first for clarification. Please contact Angel's Hands Foundation using their app for answers to your questions.
Task 4 of 5:
You have a child that you know that could benefit from the activities and support from Angel’s Hands Foundation. You would like to refer them to the foundation. Can you navigate through the Angel’s Hands Foundation app to refer the child?
Task 5 of 5:
You forgot what volunteer events you have signed up for and don’t want to miss them. Can you find the list of events you are currently signed up for?
We discovered we overlooked several things that could make the application more user-friendly. The following changes are necessary:
User testing at this stage is crucial for the development process, as it helps identify simple solutions early on, ultimately saving time and money on coding later.
Putting together a Journey Map to best understand our user's journey, including their emotions, pain points, and actions.
Creating a persona is crucial for understanding the user's needs and pain points when working on a mobile application. This understanding fosters empathy with the user, allowing me to design the application with a clear, focused goal in mind.
We divided the task of building the low-fidelity wireframe using Figma, assigning each team member four pages to create.
My responsibilities included collecting content, sourcing images, and designing the color scheme for the mobile application. Option "I" was chosen as the final color scheme because we wanted to avoid a dark appearance and closely match the original website.
Problem: One of our team members didn't complete their assigned wireframes, causing a delay in our schedule. To get us back on track, I took on the task of building those wireframes myself.
One of my favorite aspects of this project was creating an Apple icon for our application. By following Apple's specifications, I ensured the icon had the correct sizing for Apple devices. Using Adobe Illustrator, I successfully transformed the company's logo into an icon that represents the non-profit organization.
I learned a great deal from this project. I particularly enjoyed testing users with our paper prototype and making necessary adjustments. Collaborating with the team was fulfilling as we built on each other's ideas to find solutions. Creating the application icon allowed me to express my creativity, making the experience even more enjoyable. Overall, it was a fantastic experience.
PHOTO CREDIT: Photos on this page are found at Angel's Hands Foundation as well as Unsplash.