top of page
multi-device-clay-mockup-16.png

Walter Klassen FX

An online shopping experience for made-to-order camera products.

Project Overview

Walter Klassen FX is a company that offers a wide range of products for camera operators, as well as services in the creation of props and costumes for film and TV productions. The website had always faced a low conversion rate, so we took the initiative to research how to better the shopping experience for our target market of camera operator users.

 

Here, we noticed a user need for a step-by-step purchase structure for core camera products. Without this function, our users struggled with understanding the composition of various equipment, resulting in abandoned carts or orders. Our internal teams also contended with inefficiencies in customer service, order processing, and fulfillment. I owned the UX research and design processes and worked closely with a fellow designer and contract web developer to visualize this concept in an intuitive way. Within 4 months, I helped implement the launch of our new website.

My Role

UX Research

UX Design

Information Architecture

Created For

Internal Teams

Customers

Project Timeline

4 months (4 sprints)

Impact

50% faster workflow processes

45% increase in conversion rate

80% improvement in sales

User Research
Problem Space

Most users can be generally split into two groups: camera operators and production assistants. Camera operators typically work long hours on set where it is inconvenient to reach out for support during the day, and production assistants may not have a full understanding of the equipment. 

noun-film-1043323_edited.png
noun-step-by-step-4812899_edited.png

The new website aims to provide an informative step-by-step structure that makes the path-to-purchase easier for both unfamiliar and experienced consumers alike. By digesting a large catalog and packaging them into a limited number of kits and categories, the website allows the user to spend less time navigating the website and less time getting the products into their hands.

How do users know what to purchase?

The current solution:

  1. Users must sift through an entire catalog (upwards of hundreds of possible combinations) of core products and spares to find what they need

  2. Users call/email for support or for manual processing of orders

Researching the Problem

I created and sent out a survey via email to past inquirers and customers. My hypothesis was that the lack of information and existing navigation were the main stressors in the customer’s shopping experience.


Questions such as “What caused you to call or email instead of completing the order directly on our site?” and “What are your goals when visiting our site?” were asked. The survey results were grouped as below:

Insight on Customer Frustration *
% of Participants **
Lack of instructions for maintenance or installation of products
20%
Confusion surrounding the components needed for a full system
83%
Disorganization of products / lack of categorization and search function
75%
Unsure of product compatibility with existing equipment
68%
Lack of comparison and information between core products
33%

* Please note that several minor, lower impact frustrations were omitted for brevity

** Sample size of approximately 100 participants

Additionally, I identified user needs by interviewing 2 stakeholders and key users within our operations team for insights on how to improve the site to help with productivity. Our users, internally, shared pain points around current processes surrounding disorganization.


This leads us to our 3 key findings below:

Key Research Findings

  1. Customers want to understand the product and purchase, specifically:​

    • Quickly find products they need

    • Check out easily online without support

  2. Stakeholders want customers to place orders online

    • Key users within the operations team want to promote purchasing online to eliminate manual processes

  3. Breaking core products into steps to help customers place their order

    • Effective product breakdown can make purchasing more efficient and manageable, therefore reducing stress and time spent on navigating the site

Understanding Our Users

Now that I had a general idea of what customers and keyholders want, as well as a hypothesis for how to accomplish it, I wanted to group these different needs in a more specific context of the people I spoke to.

Combing:

  • Continuous discourse with inquirers and customers

  • interviews with keyholders and stakeholders, including my own experience

  • feedback collected from surveys conducted through emails

I created personas that reflected a variety of different users to help pinpoint goals and frustrations.

Key Personal Insights

Some things I noted when affinity mapping the insights were that all customers I spoke to:

  • prefer using a mobile device to complete purchases

  • work long hours on set ("quiet on set!") and don't have flexibility to make phone calls 

Next, I wanted to dig a little deeper into how customers were currently completing their purchases...

Mapping Out The "Journey" Of A Customer

For the MVP of this product, I wanted to focus on the most likely user of this website - the direct consumer.

Opportunities for this product are surfaced through the creation of a Customer Journey Map that follows a new consumer, with no prior knowledge of the product, through a typical purchase.

User Journey Map.png
The Objective

What are the jobs to be done?

From my research findings, we synthesized that our users were constantly battling inefficiencies when it came to browsing and searching. Combined with the business need for optimizing operations, our goal for creating this product was to implement an intuitive as well as scalable process to integrate customers onto the platform.

I focused on the list of opportunities gathered as a part of the experience mapping process. 

Key insights were distilled into a series of primary requirements that the first few designs of the product will be informed by.

As a customer, I want to:
So that:
easily access all relevant products
I can spend less time searching and browsing
be walked through all the components I will need to complete a full functional system
I can be sure that I will have everything I need to achieve my desired shots on set
know how the products compare to other brands
I can decide whether I should invest in the gear
be aware of the lead time for all products
I can plan around my schedule more effectively and not miss a deadline
know how much an entire kit approximately costs
I can plan my budget more effectively
know what products are compatible with my existing equipment.
I have reassurance that all my gear will work together as intended

