Last year, I kicked off my UX internship here at Fuzzy Math with a pro-bono website redesign for UCAN, a Chicago-based nonprofit organization aiding at-risk youth. At the time, I was still in grad school working towards a Masters in Human-Computer Interaction at DePaul University. As a “noob” UXer, the UCAN project gave me the opportunity to work closely with real clients, as well as with Fuzzy Math’s stellar development and visual design teams and my fabulous cohort (former Fuzzy Math UX intern Angelina Cole).
Back in September 2014, Fuzzy Math and UCAN held a kickoff meeting to identify UCAN’s primary goal: to generate more online donations. In order to accomplish this, Fuzzy Math set out to incorporate the following into our new design:
- Add a clear and elegant visual hierarchy
- Encourage donations by providing multiple calls-to-action and visually prominent entry points to the “donate” page
- Create an intuitive and cohesive IA structure
- Quickly and easily tell the story of UCAN and give the user confidence to explore the site further
- Leverage personal stories and photography to create a personal connection between UCAN and the user
UCAN’s existing site was very DENSE and content heavy. In order to create a lighter, more concise (yet effective) site, Angelina and I had to make sure our taxonomy and content architecture were sound.
We began by cutting and reorganizing the existing site content, but in doing so, we had to make sure we weren’t burying important pieces of information or discouraging any users from donating to UCAN.
Without primary research to drive this project, we had to rely on our primary stakeholders, secondary research, and our design expertise to create a new design and structure that met both the users’ and UCAN’s needs.
Using stakeholder information, we created a set of design principles to keep project objectives front-and-center.
- Be Clear: Copy and design must be clear and straightforward, pointing the user down the proper path. Reduce confusion and propensity for getting lost in site content.
- Create a Personal Connection: Use visual content, clear copy, and success stories of clients to create a personal connection and show the impact of UCAN on the community it serves.
- Make an Impact: The UCAN site must be easy to interact with. It seeks to show the effect of UCAN’s programming on Chicago youth and motivate the visitor to become a donor and facilitate change in the local community.
- “Get it”: At a glance, the user should understand the purpose of UCAN, as well as the importance of the program to the community it serves. The site should convert visitors into program advocates and be easily digestible and approachable for everyone.
- Enable: Common process and desired action path should each be clearly marked every step of the way. If the user wants to go further, additional content will be well organized, accessible, and enjoyable.
- Consistency: Strengthen relationship between print and web materials, form design, style, and tone.
Personas + Competitive Analysis + New Taxonomy
UCAN’s primary goal was to generate more online donations. In order to ensure our proposed design could accomplish that, we had to make sure our taxonomy and information structure were serving the identified personas. Personas enabled us to make design decisions with a particular point of view in mind. We created four personas:
- Prospective Donor (community members)
- Prospective Funder (corporate and government agency reps)
- Job Seeker (volunteers)
We spent quite a bit of time diving into our personas and identifying what each of their goals might be; what we wanted them to think, feel, and do while on the site; and what would call them to donate to UCAN.
We then used our design principles to do a comprehensive evaluation of competitor websites, including websites for non-profits, local NGOs, and for-profit companies. Our aim for the competitive analysis was to identify opportunities such as design patterns and navigation structures that we could potentially use to inform the new design.
When we analyzed all our findings, we realized that getting as many prospective donors to pledge to the organization wasn’t just about making the website visually appealing and easy to navigate. We needed the website to create a personal connection with the user and elicit empathy, trust, and a sense of social responsibility. We found that there was a clear opportunity for UCAN to use anecdotes, compelling photography, and personal stories to better tell the story of the organization and its impact on youth and the community it serves.
In order to achieve this, we worked closely with Fuzzy Math Visual Designer Rachel Vorm to come up with a strategy for creating a personal connection with users straight out the gate.
Furthermore, we analyzed data about the existing site’s traffic using Google Analytics in order to understand how UCAN’s users were navigating through the existing site. Based on data from Google Analytics, personas, and insights divined from the competitive analysis, we created a new taxonomy that we now feel will best accomplish the client’s goals.
Ultimately, we came up with a taxonomy and information structure that covers a wide breadth of UCAN’s content, without being overwhelmingly dense. The new structure still gives the user the opportunity to explore UCAN in great detail, while preventing the user from getting lost in the site content.
Given the immense scale of the current website, we defined a set of page templates to inform and focus our designs moving forward. Angelina and I created a set of sketches individually for our initial designs for top-level pages. Then, after internal and client reviews, we consolidated our individual designs into one glorious set of wires.
A Little Help from Our Friends
Shout out to Public Good Software, brainchild of Dan Ratner and Jason Kunesh, one of Fuzzy Math’s original co-founders. PGS is a Chicago-based company that specializes in building web-based fundraising tools for non-profit organizations. Fuzzy Math reached out to PGS early on in the project to build UCAN’s new donation page.
ICAN + UCAN = WECAN
After UCAN reviewed and approved a full set of wireframes, the UX team handed our wireframes over to Rachel to create a set of high-fidelity mockups using carefully considered type and a customized color scheme that visually articulates an approachable, optimistic, and inspiring, yet serious tone.
Now, the UCAN site tells a clear story of the organization, creates a personal connection with the users, and showcases the importance of the organization to the Chicago community. UCAN’s new website is coming soon as it is currently in development as of the date this post was published — make sure to check back in a bit!
Our monthly newsletter is targeted at those with an interest in UX design, research, and strategy.