top of page
WEBSITE REDESIGN
01 Project Overview
Goal of Friends of MS
Fighting the devastating effects of Multiple Sclerosis by providing employment to disabled individuals, funding research, treatments, and supporting services for persons and families impacted by Multiple Sclerosis.
Project Outline
Goals
-
identify ux/ui issues
-
redesign ui
-
enhance ux/usability
-
showcase design skills
-
improve accessibility for MS users/donators
-
have a lot of fun!
Role/Scope
-
UX/UI designer
-
graphics designer
-
1 month
Tools
-
Adobe XD
-
Concepts (Graphic Design)
Deliverables
-
prototype of new improved website
-
brand style guide
Industry
-
Nonprofit
Why now?
The website redesign will enhance the user experience, driving increased donations through a positive site experience and user referrals, while helping the nonprofit expand its reach. Ultimately, it aims to raise awareness for those with MS and fund researchers to pursue further cures.
My Simplified Process
Define
Research
Design
Analyze
02 Define
The Problem
The Friends of MS Charitable organization's website has room for improvement, particularly in terms of user experience and user interface. To gain a better understanding of the issues, let's take a closer look at some of these problems.
Structural UX Issues (Site Map)
Donation Bin Location List
The current website features a donation bin list with nearly 50 locations in different cities, making it difficult to navigate efficiently.
Outdated UI Design
The user interface design is outdated and chaotic, making it difficult for users to engage with the site and disrupting the overall flow. Below are some examples.
Extremely uneven elements here
Elements awkwardly overlap and photo sizes are not consistent
Tiny text is hard
to read
Current Style Guide
03 Research
User Research Summary
For my research, I chose to explore the nature of multiple sclerosis (MS), examining its impact on individuals diagnosed with the condition. Additionally, I investigated the demographics of potential donors and those interested in staying informed about various nonprofit organizations.
One fascinating finding from my research was that individuals with MS often experience vision problems and brain fog. This insight significantly influenced my design ideas moving forward. Additionally, I tested the website with various family members, gathering their emotional responses and identifying key pain points, which are outlined below.
User Journey Map
Goal: Determine how to navigate the MS Charities website to make a donation.
User Main Pain Points
1
Text
Text is often too small and unreadable
2
Wayfinding
Difficulties finding information that they want to find
3
Visuals
Often getting lost because of poorly placed elements
Persona
04 Ideation
Updated Site Map
This demonstrates the resolved user experience issues, enhancing and streamlining the overall user experience. By addressing these issues, we aim to optimize user satisfaction and improve usability.
Before
After
Wireframing
After updating the sitemap, I planned the functionality and layout of the new website, consistently referring back to my research throughout the process.
Low-Fidelity
High-Fidelity
New Branding
The updated branding and redesigned UI give the website a much cleaner, less cluttered appearance. With improved spacing, the design now has a more modern, streamlined feel.
05 Analysis/Solutions
Analysis Research into Design
I chose to analyze the connection between my research and the final design. Throughout the design process, I focused on keeping my persona and research in mind, aiming to address the issues present in the original website. Below are examples of how my research influenced the design decisions.
New Bin Location Finder
The new location finder addresses the wayfinding and usability issues identified in my research, making it much easier for users to find donation bin locations.
Bigger Text
The larger text in my final design addresses the issue of readability, helping users who struggle to read the website's content.
More Space/Simplification
Increasing the spacing and simplifying the information addressed the users' pain point of confusion caused by overlapping and distracting elements.
07 Conclusion
The Design Process
I think the main takeaway for this project is that designing for people is way easier than designing for designing. Learning as much as you can about the user during research really does help when it comes to designing.
It felt like I was designing to help someone rather than just creating another website for some big company. I also learned that I love designing for others in mind and it is super fun!
I am so excited to learn more and grow my knowledge as time goes on so I can help more people!
Things I Want To Improve
1. I would like to spend more time interviewing people in the target audience instead of just my family members and friends
2. Do a competitive audit during research to see what the rest of this part of the market is doing and help that inform my design as well
3. Conduct additional iterations of the design and test it with a larger group from the target audience.
bottom of page