The Disability Union

A Website Design Case Study

The Disability Union is a recently created organization with the purpose of bringing together the disabled and their allies and providing services that enhance their quality of life.

Problem

The previous website was difficult to read, consisting of one singular page that scrolled through large quantities of text and infographics from other companies. It also did not provide the necessary functions to get people involved such as providing them with the information and digital access to become members and/or donate money and resources.

Solution

In order to successfully include all features that are required for this website, I needed to completely redesign it from the original. I was able to use Sketch to design User flows and diagrams to determine what pages I would need to create before implementing them directly into WordPress.

Tools

  • WordPress

  • Sketch

My Role

  • UI designer

Timeline

  • Overall: 3 weeks

  • Discovery & Research: 1 week

  • Design & testing: 2 weeks

My Design Process
First Steps
The Disability Union

Original Website's User Flow

User Journey

Due to only having one page and no buttons or navigation, the Original TDU website had one user path: keep scrolling until you find the topic you're looking for. This was a major pain point for users, not having the ability to navigate directly to points of interest. In order to help users find the information they're looking for more quickly, I created separate pages and added a navigation bar.

Separate pages created better usability and allow the users to have a smoother flow.

Changing the User Flow

  • TDU's Goal: Increase involvement through membership, partnerships, and donations.

  • I dedicated a whole page to this goal: the Get Involved page

  • Due to there being so many different ways to get involved, each having its own abundance of information, I also created separate pages for each of these involvement types.

The Disability Union

Updated User Flow Diagram

Wireframes

The largest challenge was deciding how to present the various means for users to get involved.

The first design, Get Involved V1, gives the user too much information at once, potentially overwhelming them and losing their interest.

I chose the second design (Get Involved V2) because it was neat and concise, allowing users to see an overview of their options and then navigate to the one they are interested in.

*Each wireframe is scrollable.

Low Fidelity Wireframes

After deciding on the design of Get Involved V2, I needed to create separate pages for the Members, Donation, and Partner options. The result was the low-fidelity wireframes below.

*Each wireframe is scrollable.

UI Design

Content

Since I needed to create the site directly in WordPress, once the wireframes were decided then began implementing the outlines and making content decisions.

Things I needed to do:

  • Pull what content was reusable from the original website

  • Request copy from the client for the remaining sections

  • Create brand guidelines

  • Update the logo

  • Create custom icons

  • Find suitable stock images

  • Recreate infographics that were originally used from other sites and make them fit the brand style

The Disability Union

Brand Guidelines

Brand Guidelines

I redesigned the infographics to use TDU's color palette to make the screens feel more official and cohesive.

Basic blue and orange palette was provided by the client, I added a pale orange as well to provide depth and highlights. I also kept the site feeling light and open to further the welcoming, friendly attitude.

Icon and Graphics guidelines were created to ensure all graphics, photos, and icons maintain the company image of inclusiveness and friendliness.

The Disability Union

Logo Comparison

Logo Updates

The original logo was provided by the founder; we liked the style but agreed it needed to be updated so that represents a larger percentage of the disabled population.

Changes I made to represent inclusiveness:

  • One figure with only one arm

  • One figure with no arms

  • One figure with glasses

Final Product
40
hours
10
new pages
3
user paths to involvement

Website Introductory Video

TDU Website Video

Check out the site here.
Review
The Disability Union

Navigation Bar Versions 1 & 2

Challenges

The largest challenge I came across was having to design for accessibility. The original navigation bar I implemented was opened via an icon. This proved to be too difficult for visually or cognitively disabled people, so I changed it to an open navigation bar (V2). In order to do so through WordPress, I had to change the underlying theme of the site layout. In doing so, this changed the appearance and layout of all of my pages. I then had to rework the designs to be in line with our Brand Guidelines, be usable, and be visually appealing.

Next Steps

01

Add more sections under Education to highlight specific disabilities.

02

Create more original content like photos of members and a list of existing partner companies.

03

Create a member portal and login to further the community-building goal.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!