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.
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.

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.

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.

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.

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.

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.

The New Website

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.