MacBook view of MSource website

MSource

MSource is a boutique sales and marketing agency for food manufacturers, focusing on prepared foods to grocery delis and University foodservices.

UI/UX Design + Web Design & Development + Branding + Stock Photo Searching + Graphic Design

Goals

MSource has been in business for 15 years. Its mission is to help established, growth-minded prepared food brands and companies grow to their full potential. Lionel Binnie, owner and CEO of MSource, came to me looking for a fresh new redesign of his branding and existing website.

According to Lionel, “While I expect many of my new clients to come from my outbound, sales efforts, and networking, some prospects may find me through SEO.  In other words they may be inbound. For inbound web sources, my website is my main tool for engaging new prospects. And for my outbound efforts, I still want my website to represent me well, to solidify trust – any prospect will use my website to confirm their decision to work with me or not.”

MSource website on iMac

Branding

Lionel expressed that his existing logo was not memorable or fun. He also wanted to change the tagline “Channel Marketing Strategy and Execution”, which was obscure. People didn’t really know what that meant.

Lionel expressed that he wanted the new logo and style of the website to convey creativity, fun, trust, reliability and results. He said “food is fun, food is life, and food business is necessary and creative. If businesses associate with us, they will be successful.” He said he liked the idea of having the color red in the logo too. He wanted the tagline to be “Grow Further”. So I kept all of this in mind when designing the logo, and deciding on the color palette and fonts.

Logo, Color Palette and Fonts


MSource Logo
MSource color palette
MSource Fonts

Logo Variations

I initially started with three very different logo concepts, and this was everyone’s favorite, including mine. From there, I refined the logo and then designed it with different color schemes and variations. Finally, the version above was selected for the website.

Website Challenges & Solutions

The original website had been in existence for some time, and over time, the main navigation became disorganized and cluttered. So the first challenge was reorganizing, simplifying and improving the navigation so that information was much easier to find.

From the start, I knew that the photos and graphics needed to be high quality and professional looking. So I spent many hours searching for stock photography that best complimented the brand, look and feel that Lionel wanted his website to convey. I selected many photos with people, to give the website a more human element.

I created the soft background graphics for content sections, designed the infographics, and added interesting animations on the homepage, to enhance user experience and engagement. I spent a lot of time responsive custom styling, so the website design looks consistent, clean and beautiful from mobile to desktop.

As another quick way to visit the important pages nested in the main navigation, I added buttons on the homepage to link to all of these pages.

Three Device Mockup of MSource

The final result

This project required a total of almost 10 weeks of work, which encompassed the following:
Branding and logo design – 2 weeks.
Designing and iterating on mockups in Figma of the homepage and secondary layout, and creating a basic style guide – 1.5 weeks.
Setup for new WordPress website, stock photo sourcing, graphic design, custom styling from mobile to desktop (responsive design), content strategy, copy editing, site migration process, configuring plugins, creating and testing forms and links, implementing requested changes, writing up hand-off document and training for doing basic tasks on the website. – 6 weeks

The website is visually contemporary, bold, fresh and vibrant, easy to navigate, clean (non-cluttered), with a cohesive and consistent design throughout.

“Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.”

Responsive Design


Isometric display of MSource website

Website Presence


MSource Website Presence
Multi-device Mockup of MSource