The main "goal" of this product for the MVP:

As a customer,

I want to

be walked through all the components I will need

to complete a full functioning kit

So that

I will have everything I need to achieve my desired shots on set.

Designing the Solution

What do we need to design?

With the key takeaway and list of requirements in mind, what kind of solution will we build?

We went into our cross-functional ideation session armed with these insights and hypothesized: if we create a step-by-step purchase product page, then we'd address today's issues around product confusion both internally and externally.

The initial idea is to start with this step-by-step purchase that is also mobile friendly, as most consumers use a smartphone on a regular basis and express interest in a solution that would be easy to access on the go.

First, we brainstorm the pages we would need to accomplish these tasks and plot them into a simple flow that will inform the screens we want to design for the MVP.

Placing the pages we would need to accomplish our "tasks" into a simple navigation structure:​

Blank diagram (1).png
Design Direction: Wireframes

Having identified a rough structure for our product, a series of rough sketches were created and then refined into wireframes for desktop and mobile devices.

The initial sets of wireframes are informed by our list of tasks to be done. We use those goals to guide what information we display, and the flow of screens that would best facilitate the process we have identified.

Desktop: Showcase                   Desktop: Shop                        Desktop: Build a Kit                 Desktop: Showcase

HOME (1).png
SHOP (1).png
BUILD A KIT (1).png
SHOWCASE.png

Mobile: Home               Mobile: Menu               Mobile: Shop                Mobile: Build a Kit        Mobile: Showcase

Home (2).png
Menu.png
Shop (2).png
Build a Kit (2).png
Mobile_ Showcase.png
Testing Designs With Local Consumers

Next, we let a group of local operators click through our wireframe prototype to see if they could deduce the answer to simple questions such as "Do you have everything you need?"

 

In addition to determining if users can successfully answer our questions, we also collected qualitative feedback that was consolidated and informed some changes in the design. By testing early, we captured areas of improvement before developing the designs further:

  1. Use shopping cart icon instead of Cart

  2. Include "starting from" prices on products so that users are aware without having to open a separate product page

  3. Include the ability to filter products under each category for easier browsing

  4. Include testimonials on showcases to inform users of their decision

  5. Eliminate dropdowns altogether for transparency

After a few rounds of iterations with the wireframes, we were ready to start jazzing up the visual design!

Visual Identity

The website is designed to be simple and organized. The colour palette and typefaces are key elements that carry throughout the website. Ample white space allows for a clean and straightforward interface.

Colours

Fun fact: The founder of the company is colour blind and though yellow is the official brand colour, many find it too bright. We settled on red as it can be hard to differentiate from yellow for those who have tritanomaly (occurs when the S-cones of the eye are present but dysfunctional). The contrast ratio well exceeds the minimum contrast ratio of 4:5:1 as required by WCAG 2.0 (Web Content Accessibility Guidelines). 

Style Guide (1)_edited.jpg
Typography

The typeface to be used throughout the website and UI elements closely resembles the logo. Using simple heading styles reduce clutter, making content more accessible.

Style Guide_edited.jpg
UI Elements
Style Guide (2)_edited.jpg
Testing with Wireframes
Final Design

One of the most important components of this product is the step-by-step purchase structure. This is a product page that consolidates all the items (optional or otherwise) that are required to build a complete kit. The organization takes into account information that the key users on the operations team require as well.

By carefully organize all the products into simple categories and showcasing the core products, a user will have a better understanding of where to find what they need.

By using this new site, they will not have to waste time and effort worrying about what they should be buying and can jump straight into purchasing. By following the recommended configurations, they can effectively manage their expectations and can feel confident when investing in the product.

SCREENSHOT (1).png

Some of the UX elements implemented are listed below:

  • Several CTA to the shop through the homepage and the showcase pages

  • Include a UX element for passive loading due to heavy content

  • Include reviews on product pages

  • Default select items that are mandatory for build-a-kits and uncheck optional items 

  • Eliminate "load page for more products" on the shop and include all listed products instead

Conclusion

This project was a long time coming and it was exciting to hear some really positive feedback amongst all the more functional issues we encountered.

While it was a challenge to design a simple UI that intuitively presented information and provided customizability all at once, performance metrics showed a substantial boost in conversion rates and an overall 80% improvement in sales on the site as well as faster workflow processes.

Usability Testing

The website continues to be live with these changes, but we are constantly gathering feedback and surveying our customers (as well as our internal team) to strengthen and improve existing functions.

What's Next?

Post-release feedback and research has informed us of further improvements to be implemented in the future:

  • offer installment payments

  • include a comparison table (for both core products and other brands)

  • consider further configuration/customization at each step of the build a kit pages

  • consider implementing a quiz to help the user make their decision

  • fix image sizes throughout the site for consistency

  • overlay the search function and include an "exit" button so that users can close the window easily 

  • implement hover state on product images and name to indicate that they can be selected

  • consider "quick add" features on spares and adaptors (items that don't require customization)

  • freeze configurated prices on build a kits so that users do not need to scroll to see it

bottom of page