Mervin MadeInteractive Microsite
Interactive microsite highlighting Mervin’s history, culture, and core values.
Sitemaps, user flows, wireframes, prototypes, visual design comps, illustrated animations, design assets
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.
User Experience (UX) Design
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.
Content flow is always an important stage of user experience (UX) design. This was a driving force throughout the project, as we sought to encourage 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.
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.
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.
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.
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.