Role
UX Engineer
Timeline
8 weeks
Me!
Sean
Jordan

Project Overview

The transformation of Item has been extensive. Formerly known as Opera8, the company recently changed it's title to Item. This change brought a new design direction, and after many iterations, we eventually made a product that satisfied stakeholders and customers.
During this company-wide rebrand, I worked with 2 other UX Designers to create a streamlined customer experience for their company website. I led the prototyping, interaction design, front-end development,  2D animation, and built a Help Center for software documentation.
Legacy (Opera8)
Previous Phase
Current
Goal
Increase Conversion
Goal
Communicate Our Product
Goal
Redefine Our Brand Identity

Product lacked demos—hindering trust, sales, and trials.

Without proper user behavior tracking, measuring KPIs was challenging. We promptly set up Hotjar and Google Analytics to gain crucial metrics for usability and A/B testing.

After several analysis, we discovered a significant drop-off in user engagement before reaching pricing plans. This indicated a lack of trust in our services, or possibly  persuasive content, hindering the sign-up process for potential Item customers.
Problem

High Drop-off Rate

Our home page lacked any visual product demonstrations, and it was flooded with text-heavy content. On top of that, users were met with 3 clicks before reaching the Free Trial form.
Solution

Simplify the Funnel

By focusing on visual storytelling and showcasing the software on the home page, we can justify reducing the amount of clicks and ultimately lead users directly to the Free Trial form.

Finding a Worthy Competitor

Before diving delving into the redesign, we wanted to find a solid competitor that we could refer to for wireframing our interface and information architecture. We came across Shopify's order management page (Fig. 1), and on top of their effective page structure, we found their visual storytelling compelling and wanted to convey Item's products similarly.
Figure 1—A section of Shopify's order management page with an abstracted visual representing their software.

Marketing Towards Small Businesses

Item offers a suite of products that helps users streamline their e-commerce operations. When analyzing our small and large business pricing plans,  we made a deliberate choice to prioritize branding tailored to small eCommerce businesses. We anticipated that this approach would not only attract a wider user base but also facilitate the long-term growth and recognition of the brand.

What are they selling?

From basic research, we found that Fashion dominates the eCommerce industry. With this in mind, we looked within fashion for a particular sector that would resonate with our intended users. We went with footwear as it is a trending product to sell.

Market Trend

The global revenue in the footwear market was forecast to continuously increase between 2024 and 2028 by in total 59.7 billion U.S. dollars (+14.46 percent).

- P. Smith, Statista

Intended Users: Small E-commerce Businesses Selling Apparel

After careful analysis of market trends and consumer behavior, highlighting footwear in our visual storytelling felt like the right direction.

Communicating Our Product

Our previous website had cool interactions, but it didn’t communicate our software effectively. To visually immerse our users, we went for abstract vector animations that represented key aspects of the technologhy.

Hero

The hero presents an ecosystem of Item's software suite. On the front-end, customers would purchase a product (shoes for example), then Item consumers would access a dashboard of eCommerce tools to manage their operations.

Floating Cubes

This component (Fig. 2) represents elements of shipping, which is a major function within Item's software.
Figure 2—These SVG Cubes were animated using a simple translation on the Y-axis, with each cube having a slight delay to create a staggered floating effect.

Layers

To achieve an alluring 2.5D experience, we structured each layer to subtly scale and translate on its own axis. This interaction would trigger when the user's mouse hovers over the element.

Value Propositions

To convince users to sign up for a free trial, we wanted to expand on the main hero and provide a more in-depth breakdown of Item's technology. We achieved this by creating 2D animations that would highlight key features from their most popular products.

2D Ideation Before Animation

We created the storyboard for each animation using smart animate in Figma. It was enough to give us a general idea of how we wanted to animate inside of Webflow.

Writing Copy to Support the Animations

With my team, we had frequent meetings with Item's Lead BA to dive deeper into the software. Our goal was to understand their most used products, and explain it in bite sized chunks throughout our animated value propositions.

Animation Process

