Merchandising Solutions Group is a merchandising company that provides service and support in every aspect of merchandising to large manufacturing and distribution companies across the country.

With an extensive catalog of services, MSG needs a way to clearly communicate what they offer and how it can benefit potential clients.

Redesign Merchandising Solutions Group’s outdated homepage with an updated style guide in one week.

First, I conducted an audit of MSG’s current website so I could specifically identify what needed to be improved.

I discovered that along with the overall outdated design, the site lacked hierarchy and grouping — decreasing its scannability.

The cluttered navbar featured too many menu tabs both visible and nested. The logo takes up a large portion of the screen, drawing attention away from the site’s content. The site hides components that would increase trust and credibility, like a list of big-name clients located within the nested navigation. And, the most noticeable factor — the site had no call to action.

Next, I searched for competitors that align with MSG’s target audience and available services.

Reviewing competitors’ websites and creating a competitive analysis chart allowed me to pinpoint market trends and ways to effectively communicate with users.

Merchandising Solutions Group focuses more on what they can do for each individual client, specific to their needs rather than list services. The information across the website is one or two clicks away and they give a more personalized way for users to communicate with them through a portal login.

However, users have no idea of where to start or what to do next. With such an extensive catalog of services, the user needs a way to easily sort through all the information and complete their desired tasks.

Retail Merchandising Services clearly lists services with CMS page templates to easily organize and explain each one.

Merchandising Services Co. clearly explains who they are, what they offer and how they succeed, accompanied by success stories.

Lawrence Merchandising Services divides its homepage into two important CTA’s: services and careers. Everything is accessible from their five-tab navbar with no dropdowns.

Taking these components and comparing them to MSG's current website further emphasized my approach for clarity, honing in on service explanation and information architecture.

I pulled notable details from my website audit and turned them into virtual sticky notes in Miro.

I created an affinity diagram by using the data in Miro as pain points.

I combined similar pain points and condensed the list to focus on primary problems during this design strategy. I used dot-voting to label issues that I deemed urgent and most important.

Next, I inverted the pain points to create project goals and applied potential metrics to measure the success of each goal.

There wasn’t enough data for user personas but I used the pain points to identify the primary audience as manufacturers and distributors, and the secondary audience as potential employees (contractors).

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:

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.

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.

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.

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.

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.

I presented this design project to MSG and we plan to continue the design process to implement a full-scale site redesign.

Once we begin, I’d first need to confirm the assumptions that I made with quantitative and qualitative data. If that data didn’t agree with my assumptions, I’d have to redefine the project’s focus.

However, if that data did align with my assumptions, I’d further the design to include additional pages in the sitemap, conduct user testing, redefine or refine the problem, brainstorm new ideas, create new prototypes and conduct user testing again.

Following a successful design sprint and comparing the current site to the redesign, I see a significant time jump.

A once outdated website is now a modern and updated representation of who MSG is — a nationally recognized merchandising service company that continues to grow by the day.

I walked into this design sprint with a mission — use present day design solutions to bring MSG's website to 2022.

A site full of rich content, the information was easily lost in the cluttered and desheveled design.

MSG has the credentials and experience to be the key competitor in the merchandising industry, and the website needed to show as much.

And after my discussions with MSG’s board, I can help keep MSG up-to-date in an always-growing digital world. Because if their services compete with everyday competitors, their site will too.