VSSL Agency
VSSL Agency &$%@ NSFW LANGU A GE MODE
&$%@ NSFW LANGU A GE MODE
VSSL Agency

The Right Way To Upgrade A Website

MAPP Brand Refresh, Website Design, UI/UX

VSSL Agency

You get one chance to get the new site right.

A situation familiar to many

This is a project that began life as a single webpage for our client Mapp. But like many once-new companies, Mapp had outgrown the brand and website that served them so well in their wild, young start-up days. Recognizing this, they gave us permission to ignore their brand guidelines for this page. And we set out to create a new design aesthetic to match the vibrant enterprise they had now become.

Background

Mapp provides powerful AI-based data analytics to marketers that “liberate” them from gut-based decision-making and form the basis of highly personalized, cross-channel marketing campaigns. Prior to this project, the company’s youthful exuberance and sense of fun were on proud display on the site, including an adorable illustrated sheep to deter marketers from following the herd. When the new page design was presented, their eyes and imaginations lit up. So impressed was Mapp with the enterprise-level aesthetic of the new page, they immediately understood that the time had arrived to redesign the entire site. And VSSL’s single-page design would now encompass everything.

How to begin

The redesign of a website is a challenge for all involved. In this case study, you’ll see how, by establishing a process, strategy, and brand guide in advance, VSSL and Mapp’s partnership made it work and created a final product that everyone was looking for and totally thrilled with. Even when the project was still a single page, we had put in place a working process based on communication and collaboration, with clearly defined responsibilities and expectations: no grey areas. We adhered to it rigorously, listening to the client to understand their situation and needs, which led to success on the initial design. Then we ramped up.

Services Brand Refresh, Website Design, UI/UX

Website Mapp.com

VSSL Agency
Illustration of the MAPP product
Two employees walking and talking together MAPP employee
Illustration of MAPP target Collage image of MAPP employees

Enterprise-level Execution

Scaling a project from a single page to an entire site is a substantial undertaking. Based on our experience, we can definitely make a few recommendations:

  • Have a process in place first.
    The process we put in place for the webpage was expanded to include more extensive creative and technical intake from the client, including written client-written briefs to guide the design team. The scope of the project, deliverables, timetables, and roles were all worked out in advance. The result was very few rounds of revisions and the right final product.
  • Develop a brand guide, let it lead.
    The value of a brand guide for immediate decisions and long-term brand stewardship can’t be overstated. Without a brand guide, you’ll make major decisions on the fly, then make them a few more times. With a brand guide, your brand and design choices have clear instructions for maintaining brand integrity as time moves forward.
  • Any redesign must have a strategy.
    Both you and your design team share the same goal: the successful fulfillment of your business strategy. By partnering with your design team to share your thinking and your goals, and listening to their input, you make them part of your strategy, with all decisions made in its service. Design can become one of the most powerful tools in your branding and business plans.

“Brands need consistency, but also the flexibility to grow and mature along with the company they represent. With the redesign, we retained certain core elements, but repositioned Mapp to stay relevant to newer audiences.”Michael Gauthier Creative Director, VSSL

Desktop images of MAPP website

Our Design Strategy: Elevate The Brand

Any agency working on your brand must understand and respect the history behind it. VSSL’s design strategy for Mapp was based on elevating the brand, not tossing it and starting over.

The new Mapp Brand Guide we created put forth a calculated evolution of continuity and change. We kept their logo and fonts, but added to their existing color palette and redefined its use so that color was both restrained and high contrast.

We enriched the site with custom illustration, which combines isometric elements with persona-based photography for an ownable, inclusive, and instructional aesthetic. It explains what they do, of course. But it humanizes them as well, so customers see that Mapp’s people are as important as their platform.

The brand narrative also matured from the sheeply don’t-join-the-herd metaphor to a much bigger story of expertise, insight, technology, and results, with just the right amount of brand playfulness kept.

The final product is now more welcoming and useful to potential customers. But more than that, as Mapp has grown into a peer among established enterprise technology companies, they now have a website to match their achievements.

Related Work