Context

Angelus Direct is a paint supplier for leather and fabric projects. Its products enable users to customize their shoes and clothing— turning them into one-of-a-kind works of art. 🎨

Side-note: The desire for novelty and personal connection can be uniquely answered by art. Luxury brands know this.

I started this project by first purchasing from Angelus Direct. Despite my knowledge of materials, I had trouble navigating my purchase.

My goal was to identify the problems new users encounter in order to better help them make their first purchase. I ended up creating a UX strategy and product page for Angelus Direct that makes starting easy.

Problem Statement

I set out to address the struggle of entering the “customs” hobby. There are countless YouTube videos, blog posts, and forums that pop up when you search "how to make custom shoes”. It’s overwhelming.

Currently, new users have to:

Learn the process of customizing their object,
Understand the materials and additives involved,
Figure out how much of everything they need, then finally
Search and order everything from Angelus Direct.

A user has to leave the Angelus Direct e-commerce site multiple times to find all the answers needed to decide their purchase. 😩

If you look at the frequency and recency of users’ site visits, you might find they return. But each bounce is a chance you’ve lost that person’s business for good.

I wanted to increase user engagement and conversion by helping users quickly and intuitively complete their first order.

Understanding the user

I collected the information, insights, issues, and input shared by the Angelus Direct community about their experiences with the brand. On a high level, I needed to know who was using Angelus Direct products, why, and how they approached getting started.

I was specifically interested in the following:

Why did they choose Angelus Direct?
What do they love most about buying from Angelus Direct?
What do they hate most about it?

The sheer volume of freely given user feedback is an experience designer’s dream (or nightmare)

Ideally this process would be done with text mining to create structure out of the large amounts of unstructured text data.

But manual review was possible by prioritizing purchasing-related questions. I was able to focus on the things that most frequently tripped up first time buyers and users.

✅ Design Principles

Based on common concerns, my design would need to be:

Key user stories to understand the user’s motivations and expectations.

Understanding product page principles

The product page is where users make up their mind on purchasing an item or not. It’s also typically a “template” that’s reused for every product on the site. So its design affects every item in your catalogue. It can be difficult to get right (especially without user analytics to help reveal problems).

What’s in an e-commerce product page? 📝

To establish a benchmark for successful product page design, I chose 4 single-brand product pages. I looked for commonalities and defined what is considered a standard experience.

Product page benchmarking: redlining the layout and contents of 4 single-brand product pages.

This research provided a “definition” for the visual design of a product page. However, each e-commerce site took a slightly different approach in their presentation. So, what are the rules?

✨ Showcase the dream
The product page must successfully spotlight the product, as this is the only chance a customer gets to inspect it. Present multiple photos of the product, including photos that provide visual context. Lean into the customer’s aspirations.
📊 Support it with reality
Customers will be questioning, “Does this product meet my actual needs?” Don’t make them search for the answer. Product information and specifications should be apparent, and they should be grouped logically. And all costs should be obvious and upfront.
😊 Allay fears
The product page should build the user’s confidence in the product’s quality. FAQs, reviews, and customer photos can reassure a buyer that they’re getting something worthwhile. The importance of reassuring customers is also why guarantees like “free returns” exist to show the customer they won’t have regrets.

Download a printable Product Page Cheat Sheet 🖨️

How might I design a product page that successfully spotlights the product, boosts a user’s confidence, and inspires the user to buy?

Deconstructing the existing design

I spent time auditing the Angelus Direct site and catalogue. The information architecture was an immediate barrier, filled with confusing categories and side-paths.

Angelus Direct sells a number of kits that bundle key products together. It’s hard to tell based on title alone what each is optimized for (what is the “basic kit” vs. the “starter kit”, for example). 🤔

After some research, I found the kit that best outfits a new user is the “Starter Kit”. So that’s where I began. My goal was to carefully inspect the Starter Kit product page, and try to understand how it works and the intention behind each decision.

Red-lining the current Starter Kit product page

Identifying key problem areas

I identified key problem areas with the product page design. These problems ranged from usability issues to visual flow to wrong patterns applied.

My observations can be summed up by the ominous warning in the product description ⚠️: “Ensure the options chosen are shown in your shopping cart, otherwise default options will be sent.”

Instructing users how to use your site is a flashing neon sign that the site is not intuitive. And it’s easy to spot the usability problems on this product page. It’s hard to be reasonably certain of the size, color, and finishing options you’ve chosen. It’s also hard to know which to choose.

The problem with presenting information that can’t be visually skimmed:

People don’t read nearly as much as you think. — Steve Krug, Don’t Make Me Think

Once I found the issues, my next step was to come up with actionable solutions for the identified problems.

Review of the current site. Addressing the problems I spot by framing them as opportunities, asking “how might we”.

What problems are users encountering as they use the site? What approaches might I take to solve those problems?

Defining the user journey

I combined user and brand goals to create a single journey that begins with a user’s initial awareness of the Angelus Direct brand and brings them through to becoming a newly activated user and returning customer.

The Angelus Direct site would shift from being a large repository of products to being “new user” optimized. The Starter Kit becomes the fulcrum of the growth strategy.

Creating flow

As touched on before, a key problem for users visiting the Angelus Direct e-commerce site is the lack of guidance. There is no discernible “correct” path for them.

