ANDY DUNMIRE
  • Welcome
  • Portfolio
    • Debit Card Servicing
    • Hold Protection
    • Conference App
    • Invoicing Simplified
    • Design Facilitation
    • Homepage Redesign
    • Stanford Engineering
    • Hotel Internet
    • All Case Studies
  • Logos & Branding
  • Contact

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

Picture
Main Company Website
Picture
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
Picture

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
Picture

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.
Picture
Picture

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.
Picture
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.
Picture

Drafting Content

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

Final Execution

Picture
Picture
Picture

Mobile View

Picture

Desktop View

Picture
Picture

Hi, I'm Andy!

I'm an award-winning designer in Silicon Valley.
COPYRIGHT © 2011 — 2020. ALL RIGHTS RESERVED..
  • Welcome
  • Portfolio
    • Debit Card Servicing
    • Hold Protection
    • Conference App
    • Invoicing Simplified
    • Design Facilitation
    • Homepage Redesign
    • Stanford Engineering
    • Hotel Internet
    • All Case Studies
  • Logos & Branding
  • Contact