© Suchin Son 2019

No Limits

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

Project overview

Project overview

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.

User Focus:

My role

UI/UX Designer

Teammates

Cory

Oliver

Lamont

Prototypes

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

Research Direction:

  • UX audit: Analytics Analysis, Heuristic Analysis, and SWOT

  • Research: Interviews, Google Surveys, and Competitive Analysis

  • Proto and User Personas

  • Affinity Diagramming

  • UX Scenario, Storyboarding and User Journey Map

  • Wireframing, Prototyping, and A/B Testing

Proto persona:

  • 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

User Persona:

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.

UX Hypothesis:

Problem statement and ideation

Problem statement:

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

Site Map

Design Process - Information Architecture

User Decision Flow Map

Wireframing
and
prototyping

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

|

Mission Statement

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

|

Sponsors

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:

style guide

New Logo:

New Logo

Old Logo

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. 

Color:

Secondary Colors

Primary Color

iconography:

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