MAVENLINK

Idea-Driven

Microsites

Designed animated microsites that explore current trends to attract new consumers. Created a framework that would adapt to new topics and made graphic sections easily sharable on social.

Work   ——    Info   ——   email

Overview

Mavenlink explores current trends through informative microsites. This one introduces the service level economy and provides guidance to excel within it. It was to include their new podcast, but that was later nixed.

The site aimed to be inspirational and not a hard sell for Mavenlink products. Aside from being responsive and promoting new content, there were no strict requirements and I was free to experiment.

Starting PoinT

Mavenlink projects start with a written brief and meeting with the Creative Director, Marketing Director and Project Manager. They provide all the copy, branding guidelines and creative direction.

APPROACH

Started with sketching out ideas. Then did two rough concepts with different experiences and visuals. They regularly do microsites, so to cut down on dev time, I created a layout and standard UI elements that could be re-used in the future (such as the menu and library features). 

I highlighted data points and created various animations. Since traffic would flow in from social, I created images to post from these elements. Bright photography and narrowing the brand color palette to the boldest options made the content stand out.

 

 

CLIENT

Mavenlink

Role

Art Direction / UX / Visual Design Greensock Animations / Prototyping with HTML and JS

DESIGN TEAM

Creative Director - A Perdoza
Project Manager - T Pace

Getting Started

Initial Sketches

Iterations on page layout. To start thinking about how the site structure could be standardized for future use, I created these quick sketches. It also helped in discussing where the focus should be, the various media and data visualizations that would be required and the best approach for mobile.

The Experience

Prototype

This project provided the opportunity to experiment with motion. I created a home page experience where the site background darkened and the text faded in and out when scrolling. I prototyped a version using Scroller.js and GSAP to see if this would be possible and comfortable to use.

HomePageExamples-4

Chapters

There are four chapters in all. Each have a defining color and unique animations but a standard structure.

Created self-contained sections to be distributed intermittently through social media, so engagement could be encouraged through LinkedIn, tweets and Facebook posts periodically. I coded the animation in GSAP for the site, then I converted them to gifs for this purpose.

 

Chapter 2

Navigation

Left nav opens, allowing access to chapters, and expands further for ebook selection or podcast details. This secondary nav was designed as a module that could be applied to other Mavenlink microsites.

Top nav condenses on scroll to show main menu button, chapter number and title, link to the podcast, social options and Mavenlink logo.

MenuChapter4

Animations

Chapter1
Chapter2
Chapter4_500
Chapter3_500

Mobile

mobile
tablet_C1

Direction

background
colors
I'm danielle...

a designer with a focus on products.

Work →

Let's chat.

I'm not on social media, but you can email me. 

emaildanielle@gmail.com →




© 2018 DANIELLE MARIE