In 2013, Access California Services, a non-profit 501c(3) organization, had moved into a larger office to accommodate their expanding services and larger staff. I was hired to redesign the website to help employees, case managers, and more than 8000 clients1 quickly navigate through services and resources to find information easily.
On this website, I served in user research, information architect, usability testing, UI designer, and front-end developer. I collaborated extensively with AccessCal’s amazing former communications director Nancy Atallah, who wrote the content for the website and spearheaded the re-branding campaign. We spent a lot of time discussing the details of how specific interactions should look and feel, and worked through the WordPress front-end together.
First, we went over the old website and decided what we wanted to keep, and what we wanted to get remove. The information present was a hodgepodge of bulletpoints and paragraphs stapled together. What would the users expect from an online non-profit website? How can we clearly present the information? Nancy and I decided that if we want the users to feel welcome, we would have to give the website its own friendly personality, and be able to deliver resources that would be tangibly beneficial to the clients that need them.
Research and Inspiration
I sketched out personas for various users of the website, why they would visit, and what model of the website would best fit them. After some compromise, a final wireframe layout was selected, and I created a mockup in Adobe Photoshop.
I researched other non-profit websites that are more well-known and have a larger budget than AccessCal, including another Orange County non-profit, United Way. I took notes on content and sketched low-fidelity wireframes to compare information structures, and give use an idea of what content is important to the organization. We concluded that a set of large “hero images” would communicate a positive atmosphere, and that the front page should showcase featured pages, news, and a calendar.
I developed wireframes to communicate the basic layout of the front page and accessory pages using Adobe Illustrator. During review with the team, and after feedback from the Director, Nahla Kayali, we decided to shuffle the order of some items to better reflect the most used services by the clients.
working with wordpress
I decided to use WordPress as the content management system for the website so that it would be easier for other less tech-savvy content editors to make changes to the website, namely the Communications Director. I built the website from scratch, coded it using HTML and CSS markup, and added plugins for easy-to-use and edit features.
User testing and QA
Once the website was up and running, I processed staff feedback with Nancy, performing QA on the animations, layout, responsiveness, and content. We were able to meet the soft deadline for the website, which gave me enough to fine-tune the design for an exciting launch!
Making the first impression
Working closely with Nancy, we decided that we wanted to give the clients a sense of comfort right when the site opens. The AccessCal “family” mark, the bold motto, and a series of warm and welcoming “hero images”are the first impressions of AccessCal the user receives.
According to the data from 2017, the most used feature of the site is services which drives approximately 1/3 of the website’s traffic. It is clear that redesigning the services page to focus on AccessCal’s in-house services, community-based resources, and downloadable content has enabled users to find what they need, faster.
This feature is vital to AccessCal’s success with its seasonal classes and events. Making the calendar feature easy to find gives users access to many personal-development platforms.
With the new contact system, we wanted it to be easier for users to reach AccessCal. Now, there is no need to open another dialogue box or program, it’s all done on the same screen! In the footer, there are additional links to contact AccessCal, including social media.
Improving UX with Google Analytics
I am constantly looking for ways to improve user experience for visitors. Google Analytics is a powerfer too that allows me track user flow. I can determine the most popular features and errors in user experiences. For example, I was able to determine the most visited services and move them towards the top of the services tab, whereas previously they were on the bottom. Drop-off, which shows when a visitor left the site, showed that there was a 75% drop-off rate for the most popular service. After adding a “Contact Us” button on that service’s page, impressions to the contact page increased, and dropoff decreased.
AccessCal continues to see growth and flourish as a humanitarian aid organization that positively makes a difference in the local community. Visit AccessCal to learn more about their amazing services!