Hero image

Overview

Metaps was preparing for its IPO and required a rebranding overhaul of its flagship site. The brief was to create a multilingual, responsive site which highlighted key product features and delivered one integrated brand experience.

Ideation

Our kickoff meeting looked at the metrics from the dashboard to surface popular pages and help plan out a site map. Mapping out the site on a whiteboard made it easy to visualize the basic structure and navigation required across the site. We also carried out a heuristic analysis of the current site to identify what needed to change and why. Our KPI was to springboard a new marketing campaign before the IPO and drive business leads through a contact page.

Design process

Iteration

Doing a content audit we came up with a site map and good starting point for sketching. There would be five pages: home, analytics, promotion, engagement, and revenue. I took a mobile-first approach to focus on content structure over element positioning.

Design process

Wireframes were developed into clickable prototypes. I kept the visuals light and unobtrusive to match the dashboard’s style guide and other products which I’d previously designed. To bring a unique level of branding to the project I did a photo shoot focusing on displaying the product on laptops and mobile. High-level mocks were test driven with InVision and solicited for group feedback.

Implementation

To scale and rapidly code the site, PHP partials were used for repeatable header, footer, and nav elements, then implement Zurb’s Foundation to do the heavy lifting. A sub nav was implemented that became fixed on scrolling to highlight your current position and provide a more intuitive user experience.

Retrospective

A/B test and try and identify if there’s a statistical significance between designs. A design sprint involving all the stakeholders may have created a more diverse and interesting outcome.

Visit

www.metaps.com
Designs are subject to change since leaving Metaps.

The final UI design: