For the sitemap, I first created 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 also 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.
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.
Mission & Focus
I created a low-fi wireframe of MSG’s homepage in Figma. I shrunk MSG’s logo and added it to the site’s main navbar to be used as a home button and site identifier.
I also moved the portal login and added a site search to a smaller, less prominent navigation that would go at the very top of the site.
With the wireframe alone, the site already looked modern and up-to-date to satisfy our project goal regarding the site’s appearance.
Initially, I wanted more than one testimonial in a carousel, but I realized one testimonial would work well along with the infinite horizontal scroll for client logos beneath the hero section.
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.
I decided to do away with MSG’s current typefaces: Times New Roman for headings and Droid Sans for body text.
I chose Lato as a replacement because of its accessibility and its multiple weights for consistent hierarchy. Using one less typeface would also improve the website's performance.
Readable & Approachable
Lato is also known for its readability and while professional, it is still approachable for inquiring users and potential clients.
I used DevSwatch to create a color palette based on the color codes in MSG’s logo.
Since the website only used black and white, I made several adjustments to create a consistent color palette that would embody MSG’s identity and also aid in the site’s hierarchy.
Red is a strong color that invokes action, paired with a calm color like dark blue which also invokes feelings of trust, the two make a well-balanced team for the site redesign.
For the high-fidelity design, I used stock images from unsplash.com that could fit the company’s message.
Finding the right text to accompany the images took a bit of time. With MSG's many services, I didn’t want to clutter the homepage explaining each aspect of MSG’s process with clients.
I referenced my affinity diagram for inspiration where I saw the note that states “There are clear CTAs telling me to contact them, look at their services or apply on their careers page.”
What I needed was captivating text that made users want to learn more. So, I began writing from a sales perspective. I aimed to write engaging text compelling users to navigate the site.
I also decided to deviate from the wireframe while designing the testimonial section to breakup the uniformity of the homepage.
I didn’t want the site to come across too corporate or boring. I wanted to add a dynamic section using floating components and asymmetric design choices.
A Design For All Screens
I also made sure to address the responsiveness of the website, a key pain point in the affinity diagram, by giving the site a max width of 1400 pixels and making the site accessible and easy to navigate on mobile.
The mobile version of the site features a fixed navbar that expands and collapses the site’s navigation menu.
View Interactive Prototype
Desktop and Mobile View Available