As a member of a volunteer UX team, I contributed to the redesign of the American Advertising Federation’s Austin chapter website. Collaborating virtually over a span of 7 months, we utilized design thinking and human-centered design principles to create a unique, eye-catching redesign resulting in increased membership engagement and a simplified backend update process.
Project Name: Redesigning a website from the ground-up for a local chapter of a national advertising trade association.
Client and Project Type: AAF Austin/Volunteer Project
Project Date: February 12th - September 1st, 2021 (~7 months)
As part of a self-organized volunteer team of motivated UX designers, I helped to reimagine the online presence of the American Advertising Federation’s Austin chapter. From shaping the project plan to developer hand-off of high-fidelity deliverables, I worked collaboratively with my team to deliver a website redesign as unique and eye-catching as Austin itself.
AAF Austin is a local chapter of the American Advertising Federation - an organization that elevates and supports the local Austin communication arts industry through various educational, networking and legislative efforts. In collaboration with UX in ATX, a local UX meetup group, a team of volunteers was assembled to design and prototype a clean slate redesign of the current AAF Austin website that better represented the Austin chapter and what the organization stood for.
Over the span of 7 months, our volunteer UX team leveraged design thinking methodologies and human-centered design principles to iteratively craft a solution that both met our target user needs and exceeded our stakeholders’ expectations. Our proposed solution offered a fresh new look for the AAF Austin website, with a vastly improved information architecture, an updated membership purchasing page, and a dynamic contact form designed to improve member engagement while simplifying the backend update process. The redesigned AAF Austin website is now live and can be viewed here.
Through key stakeholder interviews, usability testing, and a thorough analysis of the current website’s analytics and information architecture, our team identified several key pain points and requirements that would need to be addressed as part of our proposed redesign, including
Several constraints were set in place:
With our stakeholder requirements and project constraints in place, we set out on our project journey.
We conducted a heuristic analysis of the current website, a deep dive of website analytic data, and a competitive analysis of sister organizations/other ad agencies.
Our heuristic analysis of the website revealed several usability issues, including broken links on the sponsorship page and an event page that was out-of-date and difficult to read. Moreover, it was difficult to ascertain what the organization stood for just by visiting the website - was this an advertising agency? A lobbying organization?
A deep dive of website analytics data revealed that users primarily visited the site to get information on various advertising award shows including the Addy’s (formally known as the American Advertising Awards) and the Big Wigs. What are the broader implications of this revelation in the redesign of the website?
Our competitive analysis included an in-depth look at our sister organization sites including AAF San Antonio, AAF Dallas, and other local and regional advertising agencies. What worked well? What doesn’t work? How did our competitors' sites compare to AAF Austin’s? These are the questions we sought to answer with our competitive analysis.
We presented our findings to project stakeholders, who were impressed with the depth and scope of our findings. With a better understanding of issues with the current site, website utilization, and the competitive landscape, we were ready to dive into user research.
Leveraging human-centered design principles and our design-thinking process to better understand our users and identify their key needs.
A membership survey was sent out to collect demographic information on our users and help establish a user testing pool.
Synthesizing data gathered from ten virtual one-on-one interviews with various stakeholders from board members to potential members, we were able to create 5 micro-personas and corresponding journey maps to help better understand our users and their needs. Our personas varied from the younger prospective end user, to mid-level creative, agency owner, communication team member, and the organization leadership.
We used micro-personas and their associated journey maps to better understand our target users and inform our decision making process.
Using our personas and corresponding journey maps as our guiding star, we began our ideation process.
We redesigned the sitemap to streamline website navigation and address key issues identified in research including discoverability.
Our proposed sitemap showcasing the hierarchical structure of redesigned AAF Austin site.
Our team worked to create low-fidelity sketches and mocks of key aspects of the website. A key aspect of our design was creating reusable components that could be leveraged across the site to reduce development time, including:
An overview of our proposed low-fidelity wireframes featuring core aspects of the site. All wireframes and prototypes were developed collaboratively in Figma.
With stakeholder buy-in and our deadline rapidly approaching, our team had to adjust our timeline and quickly pivot to high-fidelity design.
In order to create a website that was distinctly Austin, our team sought inspiration from the city’s various murals and artwork as part of our design language.
We leveraged various bold murals found around central Austin as inspiration for our decision direction.
A componentized pattern library was created including a style guide complete with color template, accessibility chart, typography, and spacing as well as a library of reusable components used throughout the website.
Our pattern library featured our proposed color palette, typography styles, grid system and various reusable components.
A major point identified in our user interviews was that maintenance of the existing site backend was a challenge of herculean proportions resulting in a very high turnover rate within the backend AAF team. Additionally, we found many broken links and various questionnaire systems in place. In order to simplify this process, we designed a unified form field that leverages JavaScript to direct the user to the correct version of the required form. Because the form confirms that users have input the correct information prior to submitting, the backend comms team should have a much easier time reviewing and uploading user-provided data.
A test plan was created and executed with the objectives of:
Usability testing was conducted with 5 users of various backgrounds and experience levels. Testing occurred in a virtual one-on-one environment. Based on our analysis of testing results, 5 key areas of improvement were identified:
An executive summary of our findings was presented to project stakeholders. We applied the learnings from our user testing to our high-fidelity pages and pattern library templates and continued to iterate. Developer touchpoints were conducted throughout the design process to ensure alignment and technical feasibility.
Screenshots of the finalized high-fidelity mocks, featuring Home, About, and Membership pages of the redesigned AAF Austin website.
After months of virtual collaboration, user testing, and ideation, we finalized and packaged our pattern library and high-fidelity web and mobile page templates for final presentation to project stakeholders and developer hand-off.
By leveraging design thinking methodologies and human-centered design principles we crafted a solution that not only met our target user needs and exceeded our stakeholders’ expectations. Our proposed solution offered a fresh new look for the AAF Austin website, with a vastly improved information architecture, an updated membership purchasing page, and a dynamic contact form designed to improve member engagement while simplifying the backend update process.
