Andrew Rossi
Leading the relaunch of the American Institute of Graphic Artists’ website for the Kansas City chapter.
Design System
Development
UI/UX
Web
I implemented Google Analytics to track our effectiveness, and find areas of improvement. Since launch, we ahve seen a 133% increase in active users.
The AIGA Kansas City website serves as a hub for local design professionals, students, and community members. When I joined the board, the site worked but was in need of an overhaul.
After discussions with the chapter president, I distilled these goals for the project:
🎨 Modernize the visual design of the site
🌱 Create a flexible design system that supports content growth
🔍 Make event discovery and submission easier for users
💪 Empower board members to update the site without developer help
One of the biggest challenges was working within the constraints of WordPress. AIGA is committed to using WordPress, which often makes it difficult to achieve modern layouts and UI without relying on a patchwork of plugins. On top of that, I had to preserve the existing use of WPBakery for page building, which limited design flexibility and required creative workarounds to maintain consistency and usability. (more on this later)
I knew it would be difficult to book people's time to ideate on the website, so I got the Communications team together for a design sprint to make the most of our time.
(Obligaotry proccess pictures)
Through the design sprint, we discovered common themes we wanted to pounce on:
How might we showcase the benefits of joining AIGA?
How might we give our members a platform to help grow their career?
How might we help users understand the difference between AIGA National, and AIAGA KC?
To address these challenges, I designed multiple solutions to help us meet our goals.
One of these was the “AIGA Doodle”, an ongoing opportunity for members to submit creative designs or illustrations to be featured on the homepage. Each doodle links to a dedicated page showcasing the creator and their work, along with an archive of past submissions.
Events are at the heart of AIGA KC, so we made sure they got the attention they deserve. I simplified the event cards for better readability and visual hierarchy, making key details easier to scan at a glance. Tags were also introduced, allowing users to view and discover events by interest directly from the top level of the site.
Joining AIGA can feel unclear for new users, so I created a dedicated Join page to make the value obvious. It breaks down the benefits of membership, the different membership levels, and step-by-step instructions on how to join, making it a no brainer.
To implement the new designs, I had to get creative. The goal was to build custom UI components while still making content editing simple for non-technical users, no coding required.
I leveraged two key plugins and WordPress’s PHP-based flexibility. Using Advanced Custom Fields, I configured form fields to appear on specific pages and post types. With custom PHP, those inputs dynamically generated HTML, which I then styled using CSS in the theme file editor.
This allowed users to add visually custom components directly within the WPBakery editor, without breaking or interfering with existing elements
To take it further, I used Custom Post Types to create dedicated CMS structures for repeatable content types. This made adding new content as easy as filling out a form, streamlining both design and editorial workflows.
Custom component shortcodes: [home_doodle], [home_member_preview], and [aiga_events_grid] are inserted seamlessly in the WP Bakery editor allowing users to use a mix of default or custom components.
To put it simply, A LOT! There are still are a few pages to be reworked, new features we would like to add, and enough bugs to feed a chameleon. I'm exited for this project to keep eveloving, and check back to see more updates
