AAF Austin Redesign
A redesign for the American Advertisement Federation's Austin chapter website.
Challenge
Overview
AAF Austin is an organization that promotes the communication arts. It provides opportunities for learning, networking, and community within Austin, Texas.
However, after more than six years, the homepage had not changed significantly to address accessibility issues, consistency on the back-end, and general aesthetics. Along with a national AAF rebrand in the winter of 2021, all other chapters were required to reflect the changes.
This gave AAF Austin the opportunity to not only rebrand, but also fix its major UX issues.
How can we update the current website for Austin’s chapter of AAF to adhere to branding changes and make adding and editing content easier?
Scope
The design process and final iterations started in the Spring of 2021 and ended in August 2021. Development took place from May 2022 to July 2022.
Constraints
The project was a volunteer-driven effort. Standard Beagle facilitated and mentored a group of volunteer UX designers, and followed up with the website build.
Implementation
The site was developed using the WordPress CMS with the Gutenberg block editor. The theme is custom, with specialized blocks based on the design needs.
Our Goal
AAF Austin decided to redesign the website to better reflect the modern and eclectic style and technical capabilities of Austin’s design and advertising community.
Goals
- Update the style of the UI to adhere to national brand standards
- Rethink the UX of the site on both the front-end and back-end
- Develop with flexibility and ease of content editing in mind
Our Solution
Standard Beagle decided to create an opportunity for aspiring junior designers.
We invited a team of of six design volunteers from the UX in ATX community to conduct research and design, while our development team developed the website. During the design process, we provided mentorship, guidance and feedback. Ultimately, this project helped several designers on the team to gain full-time positions.
Results
A website that reflects national AAF branding, Austin’s unique style, allows administrators to easily edit and add content, and makes AAF’s offerings easy to find for users.
The website was ready for launch in Fall 2022 as the AAF Austin team wrote content for the site and prepared to make the transition.
Our Process
Understand
The designers began by performing stakeholder interviews and reaching out to members to understand pain points with the current website.
Surveys and Stakeholder Interviews
Designers surveyed current AAF Austin members and stakeholders to understand pain points with the website. Alongside stakeholder interviews, the team discovered issues with the site that included outdated templates and information and inconsistencies in displaying information.
Heuristics
A heuristic evaluation revealed numerous front-end usability issues, such as lack of accessibility standards, difficult navigation, broken links, and a lack of images to lend credibility to the website.
Explore
Competitive Analysis
With stakeholder and member feedback and an evaluation of the website, the team analyzed competitor websites’ strengths and weaknesses.
They found areas of opportunity in
- Clear, visible calls-to-action and messaging
- Clean navigation
- Giving components more space to reduce cognitive load
Information Architecture
The design team drew up a new sitemap to improve discoverability of the site’s most important features.
Personas
Feedback from the members and stakeholders provided a base for several user personas.
- The agency owner, who wants to be a part of AAF and increase awareness of their own agency.
- The college graduate, who is looking for job opportunities.
- The website coordinator, who needs to quickly post new content, news, and events on the AAF Austin website.
- The mid-level creative, who is looking to give back to the community through mentorship.
- The AAF Austin board member, who needs to understand how the website works to upload important content.
User personas
Design
While the volunteer design team worked on wireframes, they also focused on implementing AAF Austin’s new brand.
Style Guide
The design team decided to work with the new brand logo, taking the colors on the gradient as their base palette.
Usability Testing
The design team conducted five user tests on a high fidelity prototype and identified five main points for improvement.
- Clean UI for card components with guidelines around proper usage.
- Have all board members visible at once in the About section, with a blurb on each member to create rapport with the AAF community.
- Improve the display of membership joining section, membership benefits, and relevant pages.
- Improve clarity around award show copy, giving additional context for new users.
- General improvements to copy and headlines.
Hi-Fi Designs
Create
With the designs in place, we began developing the AAF website. The site would require several custom-made layouts with the ability to shift and be modular.
Designs were developed as a custom WordPress theme, built around the Gutenberg block editor in WordPress. We wanted to merge a drag-and-drop editing experience with the familiarity of WordPress.
Our team also used a mix of fully custom blocks, advanced custom fields, patterns, reusable blocks, and standard WordPress blocks.
Custom Blocks
Two primary designs could not be implemented with basic Gutenburg blocks. These designs relied heavily on user interaction and were more intricate and could not be built using the standard framework.
- History timeline block
- Membership display block
The AAF design required certain elements to interact in specific ways, such as icons on the history timeline that needed to be clickable and change information, and connect to arrow controls. Since this functionality did not exist on the standard blocks, we used the flexibility of building a custom block to meet these needs.
Custom Components
We needed a custom set of inputs to control the appearance of components. However, we didn’t need the advanced features of a fully custom block. In these cases, Advanced Custom Fields (ACF) custom blocks allowed us to provide the custom templates the components needed without writing extensive back-end code.
Patterns
We used patterns in cases where we needed more than a single block to make a design repeatable. To future-proof the design, the client needed to be able to drag-and-drop intricate collections of blocks quickly and easily as needed. We wanted to avoid requiring the client to configure code in order to edit the website. Rather than needing to understand each piece of the design to configure it correctly, the patterns created an easy, drag-and-drop template.
Overall, the low-code, user-friendly design was put in place to allow a complex site to be editable for anyone using the back-end.
