Lyme Aid Responsive Web Design
Overview
What i did
Duration: 2 Months
I designed a user flow that allows members of Lyme Aid support network to register as a volunteer and search for volunteer opportunities. I noticed that competitors had few volunteer opportunities, and were often limited to paying subscribers. Lyme Aid wants to allow inclusive volunteer opportunities as its network grows, and more opportunities to be involved emerge.
Responsibilities
Conduct user research and a competitive audit. Developed wireframes, and prototypes. Performed usability studies.
The Problem
Lyme Aid is a community for those who have been diagnosed with Lyme disease or those who have a loved one that has been diagnosed. As the community grows they need more volunteers to organize and support the various events, and support groups within their community.
The Goal
The goal is to design a way to identify potential volunteers and allow volunteers to register for specific volunteer opportunities.
User Research
I conducted interviews and created empathy maps to understand the users I am designing for. A primary user identified, through this research, were users who regularly volunteer. These users do not want to fill out the entire registration form for each volunteer opportunity.
User research confirmed that those who volunteer regularly, want to stay up-to-date on opportunities that might interest them.
Further, many users had physical limitations and needed to clearly understand the physical requirements for the volunteer opportunities they wanted to register for.
Design/Low-Fidelity Prototype
I began with paper wireframes. Using Adobe XD, I created digital wireframes and built a low-fidelity prototype.
Usability Research
Usability studies confirmed that users had a variety of ways to complete the volunteering user flow successfully. Using the feedback from the participants I made several iterations of the layouts and refined the user flow.
Refine/High-Fidelity Mockup
I began refining the low-fidelity prototype based on usability study findings and began creating high-fidelity mockups in Adobe XD. I utilized components, character styles and colors to ensure consistency in the design system.
After another round of usability studies, I further refined the mockup, adjusting it with accessibility features in mind. I added annotations for developers, to ensure consistency and accessibility.
PROTOTYPE FOR VOLUNTEERING USER FLOW FOR LYME AID WEBSITE:
Conclusion
Impact
Users shared that the app made them feel comforted by a community of likeminded people. They had a strong desire to get involved. One use said, “I had no idea that this was an issue. I want to learn more and see where I might be able to help out.”
What I Learned
I learned how to use Adobe XD and how to impliment a design system. I also learned about adjusting designs for a variety of screen sizes. It is also important to understand annotations that may help with accesibilty.