Role
UX Designer
Timeline
March - August 2024 Live product
AAJA Style Guide
Example flow of the Style Guide site!
Project Brief
AAJA was looking to launch a new website for a project that had been in the works — a style guide for language related to the Asian American experience that the organization could help contextualize and define for newsrooms looking to have more inclusive and culturally competent coverage. When I onboarded to the project, the Style Guide lived in a Google sheets document.
The goals were- Bring this document to a live website that could be easily updated
- Make it easy to shared entries across the industry
- Track clicks and shares of these entries
Context and competitive analysis
The first thing I did to understand more of the context this project would live within was audit the existing AAJA sites. There was a parent site for the AAJA organization at large, and another initiative site for AAJA Studio, the organization’s mentoring program. What I wanted to do was ensure this Style Guide site fit visually into this ecosystem, but also had its own fresh and modern approach.
I also looked at other Style Guides like Language Please and the Global Press style guide. I paid particular attention to how these guides filtered and organized their terms!Early competitive and brand analysis
Concepts
To start, I built out extensive wireframes of how the site would flow and work. I offered a few different interaction options to the team to see what would work best.
I also designed out two aesthetic approaches to the site that built off of the AAJA branding guide, working in tandem with the parent site’s visuals while also giving the Style Guide its own feel. The team opted for the bolder aesthetic, choosing strong color recognition for the branding of the Style Guide. Early wireframes + aesthetic options
Feedback and refinement
Once we had an idea of the site flow and aesthetic in place, I built out a fully functional mockup for the team, both for desktop and mobile. I presented these prototypes to the team through two rounds of feedback, and then worked with the developer, Shelly Cheng, to translate these designs into a component set we used to build the final site. Figma pages and components delivered for development
Final designs
The final site was revealed at the AAJA24 conference in Austin, Texas, with a live demo of its use and intent.
Demo of the site
The front page also has a “Featured terms” module that can easily update through our Airtable backend, so that the words featured there can match the news of the moment.
The site features robust search and filtering for the terms, as well as the ability to copy and paste links for specific entries.
The site also features a clear “how-to” for the guide, to onboard all visitors their first time.
As the Style Guide is constantly updating and adding terms, we made sure to build the database through Airtable so it would be easy for a rotating cast of volunteers and board members to edit.
Reception
The site was received with excitement at the conference, and the first meeting of volunteers met the week after. We also launched a small campaign on Instagram, highlighting favorite terms from each founding member.
The Style Guide is consistently updated: please feel free to submit any other terms you’d like to see researched and added to the site here. My Style Guide feature on AAJA’s Instagram
This site is always a work in progress. It was last updated February 2025.