Original Website's User Flow
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
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.
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
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.
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
Check out the site here.
Review
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!