A WHOLE NEW LOOK: MERCHANDISING SOLUTIONS GROUP
Bringing an outdated website into 2022 — Merchandising service and support for manufacturers and distributors.
Time
1 Week
(May 2022)
1 Week
(May 2022)
Deliverables
Responsive Homepage
Style Guide
Responsive Homepage
Style Guide
Role
UX/UI Designer
UX Researcher
Content Writer
UX/UI Designer
UX Researcher
Content Writer
Background
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.
Objective
Redesign Merchandising Solutions Group’s outdated homepage with an updated style guide in one week.
This redesign was unsolicited but after reviewing it to MSG's leadership board, it ultimately led to a site-wide redesign — currently in progress.
Impact
In order to measure the anticipated success of the homepage redesign, I worked to create trackable metrics relevant to a full-scale redesign, ensuring to include data gathered through market research.
With an updated look and improved navigation, the trustworthiness of the site increases. Users can easily discover who MSG is and what they offer without leaving the site.
Creating clear call-to-actions tells the users what to do next. Users can clearly see who the website is intended for and with proper guidance, they can discover MSG’s services and how to contact them.
Research
Website Analysis
First, I conducted an audit of MSG’s current website so I could specifically identify what needed to be improved.
Initial Thoughts
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.
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.
Competitive Audit
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.
Retail Merchandising Services
Merchandising Services Co.
Lawrence Merchandising Services
View Competitive AuditMerchandising Services Co.
Lawrence Merchandising Services
Key Takeaways
Through my analysis, I discovered MSG’s market advantages and areas of improvement.
Merchandising Solutions Group focuses 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.
Opportunity
Taking the information gathered through market research and comparing it to MSG's current website further emphasized my approach for clarity, honing in on service explanation and information architecture.
Problem Space
In order to define our problem space, I pulled notable details from my competitive audit and turned them into virtual sticky notes in Miro.
Affinity Mapping
I used those virtual stickies to create 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.
Through this exercise, I discovered the main obstacle for users — they struggle to learn more about Merchandising Solutions Group and what they offer.
There’s an opportunity to better guide users throughout the site, thus improving their understanding of MSG’s mission and purpose.
Our Audience
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).
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.
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.
Prototype
After solidifying the sitemap and style guide, I moved to Figma to begin creating wireframes for our reimagined homepage.
Responsive Wireframes
I created low-fi wireframes of MSG’s homepage for desktop and mobile. 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.
Responsive Design
For the high-fidelity designs, 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 uniform. I decided to add a dynamic section using floating components and asymmetric design choices.
A Design For All Screens
I 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.
Reflection
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.
Response
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.
Before & After
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.
