Chameleon Video Supply

Overview

I researched and designed an improved e-commerce website for Chameleon Video Supply, overhauling their online shop to boost sales and broaden their reach to other creatives within the video/film community.

Responsibilities

  • Information Architecture
  • UI Design
  • Usability Testing
  • User Interviews
  • Card Sorting
  • Competitive/Task Analysis

Software

  • Adobe XD
  • Adobe Photoshop
  • Miro

Timeline

  • 2 Weeks

Prototype Link

Link to Desktop Prototype
Image collage of Atlanta cityscape, Gio and people using camera equipment

Introduction

Giovanni or "Gio," as the locals call him, is the heart and soul of Chameleon Video. He worked in the film industry for over 35 years and understood the power of the story. Chameleon's primary goal has been to empower creators with the right equipment to tell their stories. Chameleon Video Supply does this by partnering with their customer to learn about their needs to give them the best service possible.

"Gio" and the Chameleon family have helped underrepresented groups in the film and video community. Based in Atlanta, GA, they've been especially embraced by the Hip Hop community providing equipment guidance on music videos and short films.

Challenge

To date, 95% of all sales are made through patronage at the store's physical location. They can only help creators locally because their current website was not a focus in the business. Gio is willing to overhaul their current digital solution to favor something more effective at increasing online sales. After an initial intake interview with Gio and his staff, they revealed some initial must-haves:

  • Ability to showcase popular products
  • Multiple ways of locating products
  • Provide an efficient way to purchase multiple products

Outcome

The project's result is an excellent first step in setting up the foundation for an e-commerce website that would successfully achieve Gio's goal of updating the business model to be less dependent on local sales. The website would prove to be a valuable asset to the business. It would help further Chameleon Video Supply's goal of providing excellent customer service and providing the right tools for creators to tell their story, inside and outside of Atlanta.

Research

Sorting the Options

Open card sort

During the discovery phase, I gathered a wide variety of video-related products to get an idea of the type of equipment Chameleon Video would carry. The purpose of this exercise was to familiarize myself with the store's items and, in turn, would be used in the beginning stages of my research.

I then had an open card sort with the different types of items that Chameleon Video would sell to help with the overall Information Architecture. I recruited 10 participants who had varying knowledge of video equipment to sort the things in groups that felt made the most sense.

During these sessions, I took advantage and gathered user interviews, asking them various questions that revolved around their overall e-commerce shopping experience and any pain points they had with finding and purchasing video equipment in the past.

Synthesis

The type of customer that would patronize Gio's store had at least a medium level of video knowledge. I had an assumption that his customer base would have no understanding of video, and the site would need to cater to that audience. The research proved me wrong in that assumption. Even though an occasional novice could go to their store, most customers had some experience creating videos. This moment helped take me to develop two distinct User Personas. (Click images to enlarge)

With the research organized and the two Personas solidified, I felt comfortable in finalizing a Problem and Solution Statement for the project.

Problem

Chameleon Video Supply needs a more robust and efficient e-commerce website because they want to grow sales for the business and continue to support more creators in telling their stories.

Solution

By redesigning Chameleon Video Supply's Website to have simple, intuitive navigation, a focused inventory display, and a simple checkout system, we will make purchasing video tools online a pleasant experience.

Ideation

Go with the flow

Navigational scheme for Chameleon Video website

With the information I gathered during the Open Card Sort, I settled on the navigational scheme that would make the most sense for Chameleon Video's typical user. Next, I worked on the happy path for the User Flow.

Userflow chart for Chameleon Video Website

Sketching Process

Sketches of Chameleon Video Website focusing on the homepage and Product page

I began the sketching process choosing specific pages to draw out in order to work out some initial layout options for main content. The role of creating sketches is especially important for three main reasons: to organize my thoughts on paper, to quickly try different layouts and to have a baseline to work from when building low fidelity wireframes easier in the software later.

Sketches of Chameleon Video Website focusing on the Navbar and Product page

Grayscale wireframes were then developed with a focus on the user flow to start fleshing how the site would layout content. I made sure to further develop the appropriate number of screens needed to achieve the one task of buying a specific item from the site. This low fidelity prototype would be used for the first round of usability testing with a focus on making sure the user could complete the task.

Greyscale Wireframes for the website
Image detail of greyscale wireframe showing one iteration in the checkout page

A couple of things that came up during first round of testing was that users were struggling a bit in the checkout process. They wanted to know what stage they were at. I felt that the checkout process would be clearer once I added some breadcrumbs for the user. I would make sure to include that in the next version of the prototype.

Design

In the next version of the prototype I went with a much higher fidelity. I fleshed out more screens to give the user three different ways to accomplish their task of adding and buying the Sony FX9 camera.

High fidelity wireframes of Homepage, featured product, and checkout of website

After the second round of testing, a few more challenges came up for the user. One of them being that you couldn’t add an item to their cart without going to the specific Product's page first. The other challenge is that the user wanted some kind of visual cue that the item was in their cart. I added an add to cart option in the thumbnail image as well as added an "in cart" visual cue.

Image of product thumbnail image before iteration
Image of product thumbnail image after iteration, adding add to cart option on the bottom right
Image of product thumbnail image after iteration, adding a yellow highlight line around thumbnail to indicate Product in Cart

In the final round of edits, I added the ability to add reviews in the product detail page, addressing a need from The Prosumer persona. The breadcrumb trail in checkout was made a bit larger and to let the user know where they were in the process and adding a contact page.

Checkout breadcrumbs detailMy Account detail page
Review screen page from the feature product section

Next Steps

The website overhaul is still a work in progress, but I'm happy with the state it’s in so far. Here are some next steps to continue building and improving Chameleon Video Supply’s e-commerce experience.

  • Continue iterating on the checkout flow making it a smoother experience for the customer
  • Work on building out the vendor portal. It is important for Gio to have this section of the site for his customer’s that have more robust video equipment needs
  • Build on a mobile version of the website that mimics the look and feel as well as the more streamlined functionality
  • Creating a more robust user profile section that captures past orders, common shipping addresses and payments

Lessons Learned

In building out an e-commerce experience such as the one for Chameleon Video, designing multiple ways to easily add items to cart is important for the overall shopping experience.

It may be obvious, but the checkout experience was the most challenging aspect of the project. Any minor changes or missteps in gathering their shipping and payment information could result in abandoned shopping carts. The flow of that experience took me a while to get and it still needs some work to make it just right.

Check out the prototype in its current state

Back to top of page
Go to read Inccubator Case Study
Check out more projects
Go to read Netflix My Lists Feature Case Study

© RENE VAZQUEZ 2021 All Rights Reserved

RV logomark