top of page

Alibi Technologies
Re-Design
UX Case Study

Roles

Began as just a Graphic Designer with a team of 4 developers, a CTO and a UX Designer

Currently a team of me as Visual Designer, a Full Stack Developer and a CTO

Hero Image.png

The Company

Alibi Technologies is at the forefront of content and e-commerce. Our mission is to bring shoppable content to life by providing a video platform that allows for the impulse to purchase.

Introducing the Alibi Branded Channel Platform: a B2B2C platform solution that provides a seamless entertainment and shopping experience by merging products and content into one interactive experience.

The Alibi Tech team reached out for assistance on the design and UI elements for their platform. After helping out on the design side I found lack of user experience and wanted to help create a platform that is relatable and easy to use for users.

The Project

When I joined the team, the project has been in the works for over 2 years. With a discussion with the CEO and other members of the team we decided it was time to rebrand ans restructure the platform, and website.

As a graphic designer, one thing I knew we needed to create was a brand that had brand guidelines, and a clear target audience. This led to UX research which was never done in the past.

The suggested changes for improvement were:

  1. Usability

  2. User interface

  3. UX copy

  4. Imagery

  5. Messaging

Problem Statement

When I am watching videos about products I want to be able to buy the product right on the spot.

The redesign includes creating a new structure, flow and design for users to easily create shoppable videos, manage their products/videos, and embed a widget into their Shopify Account.

Objectives & Goals

 

Redesign Goals

  • To deliver a personalized experience and intuitive user interface

  • Propose a more engaging and seamless experience so that users are confident to create their own shoppable videos.

Personal Goals

  • Take full ownership of the various roles involved in designing a product such as a User Researcher, User Experience Designer, UI Designer.

  • Enhancing my learning experience by challenging some design decisions and addressing their solutions.

The Product - Before

Alibi’s Branded Channel Platform is a curated Direct-to-Consumer (D2C) video-on-demand and ecommerce OTT platform that brings Communities, Talent, and Brands together by providing a simple yet elegant way to view premium content, purchase related products, and share seamlessly on one platform. 

Before 1.png

Banner Design

Old Widget and Banner 1.png

My Observations

  • When first seeing the platform my first observation was the visual appearance of the banner. It was very “Ad” like, I wanted to push those off the screen not keep them on

  • The idea of having to recreate an entire OTT website for every client that came on- didn’t seem like an easy task for us or the consumer

  • The platform was not created mobile-first, and in a generation of online shoppers using their phone, the user experience was poor

Product Users

Our product users are individuals who like to shop online and e-commerce owners looking to elevate their brand

The Rebrand

Alibi Technologies is at the forefront of content and e-commerce. Our mission is to bring shoppable content to life by providing a video platform that allows for the impulse to purchase.

Introducing the Alibi Branded Channel Platform: a B2B2C platform solution that provides a seamless entertainment and shopping experience by merging products and content into one interactive experience.

The Alibi Tech team reached out for assistance on the design and UI elements for their platform. After helping out on the design side I found lack of user experience and wanted to help create a platform that is relatable and easy to use for users.

Present Product

The product is now a self-serve dashboard where users can easily create shoppable videos, manage their products/videos

The widget will now be embedded into their already created Shopify account to take their videos to the next level- no longer having to create an OTT Site

There is a video editing timeline making the process of creating the shoppable video simpler

User Personas

Jessica Lake

About

32, New York, Employee

A day in their life:

Spend their  free time online shopping as they don’t have time to go into a store


Easily influenced by social media and videos

Pain Points:

Never know what to expect when purchasing a product


Wants products fast and easy

Smiling Portrait

Rick Laundry 

About

45, Toronto, Owner

A day in their life:

Owns a successful e-commerce store


Not Social Media Savy


Wants to elevate his company

Pain Points:

Has been having trouble getting customer engagement on site


High drop-off rate

Taskflows.png

Landing Page- Redesign

Before

After

Platform Redesign

Home Page 1.png

Before --> After

Video 3- Upload page 1 1.png
Add 1.png

Previously there wasn’t a feature for a client to add thier own products, we have now connected shopify to import the products from their site, which then can use to embed into their Vendy Banner

Banner Assignments 1.png
Products-  Shopify Not conneced-7 1.png
Product  to Video Collections 1.png
Products- 1.png
Product Assignments _ Banner 1.png
Product Collection 1.png

A timeline editor is in works for customers to be able to drag and drop products wherever wanted in the video rather than manually inputting the timecode, saving time.

Timeline Editor

The old platform our target was to create a new OTT website for every client, but now with the rebrand clients can embed our widget right into their Shopify e-commerce site easily.

You can now create a banner right in our platform, and it generates a code that you embed in a custom HTML block on your Shopify Account.

Video 10-Slider editor 1.png
Group 47383.png
Widget-1 1.png
Widget

Seamlessly embed your videos in your site with your chosen style

New Banner Designs

Our previous banner designs were not mobile-first designed. With the rebrand we made sure it was mobile first as most of the e-commerce shoppers use mobile devices.

We wanted customers to be able to watch the video and shop without leaving the screen as many of our competitors do.

Step 1.png
Step 2.png
Step 3
bottom of page