Thankfully, Webflow's built-in interactions panel helped with bringing our ideas to life. We went with CSS animations in order to fulfill our theme switching function, as our SVG assets were equipped with color variables.

JavaScript Animation—SVG Line Path

I initially planned to use GSAP's DrawSVG for animating our SVG lines. However, we were met with free trial limitations. I instead opted for an open source JS library called KuteJS. With this alternative, I was able to explore the interaction to its full potential without encountering a paywall.

var startPartial = document.querySelector(".start-partial");
var startWhole = document.querySelector(".start-whole");

// This will visually represent the moving lines on top of the static line path
var partialAnimation = KUTE.fromTo(
  "#icon1",
  { draw: "0% 15%" },
  { draw: "85% 100%" },
  { duration: 8000, repeat: Infinity }
);

// This will serve as the static line path underneath
var wholeAnimation = KUTE.fromTo(
  "#icon2",
  { draw: "0% 0%" },
  { draw: "0% 100%" },
  { duration: 8000}
);
// Function to start the partial animation
function startPartialAnimation() {
  partialAnimation.start();
}
function startWholeAnimation() {
  wholeAnimation.start();
}
// Wait for 1200ms before starting the animation
setTimeout(startPartialAnimation, 1200);

// Wait for 1200ms before starting the animation
setTimeout(startWholeAnimation, 1200);
Warehouse Management System
Order Management System
Ship

Introducing a Light Mode

The previous phase of Item was strictly a dark mode theme, which was an issue when it came to branding (I explain more of this in the next segment). To begin working on this long awaited request, we organized all of our variable tokens in Figma. Afterwards, I went into Webflow and mapped each token into their respective color theme variables that would allow us to setup a light/dark theme toggle JavaScript function.
var (--light-mode-color)
var (--dark-mode-color)
var (--background-color)

    /* Variables for Dark/Light Mode */

    /* Light Theme */
    [data-theme="light"] {
      /* Background */
        --background-color--background-primary: var(--base-color-neutral--off-white);
        --background-color--background-secondary: var(--base-color-neutral--neutral-lighter);
        --background-color--background-tertiary: var(--base-color-neutral--neutral-lightest);
        --background-color--background-alternate: var(--base-color-neutral--black);
        --background-color--background-tonal: var(--base-color-brand--purple-alpha);
    }

    /* Dark Theme */
    [data-theme="dark"] {
      /* Background */
        --background-color--background-primary: var(--base-color-neutral--black);
        --background-color--background-secondary: var(--base-color-neutral--neutral-darkest);
        --background-color--background-tertiary: var(--base-color-neutral--neutral-darker);
        --background-color--background-alternate: var(--base-color-neutral--off-white);
        --background-color--background-tonal: var(--base-color-brand--purple-alpha-alternate);
    }

Consolidating Our Branding

We initially had a wide range of colors to work with. It was nice...until we started noticing the inconsistencies between our graphic design, motion design, and UX design. In an attempt to maintain brand consistency, we gathered with our team to establish a single primary color that met the following demands:
‍
• Accessible theme switching between light/dark mode
• Matching the Pantone shade for Physical print

Why this Works

The new primary color closely follows the hue and contrast for the Pantone shade used in physical print.

Reflection

Item was a rollercoaster of different ideas met with frequent changes, unpredictable deadlines, and a lack of brand identity. Looking back on our previous phase of Item, the website had several elements that were missing (we had a 2-week deadline to design and develop the first version due to an imminent Trade Show).

After revisiting the project with proper research and a clear design direction, my team and I were able to ship a consumer website that we believe will increase conversion, communicate our product, and redefine our brand identity.

Phase 3 Final Design

Additional Content

Item Help Center

This was a help center that I designed and developed to supplement the consumer website. To create this website, I used Finsweet's CMS attributes to have an optimized search filter function.
Next Case Study

UNIS—Supply Chain & Logistics

Explore how I helped the UNIS company website evolve from a standard Squarespace template into a sophisticated Webflow experience equipped with custom interactions, a CMS blog center, and many resources to support their varying user groups.