Select Page

Mervin Made

Interactive Microsite

Description

Interactive microsite highlighting Mervin’s history, culture, and core values.

Roles

UX/UI Designer, Animator

Deliverables

Sitemaps, user flows, wireframes, prototypes, visual design comps, illustrated animations, design assets

Tools

Sketch, Photoshop, InVision

Mervin Manufacturing asked me to help them create an interactive microsite highlighting Mervin’s history, culture, and core values—particularly their longtime dedication to the environment. Featuring a map illustrated by Quincy Quigg, the site showcases a series of videos to be explored in a fun digital landscape.

With a general idea of what the team wanted, Trevor at Mervin brought me in for planning and ideation to kick off the project. The team and I worked together to explore concepts that would result in a fun-to-explore microsite. From a technical standpoint, the site would need to work across desktop and mobile, while keeping the development efforts to a minimum. Facing a short timeline, it was an exciting and challenging project.

Mervin Made micro site mobile prototype

User Experience (UX) Design

Research

Due to time and resources, the research stage was short. As always, I started with asking a lot of questions about their brand and the goals for the project. I also bookmarked a variety of map-based interactive experiences for the team to review; this allowed me to gauge their response to different experiences, as well as to determine viable technical solutions for our project needs and restraints.

User Flow

Content flow is always an important stage of user experience (UX) design. This was a driving force throughout the project, as we sought to value both freedom and order. We wanted to offer users the freedom to explore the map and jump between videos, but we also wanted to encourage them to view the videos in a specific order. The goal was therefore navigation between videos that is both is intuitive and orderly, with the top menu serving as a secondary option for navigation.

Mervin Made microsite user information flow desktop
Information user flow, mobile

Wireframes

After exploration of concepts through rough sketches, wireframing in Sketch enabled me to clearly present content layouts. These low-fidelity designs allowed quick iterations, without the distraction—and invested time—of visual design.

After exploring a variety of mobile layouts, the Mervin team determined the best approach would be to abandon the map on mobile to focus on the orderly presentation of videos. This would simplify design and development, as well as ensure the focus would remain on the video showcase.

User experience wireframe sketches
Mervin made microsite wireframe map home
Microsite user experience wireframe info panel
User experience wireframe sketches
User experience wireframes mobile

Visual Design

The overarching tone and styles were derived from the Mervin Manufacturing website. The consistent styles make the microsite feel familiar to returning users, while the unique layout and new artwork stimulates the desire to explore.

Illustration and Animation

The primary UI component I was responsible for was the illustration and animation of these sign posts, which each represent a video in the series. They needed to be executed in the style of the map artwork, while standing out as actionable items to encourage click-through. I sketched them in the Procreate app and then imported them into Photoshop to export as animated GIFs.  

I also improved the visual design of secondary signs used throughout the maps. The original sizes and fonts were inconsistent and messy in an already busy—yet fascinating—landscape. My solution was to use a more simple and legible typeface throughout, while scaling them back in size and contrast. This prevents users from mistaking the secondary signs as clickable items.

zero hazardous waste animated sign
made in the usa illustrated and animated sign
eco process illustrated and animated sign
eco power illustrated and animated sign
Mervin made microsite map illustration
mervin made microsite map update
mervin made micrsosite map with new illustrated signs
Mervin Made interactive, illustrated and animated map for microsite

Prototypes

During the wireframing and mockup stages, I created and presented prototypes using Photoshop and InVision. Though they don’t implement all of the intended transitions, such as zooming on the map view, it enabled the Mervin team to preview the experience and make important decisions prior to sinking time into development.

mervin microsite mobile phone prototype
Mervin made microsite desktop interactive prototype

The Final Microsite

After a few adjustments following the prototypes shown above, I supplied the Mervin team with all of the native files and web-ready exports required to build the site. Tony Keller at Mervin developed the microsite beautifully, with an approach to transitions that made development simpler without sacrificing the interactive experience.

View additional projects: