Design
My first step in the design process was to redefine the sitemap. I started by creating a mind map in Miro.
Identifying the general audience, reviewing the competitive audit, and using the affinity map as my guide helped me clean up the information architecture by consolidating and reorganizing pages based on priority.
To address the navigation pain point, I simplified the navbar and sectioned the site into four key components:
Services — users can find what MSG offers.
Careers — users can identify how to join.
About — users can discover who MSG is.
Contact Us — users can get in touch.
I addressed another pain point, the site’s trustworthiness, by including a section for social proof on the homepage which highlights big-name clients and testimonials.
I also recategorized services based on name instead of company-type to help clients easily find what specific services they need.
These changes helped me address the main user goal — create a logical flow and clear information architecture.
Information Architecture
After solidifying the navigation in Miro, I moved to Figma to create a simple design of the sitemap.
This helped me organize the notes I compiled along the way and pinpoint smaller details that needed to be addressed before wireframing.
With the sitemap in Figma, I could visualize the task flows and how users might interact with the new primary and secondary CTAs.
Adding Style
Before I moved on to the final design, I wanted to create a style guide that would help me during the design process and refer to later.
Since MSG doesn’t have a style guide, I had to create one myself.
We also established design principles and key characteristics for our mission and focus — centered around how users view the MSG brand.