Design and Branding overhaul:
Improving the web presence by updating the UI, improve usability, redesign the sitemap, and make commonly searched information easier to access for different types of users
No Limits is a great nonprofit organization that provides programs for deaf children and their families. However, the current site is not responsive, lacks any consistent styling, does not showcase a defined brand, and their landing page does not effectively communicate their missions and accomplishments.
We plan to improve the site by creating a style guide with brand standards, clearly defining programs for those who need help, appealing to donors by sharing success stories and highlighting statistics, and bringing the focus of the site back to the children who benefit from programs.
The four main user types of this website are:
1. those who want to donate,
2. those who want to become a sponsor,
3. those who want to volunteer,
4. and those who want to enroll their child.
research and UX framework
Aurora, age 38
Single mom to two children, one is deaf
Aurora is looking for budget-friendly speech therapy programs
Wants to expand her support network within the deaf community
Key User Interview Takeaways:
3 Interviewees who fit the target user group reported feeling…
Uninformed because No Limits does not clearly define their programs or communicate how donations will be used
Nervous that the website is not secure, leading visitors to question the credibility of the organization
Overwhelmed by the amount of information presented, but not sure what to take away from it or easily find what they’re looking for
... after exploring the current NoLimits website.
Click the link to see the questions they were asked: Link
Sara, age 35
Married with two kids, one is deaf
Discovered No Limits but finds their website hard to navigate
Finds herself questioning the organization’s credibility
We believe that No Limits does not clearly communicate their mission, programs, and credibility - leading to lower enrollment rates and fewer donations.
By clearly defining the mission and programs offered by No Limits - and the success of those programs - we will ensure website visitors that No Limits is a credible, successful nonprofit.
We may solve this problem by clarifying the mission of No Limits, illustrating programs curriculum, share success stories, and simplifying and organizing the website content.
We will know we have succeeded when we see an increased number in program enrollments, an increased number in donations, and an increased number of volunteers.
Problem statement and ideation
We plan to update the UI for usability, reorganize the sitemap, and make the most used features more accessible and easy to use.
Problem: Commonly searched for information is lacking or difficult to find.
Solution: We will reorganize the sitemap and make features of the website more user accessible ie: donations and program features and benefits
Problem: Inconsistent UI style and lack of visual aesthetic
Solution: Create a UI style guide and improve on the visual design
Problem: Credibility issue
Solution: Provide success stories and to make the website secure
Problem statement and ideation
Design Process - Information Architecture
User Decision Flow Map
Brainstorming and Sketching
All four team members each sketched out mobile and desktop version of the homepage based on all the UX findings and framework we established prior to this part.
We posted all our sketches on the wall and posted our feedback using post-its.
Together we discussed the best way to tell the story of NoLimits on just browsing through the homepage and to eventually build the trust of the user to be curious and to want to explore the rest of the website.
So, here's the order of the homepage:
Hero image: Image that portraits the programs that NoLimits offer
Why? An image can tell a lot and most important should be grabbing attention and bring curiosity from the visitors
Why? A quick and easiest way to inform the user about this non-profit organization
Success Stories and Important Event News
Why? To follow up with the mission statement, "Stories" section shows the user how and what NoLimits are successfully doing based on their mission statement
Programs: Programs that NoLimits offers to their enrolled students
Why? The user has learned the success stories of NoLimits and build some trust in the organization, so this should be the time to find out what programs the organization offers
Ways to give
Why? Now that the user learned NoLimits' mission statement, earned trust from Success Stories, and understood the programs offered, it's time inform that there are ways to help this non-profit organization
Why? The last touch to give more credibility of the organization for future and present parents and students by showing the list of corporate sponsors and donors
Low fidelity wireframe:
The old logo doesn't represent NoLomits well enough and it doesn't work as a logo. The new logo symbolizes deaf children with the ear shape and a shape of a child in the ear. This logo is simple and modernized that it will look good anywhere and at any size.
HigH FIDELITY PROTOTYPE
Direction for Future Development
Securing the website
Building more credibility
Streamlining donation process
Building transparency in real-time for how and where donation funds are allocated