I used card sorting exercises to fix the sibling categories, hierarchy, and general logic of the information architecture. From there I adjusted the site’s flow.

The new strategy:

➡️ All roads lead to the Starter Kit.

When a new user arrives on the landing page, they are directed with “getting started” CTA’s to the Starter Kit product page. Should a user miss the prompt and end up continuing on to paint or kits, they are again shown a pitch for the Starter Kit.

This user flow doesn’t conflict with returning users’ needs, as they are already informed and can make good use of the newly sorted nav and the search function.

Card sorting and affinity mapping to redesign the e-commerce information architecture.

There’s potential here for tree testing (reverse card sorting) to determine how users navigate the new site. Participants would be provided with tasks such as:

“You saw a pair of custom-painted shoes online. You want to get what you need to make your own.”

Results would show how they performed the tasks and which route they took to do so. This data would be useful for continuing to improve the site’s structure.

Designing the product page

✍️ Pens before pixels

Hand sketches are a great way to start off-loading some of the ideas from my head into the physical world. My new design for Angelus Direct would prioritize visual information and minimize complexity.

I created wireframes to quickly assess my design’s potential (each hour spent on low fidelity can save 10 hrs from being spent on high fidelity work later). I created rough prototypes of the flow and validated the design before adding a layer of fidelity.

🛠Digital wireframes, steadily building towards a finished design

Converge on a direction

I ran preference tests (via surveys) to gauge user reactions. This notably helped identify which of 2 “color picker” concepts was better received. I was able to support my design decision with insights from real people while still developing page elements.

B— “I like seeing the final color combo. That’s all I care about.”
B— “It’d be hard to choose with the colors crammed together [in A].”

Preference testing 2 different color pickers

🎯 Any testing > No testing

Preference testing can be done in lieu of having live traffic data. However, preference testing is not A/B testing. It’s closer to market research than usability testing because it can’t properly measure user experience:

Preference testing does not reflect real world usage
As non-users, people are not invested in the outcome
Preference testing asks people to predict their future behavior

A/B testing would eventually be used for nearly every element on the page, looking for a “statistical significance” in differing user behavior. The same goes for heat-maps and session recordings.

No one can ever know better than the users. When it comes down to it, if the design doesn’t resonate, it’ll see poor user adoption.

The Solution

By the end, I created dramatic improvements in the Starter Kit product page. The changes could be implemented across the entire Angelus Direct catalogue to optimize usability.

Give the user what they need ☺️

Everything the user needs to know about the kit is visible and accessible above the fold. Written-out instructions are replaced with guides that open in a modal window on top of the main window.

These guides provide additional information about bottle size and coverage, finish types, and additives. Any changes in cost due to option choices are shown dynamically.

Make it visual 💥

Instead of being hidden in drop-downs, high priority actions are indicated with buttons and meaningful icons.

The choice of size goes from inscrutable “1 oz” or “4 oz” to a visual representation of the bottles. Finish options are shown in a set with the selected option graphically distinguished from the rest.

Each of 3 color options are chosen individually in a modal window. The color picker uses both color and color name to help differentiate the options available. The default display shows the chosen color palette.

Engage and educate 🎓

When a user continues scrolling, they’re urged onwards by full-width “lifestyle” photography that illustrates the fun and excitement of doing a customization project. Then there’s a clean, top-down layout of the Starter Kit contents featuring photos with text links to the individual products.

The painting process immediately follows. The process has been broken down into three clear steps:

Prepare your surface
Start painting
Apply finisher

Each step is demonstrated in animated-gif style, within a carousel, so the user can flip between steps and get a feel for how easy the process can be.

If there’s anything they see in the process that they also want, they can pick it up with a click in the cross-sell.

Let users explore projects without leaving 👀

Customer photos are displayed in a horizontal, scrollable gallery. The user can browse visually or jump down to reviews.

The reviews can be sorted to fit the user’s interests or concerns. If they want to understand outcomes based on skill level, they can choose beginner, intermediate, or advanced users from the drop down. They can also view projects by the type of object that was customized.

This sorting helps to confirm that their specific needs are matched by Angelus Direct and the Starter Kit.

Bringing it all together 🙌

All these elements came together in the redesign to create a vastly easier (and more beautiful) experience. This before/after visual comparison says it all:

Evaluating Success

From a usability standpoint, my final prototypes proved successful, showing improvements across the board in comprehension, ease of navigation, and interpretation of information.

5/5 of users interviewed correctly identified the purpose of the product options and were able to describe how they would make their selections.
5/5 users correctly described the process of using Angelus Direct paints to customize something leather.
4/5 users expressed interest in purchasing the product. 🎉

This project is not out in the real world.

👉 However, after implementation I would be interested to track metrics including:

Funnel analysis to confirm that new customers are guided successfully to the Starter Kit
% sales/total visits to Starter Kit (conversion)
Users’ time on the site
Top products before vs. after site implementation

Marketing

Closing the loop

It takes an average of 7 interactions with a brand for a new user to engage with it. In order to address this, I strategized how Angelus Direct could use display ads and content marketing to bring more users into the new e-commerce flow.

Display Ads that link directly to the Angelus Direct Starter Kit.

View Marketing Proposal 📄

Note: This proposal is text-only write-up to capture my proposed positioning. In the future, I’d use a primarily visual medium like Figma or Google Slides for this documentation.

Angelus Direct: Activating new users through e-commerce