MY ROLE UX Design, Research, UI Design
The team also included: a Developer, an Art Director, and a Copywriter.
RESEARCH I conducted some competitor research as well as a deep dive review of the many programs and initiatives that the Missouri Chamber had up and running. During the research, we specifically identified that the Montana Chamber of Commerce felt like a similarly sized chamber and became our bar we shot to clear.
On the ambitious side, we identified the US Chamber of Commerce as our highly aspirational bar to clear (specifically that absolutely gorgeous mega-menu).
Our baseline analysis also showed that most site visitors dropped off after 1-2 pages of the site.
SKETCHES AND WIREFRAMES The first hurdle I had to clear with this re-design was to digest and understand all of the programs, offerings, events, and content on the old MO Chamber site. The site was very dense and lacked a consistent structure and navigation, so there was a lot of search bar usage involved. It was pretty common for a team member to shoot out a chat message to the tune of “did you know the Chamber had a _____ program?!?”
This recurring theme kept our site map nimble.
The first step was organizing all of the Chamber's programs into a sitemap that made sense.
An early sketch planning some of the info architecture of a page.
Some low-fidelity wireframes for the site, including the timeline (on the right).
Developing the footer layout and architecture.
UI DESIGN After wireframing the entire site, I worked with the art director and developer to build out the specific UI elements for the site.The Chamber wanted to project a “tech-forward” image and shed the “stuffy old guy vibe” that they felt they had before.
We ultimately decided to lean into common UI patterns to keep the site understandable, especially knowing that a significant chunk of our audience was older and less tech savvy than the average.Using these common parts let us focus more time on a few specific custom pieces of UI.
The Chamber’s timeline UI was one of the bigger ones.
One of the cards on the Chamber's timeline UI.
The timeline in action.
Since the Chamber was coming up on their centennial, we wanted a scalable pattern that showed off their robust history and project that tech-forward vibe they were so excited about. This pattern could grow to hold significantly more timeline moments as the Chamber dug through their archives.
Another custom piece of UI was the region selector for their Chamber Benefits Plan . This pattern could grow to hold significantly more timeline moments as the Chamber dug through their archives.
The region selector UI. Users choose their county from a dropdown, the map changed to show which coverage region they were located in, and the button would appear after a county was chosen.
This UI shows the user which of the two coverage regions they’re in based on their county. The user selects their county from an alphabetical drop down list, and the state graphic changes to reflect which region they’re in (while also providing a bit of visual feedback).
Once the user has their coverage zone, the UI displays a button taking the user to a list of brokers.
There are other small examples of UI TLC peppered throughout the site (the hover effect on the buttons, while very simple, is probably my favorite part of the site). Each example compounds on presenting the Chamber as a nuanced, tech-forward business.
The MO2030 initiative was another area of the site where we leaned into the "tech-forward" vibe through the use of subtle animations and infographics.
Working through some of the animations for the MO2030 page.
To solve for the “1-2 page drop off” that we identified early on, I came up with a smart “Related Resources” section that sat just above the footer on many pages.
The thought here was to bring relevant “next steps” right to the user based on the content that they were just engaging with. All of the content throughout the site was very intentionally tagged, so that this section would pull the three newest pieces of site content that were tagged for similar topics.
OUTCOMES The site launched in August 2022 to rave reviews from the Chamber, and:
Was an Awwwards nominee. Average site visits doubled to 3-4 pages per visit
