Background
My roles: UX, 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).
sketches & 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- to mid-fidelity wire frames for the site, including the timeline (on the right).
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.
Developing the footer layout and architecture.
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.
Since the Chamber was coming up on their centennial, we wanted a scalable pattern that showed off their robust hisAnother custom piece of UI was the region selector for their
Chamber Benefits Plan.tory 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.
The region selector UI. Users chose 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.
result
The site launched in August 2022 to rave reviews from the Chamber, and was an Awwwards
nominee.
