Our team performed an audit on the 125 year-old NGO’s website to improve access to their life-changing services.
For NEW INC’s Create & Advocate, a hackathon run by the New Museum’s tech incubator.
I was the Design Lead for this project.
Baba Israel and Alison Fleminger from University Settlement described how their website was disorganized, unattractive, and ineffective for the two main groups of users visiting the site: recipients of the Settlement’s services and prospective donors.
SMITA SEN | UX/UI DESIGN LEAD
SABRINA CHIN | UI DESIGNER
JASON CHEW | CONTENT COORDINATOR
FRANCIS TSENG | FRONT-END DEVELOPER
As design Lead, I worked with the team to identify key design problems; to map out our audit and design strategy; to lead information architecture restructuring and prototype design; and to create the visual language for the website.
With this problem in mind, the team performed an audit of the website. We restructured the sitemap and information architecture, ultimately designing user flows that optimized usability and interfaces that were accessible to the diverse users of the website, especially the elderly, differently abled, and those with limited literacy skills.
When working with the client to restructure the site's content, especially the support programs offered to low-income and immigrant families, we found that most services were organized by age.
Accordingly, we found that a timeline is an intuitive navigation tool and could guide an effective content organization strategy.
Above: Restructuring the sitemap using post-its. We combed through a sitemap with 40+ paths, dead links, and confusing user pathways to come up with a more effective content organization tool:
a timeline (left).
Playful UI Elements
Playful UI elements, like the above heart as a hover, establish a welcoming and friendly interface while reinforcing one of the NGO's key objectives: to support and to serve low-income and minority communities. These UI details have been key to a positive overall user experience and brand experience.
SELECT SERVICES AND LOCATION
The page is laid out so that it is easy to use across desktop, tablet, and mobile platforms. Large touch targets and images enhance accessibility for mobile and tablet use. Users can toggle the types of services they are looking for (Childcare, Housing, After School Programs, et. al.). Most notably, this content organization allows users not only to establish search terms, but also to discover other University Settlement services that may benefit them. This was one of the client's key goals since they felt that their user base isn't aware of how many different kinds of support the organization could offer.
Search results page. In the toolbar, the dropdown menu (left) is laid beside Services buttons (right). This way, users can toggle their search preferences without having to go back a step.
When a user clicks on a program listing, the Program Profile page appears. The hero area allows for media content. The static left panel contains all location contact details and hours of operation. Tags allow for users to quickly scan the services offered by the program. A card of content offers program managers a space to update details about the services provided as well as a space to highlight recent achievements.
The opportunity to highlight achievements is especially important because the Program Profile page serves two key functions. First, it serves as an informational platform for recipients of services to learn about the program. Second, it serves as a platform for program leaders to showcase their work to donors, national boards, and international juries.
NOTE: The Landing Page, Timeline, Search Results, and Program Profile were all designed during the course of Create & Advocate. After Create & Advocate, I went back and redesigned the Select Services Page to create the page that is shown above, and added the toggle search preferences feature to the Search Results page.