The Legacy Lab Full Digital Branding
The Dustin's Words device

The Legacy Lab

Digital branding & conceptual design

My Role

  • UX Designer
  • Interaction Design
  • Ideation
  • Brand Development
  • Video
  • Animation

Employer

matt-reamer

Client

the-legacy-lab-logo

Responsive Website Build

The Legacy Lab shows brands how to inspire loyalty beyond reason, create worth beyond value and build relevance beyond today. Team One studies the best practices of brands that build lasting legacies and engagement. The Lab explores a roadmap that any brand, old or new, can follow. A small team was assembled to help brand The Legacy Lab and build it’s digital presence and I was fortunate enough to be a part of that small team from the beginning focused on all aspects of the digital presence weather it be UX to video content.

The KPI’s we had when building the site was to bring in brands for Workshops, showcase recent research and insights as well as distribute articles and workshop coverage. Responsiveness was another KPI as this website had to integrate with the current team one website. This led to multiple design issues we had to considerate and design against.

We did not only think about the experience of the user, but also the experience of the writers and content generators for The Legacy Lab going forward. This is why we built this site into a CMS with multiple post style templates we designed and how that data is parsed out to thumbnails on the landing page.

Discovery + Wireframe Process

I started by sketching out how we can organize the content and then working in a lean design process, the visual designer and I worked closely to create a seamless responsive experience, taking in over 10 different device sizes and all orientations. For the DEV team I annotated every animation speed suggestion, and using my knowledge of code was able to add css attributes and easing language to better help them understand exactly what was to happen in the site’s functionality.

The Legacy Lab Mobile Wireframes Matt Reamer
The Legacy Lab Mobile Wireframes Matt Reamer

Logo + Icon Animation Studies

Not only did I take the role of Experience Designer on this project but I did a lot of interaction and animation studies including animating .SVG icons for the website and did the final animation for The Legacy Lab logo for all video content for the brand moving forward.

legacy-lab-icon-animation-study-matt-reamer-ux-xd

Handing these animated .GIFs off to the DEV team allowed them to more rapidly animate the .SVG icons for their hover state. We ran into .SVG issues in certain versions of Firefox, so these .GIFs came in handy for fallback images.

legacy-lab-logo-animation

As a part of my video work for the brand, I animated the end Legacy Lab logo card that displays after all of their site video content. The style in which I animated the logo inspired other elements in v2 of the labs website design.


Visual Design


Legacy_Labs_Microsite_v5
legacy-lab-responsive-layout-mobile-Matt-Reamer-UX-LA


Web Video Filming + Editing

We were trying to find a vendor and gathering internal pricing for The Legacy Lab brand video which would live as the hero on the website and all were coming in too high for our small budget, so I maned a 3 person team to make this happen in 4 days. Putting together shoot schedules with production as directing + shooting the video made for a fun experience, getting back to my video production roots.

You can visit the thelegacylab.com. website and check it all out. More updates and extensions are coming in the near future.

Matt Reamer © 2016 - All Rights Reserved    OTHER PROJECTS