Website Redesign - World Affairs Council of Seattle (WACS)
Overview
Design Question: How might we make the current WACS website easier to navigate and increase its enrollment for membership?
Target Audience: Local and international english speaking audience interested in international affairs.
Design Methods: Comparative analysis | Surveys | Interviews | Personas | Card Sorting | Wireframes | Branding | User tests
The World Affairs Council (WAC) of America is a non-profit organization focused on educating and engaging the general public on global issues. It is comprised of the largest network of local councils in the United States, and has 98 chapters across the country.
In its current state, the purpose of WAC Seattle is unclear on the website because the information architecture mimics its inner organizational workings and content is not written with web users in mind. The ‘more is better’ approach is taken, which muddles the message around the body of work and social good that WAC Seattle does for both the local and international community. This negatively impacts the understanding of what WAC is and the ease of finding key information.
#1
User research. Personas.
Consumer Research
We interviewed and surveyed 25 website users. They were educated mostly in external affairs or political science, aged between mid-twenties and fifties and highly recommended WAC to their peers in the same field. We learnt that most of them were interested in networking and attending community events, and used the website primarily to find and register for upcoming events. The younger user population however preferred to save their time and effort by contacting the office directly to register for events and believed that navigating through the website is a task.
Some of our key takeaways were:
“Great people, great topics!”
“It’s a mess! It’s difficult to find information and then remember that path.”
“[The website] could be more engaging.”
"Some of the [website navigation is] not intuitive and therefore I often find myself looking through many [pages] despite having spent a good amount of time on the site."
Comparative Analysis
Perusing through the websites of the other chapters I realized that all of them followed a different information architecture and tended to prioritize different aspects of the organization on the landing page. However, the sites had clear calls to action, simplified navigation and easy access to important links.
Redesign Goals
After collating the research and taking into account client requirements, we devised business, branding and usability goals for the website.
Business goals
Successfully identify the client as the Seattle chapter of a larger organization.
Increase donations and memberships to Seattle WAC
Reduce the number of help requests made to the office for common tasks
Branding goals
Communicate to their audience in a unified voice
Encourage users to explore more content on the site and not just limit it to their immediate needs
Usability goals
Make the information architecture clear and intuitive
Allow users to finish key tasks quickly and easily
Improve the website's visual communication
Based on key tasks such as browsing and registering for events, networking with other members and demographic information, two personas were defined.
#2
Information architecture. User tests.
Information Architecture
The next step was to create a refined architecture to rid the site of redundant information, deeply embedded pages and the number of items in a menu. We used techniques like affinity diagrams and card sorting as well as platforms like Trello, Optimal Workshop and TreeJack.
The existing IA was unintuitive to outsiders and followed complicated paths to reach a destination. Users often ended up memorizing the path. It was also riddled with redundancies where the same option appeared under different menus.
The new IA had to keep in mind our users' key tasks as well as the kind of visitors the website attracts (wide age group as well as international users). It had to be scalable so that new items could be easily mapped to existing level one categories without the need to create more. One goal was to also reduce the number of menu items that obscure the entire page. Several of the existing items were moved to a level one category of it's own based on user insights and frequency of tasks.
Card sorting on Optimal Workshop helped us understand which are the biggest and frequently occurring card clusters.
User Tests and Findings
The new IA was put to the test using low fidelity wireframes and key tasks for the users to perform. 5 user tests were taken with stakeholders and website users with each of them performing the tasks in random order. The results of the tests were very promising and we received a hundred percent positive response from our users. They found the new IA to be easy to use and aligned to their business needs. The time taken to find a page has greatly reduced and the click rate dropped significantly. Most of users were highly impressed with the right-hand side navigation bar that afforded quick access to topics they would go to most frequently. Some of the paged of the lo-fi prototype and key user tasks are shown below.
#3
Finished product. Reflection.
Brand Tenets
Based on our client's requirements, user inputs and WAC mission statement, we devised the tenets that would guide the design of interface elements of the final prototype.
Brand Tenet #1: Welcoming to all demographics
Design translation: Welcoming and friendly language, big images. Encourage participation and membership without badgering users using subtle calls to action throughout.
Brand Tenet #2: Trustworthy (Business Casual appeal)
Design Translation: No mistakes in the information. A clean, consistent, and crisp grid, with colors that are professional. No dark patterns or attempts to hide information; in the case where the information can’t directly be provided, a point or method of contact is identified.
Brand Tenet #3: Engaging and Inspiring
Design Translation: Larger and high quality images, simpler work-flow, messaging is encouraging and warm. Call to action and clearly state how the user would benefit.
Brand Tenet #4: Community-centric
Design Translation: As the Seattle member council, colors should help connect the website to the community it supports: greens for trees, blues for water, grays for clouds.
Finished Product
My Contribution
Bringing this redesign to fruition was the collective effort of all team members and each one donned a specific hat during the different development phases, from project manager to developer and designer. I was the UX designer for this project and was involved in the end to end development of the website. In the user research segment I was involved in consumer interaction for surveys and interviews. I was also a part of the comparative analysis of different information architectures across WAC sites and prepared and conducted the online card sort exercise. Playing the role of the designer I not only fleshed out the design iterations at various levels of prototype fidelity but also tested them with users to gather feedback.
Challenges and Learnings
The first obstacle we faced was getting in touch with users repeatedly during the course of project. Our clients became our mouthpiece that would send out surveys for us with and get us in touch with users. This created a time lag and bottleneck and to overcome this we enlisted ourselves into the user list to gain inside access to other registered members. Another crucial point was scoping the project to get a sense of the MVP and obtain the client's buy in. Tackling some problem areas seemed more ambitious than others, such as designing for mobile, but others were necessary, such as redesigning a full scale information architecture. This proved to us how important research can be to answer questions on scoping, and after focusing on what are the recurring problems users face and what they want to accomplish, we had more clarity.
Team: Ashish Chaudhary, Lu Gan, Rachel Barnecut