Motion Design

THE OPPORTUNITY

After successful iterations on Lucid’s UI design, the website was still seemingly lacking something. We wanted the Fortune 500 company’s website to look and feel as intricate in its details as the products’. So that’s what I set out to do.

MY ROLE

Design Systems
Visual Design
Market Research
User Experience

TOOLS

Figma
Adobe Illustrator

Goal

Add details to the main website and product websites to add clear visual feedback, improve usability, and communicate the brand better.

KPI’S:

  • Scalable microinteraction design system

  • Elevate look and feel

  • Increase time spent on high-volume pages

Market Research

Competitors were surveyed to draw connections between their products and related product sites. Almost all competitors connected website microinteractions to their product in some way. This was most commonly seen in button selections, drop-downs, and tab transitions.

The Approach

Having the above knowledge was essential in identifying the microinteractions to reuse from our products. After looking at Lucidspark and Lucidchart, I decided to incorporate microinteractions across 7 elements that users interacted with on a daily basis.

The following elements were deemed as most impactful:

  • Accordions

  • Banners

  • Buttons

  • Cards

  • Drop downs

  • Links

  • Video Player

Design System Magic

Setbacks

While collaborating with the Front End Engineering and Brand Design teams, the realization dawned that adding microinteractions to the button and video player was not viable due to misalignment with brand design guidelines and usability concerns.

I made the decision to forego these two microinteractions in the hopes that we could re-visit them one day when our guidelines had grown.

Feedback

The interactions were a hit.

Not only with external customers, but internal employees as well. During inception it was difficult to gauge the initial perception, but after a round of post launch unmoderated testing — 15 participants all expressed their pleasure with the additions.

The Team

This was not a one man initiative, but a creative collaboration. Giving a special thanks to Wes Bennett, Sr. Video Production Specialist and Carson Fairbourn, Senior Front End Engineer.