Responsive Site

Responsive Marketing Site

Consolidate & Redesign Two Websites

Background

Service Measure is a UK-based multinational market research firm that specializes in mystery shopping, dining and guest programs. Over the last decade, Service Measure has revolutionized the business with innovative technology, offering industry-leading products and services. The company's online presence however had not kept pace and needed to more accurately reflect their authority. In addition to the company's main website and portal, a second site site exists to support the company's newest digital products.

Goals

Drive leads through an easy-to-use contact form
Position the company as market leader
Modernize the overall look and feel

Original State

Main Company Website

Separate Product/Service Website

Exploration

Finding Connections

I mapped out the original architecture to better understand the relationships between the two sites.

Two domains/sites
Two log-ins/systems
Disjointed transition between sites

Personas

Peter, Gregory and Mark are all users of the core technology and products, but Peter and Gregory are the primary users of the marketing website. Since they both are extremely busy and motivated by financial returns, I intend to make the site:

Bold to visualize the superior services and value
A high-level summary to allow users to quickly skim content
Consolidated into single marketing site

Initial Wireframes

I started wireframing by initially blocking out specific sections to tell a logical narrative through a single scrollable page. The idea was to give Peter and Greg everything they need to know without requiring a click. However, I would actually use additional pages to feature the company's innovative technology products and services in more detail

After creating the shell of containers, I went back through the wireframe to rough in some content ideas. For instance, I'd actually feature screens from both products, framed within a desktop monitor and iPhone for added context. I'd also use bold background photos of restaurant, hotels or retail settings in many of the blocks.

To retain the slim login form for the two different portals, I'd toggle between the forms based upon the users current page.

Responsive Framework

With a rough wireframe in place, I needed to drill into the details of a responsive navigation and layout. I'm making the contact button persistent across screen sizes since that's the primary goal. For mobile devices, I'll use a floating hamburger icon that reveals the navigation menu overtop of the site.

The architecture would be identical for mobile users, however the content within each container would automatically reformat. This does create long screens but I'd offset that with the bold photography and formatting between sections. The clearly visible buttons will also help Peter and Greg take action quickly.

Drafting Content

The client and I collaboratively drafted content for the new website using a mockup created within Google Slides.