Redesigned e-commerce "customizer"

Imagine that you want to order a custom Neon sign to hang in your room, but when you go to purchase it, you run into so many problems and can’t complete your online order.

Client

NEON Mfg

Project Duration

4 weeks

My Role(s)

UX Designer

Neon Mfg is a leading manufacturer of custom neon signs. During the pandemic, their conversions shot up the roof. With a growing demand for personalized neon signs, they wanted to provide their customers with a better mobile shopping experience to reduce customer complaints and bounce rates.

First, let's understand the problem...

The neon sign company was facing significant customer complaints regarding their customizer and the accuracy of their final product deliveries. The customizer was not optimized for mobile devices, leading to a poor user experience and hindering the ability of customers to effectively design and visualize their custom neon signs before purchasing. To address this, I redesigned the customizer to provide a better mobile experience and improve the accuracy of final product deliveries, resulting in enhanced customer satisfaction and increased sales.

Problems with customizer (just a few)

  • Can't visualize neon sign fully.
  • Too many words & extremely hard to find important information.
  • Page doesn't display subtotal until checkout.
  • Neon sign sizes aren't clear. No reference point.
  • Couldn't complete order due to too many dropdowns and hidden required input fields.

These challenges eventually resulted in…

  • Poor mobile experience with a customizer resulted in frustration and dissatisfaction among customers, leading to negative reviews and decreased trust in the brand.
  • Customers couldn't complete their purchases, leading to lost sales and revenue for the company.
  • Missed Opportunities for Personalization and Upselling.

(Problem Definition​)

The problem at hand is that Neon Mfg’s e-commerce “customizer” is causing customer frustration and dissatisfaction due to its lack of mobile optimization and limited design and visualization capabilities.

The Solution.

But how did I get here?

(User Research​)

First, our team began by developing a deeper understanding of the users and their needs.

Survey Monkey

An online survey was conducted, targeting a sample of 100 users who had interacted with Neon Mfg's customizer in the past six months. The survey consisted of multiple-choice questions and open-ended responses, allowing users to share their experiences, challenges, and suggestions.

Sample Questions

  • Which design options or elements do you feel are lacking in the current customizer? Font Styles Color Palette Design Elements (Icons, Symbols, etc.) Others (Please specify)
  • How important is real-time visualization (e.g., 3D preview or AR) for you when customizing a neon sign? Extremely Important Important Neutral Not Important Not Sure
  • How accurate were the final product deliveries in matching your customizations? Highly Accurate Somewhat Accurate Neutral Not Accurate Not Sure
  • How important is the undo/redo functionality when customizing a neon sign? Very Important Important Neutral Not Important Not Sure
Customer Reviews

Gathered all negative reviews & guest surveys from the past 6 months.

“I tried designing a custom neon sign for my friend’s birthday using Neon Mfg’s customizer, and it was a nightmare on my smartphone! The website was slow to load, and I couldn’t see half of the design options due to the overlapping elements. It took forever to make even minor changes, and I ended up giving up in frustration. Please fix the mobile experience; it’s ruining an otherwise fantastic product!”

“My experience with Neon Mfg’s customizer was fine, but the real nightmare started after I placed the order. My neon sign took weeks longer than expected to arrive, and when it finally did, it was not at all what I customized. The colors were way off, and the design looked like a completely different sign. I’m very disappointed with the inaccurate delivery and lack of communication during the entire process. Won’t be coming back!”

To ensure that the problem statement is focused on addressing the most pressing issues and delivering the most significant value to customers, we need to gather insights into the areas where the product is lacking and where improvements can be made. With miro as my digital white board and Hotjar as my data source, I worked with our internal team to analyze the user experience.
Google Analytics & Heatmaps

Gathered all data from google analytics to identify dropoff points. Installed HotJar on the website to collect real-time user activity.

Customizer Conversion Rate (Completed Design)
12.1%
Checkout Initiation to Completed Purchase
75%
Customizer Pageviews to Completed Purchase
15%
Customizer Bounce Rate
42.5%
User Device: Mobile
45%

These are just a few snapshots from the internal brainstorming sessions that I led. We first analyzed the current design, then looked at the competitors.

What's everyone else doing?

(Competitor Research)

By analyzing the strengths, weaknesses, opportunities, and threats of competitors, companies can gain valuable insights into their own performance and position in the market. Some key steps for conducting a competitor analysis include:
  1. Identifying key competitors: We researched and identified Yellow Pop Neon Signs, Tyko Sign Group, Custom Neon Sign®, & Fresno Neon Sign Company as the leading players in the industry and area.
  2. Evaluating their offerings: Analyze the products and services offered by each competitor to determine the strengths and weaknesses of their offerings.
  3. Assessing their marketing strategies: We looked at ways competitors are promoting their products, such as through advertising, public relations, and social media.
  4. Measuring their performance: Use metrics such as market share, customer satisfaction, and financial performance to gauge how well each competitor is doing in the market.

After gather enough data we put together a list of the strengths & weaknesses….

  • Experience and expertise in neon sign design and manufacturing
  • High-quality materials and equipment used for production
  • Strong brand reputation and customer loyalty
  • Wide range of product offerings to meet customer demands
  • Ability to customize neon signs to meet specific customer requirements
  • Limited product offerings compared to competitors
  • Higher prices compared to competitors
  • Inefficient production processes
  • Lack of investment in research and development
  • Poor customer service and support.

Let's start designing....

(Ideate & Design​)

Using research and information from our brainstorming sessions, I sketched out what the new customizer would look like. 

The Idea.

The Old.

The New.

The Results.

The customizer has allowed customers to create a product that fits their specific needs and preferences, leading to higher levels of customer satisfaction. By allowing customers to input their own specifications and preferences, the customizer has reduced errors and inaccuracies in the production process.

  • Increased online sales by 15% in the first quarter after launch.
  • Reduced product return rate by 5% in the first 6 months after launch.
  • The customizer was used by 50% of online customers in the first quarter after launch, with 75% of those customers using it multiple times.
  • Decreased customer support inquiries by 20% in the first quarter after launch Improved customer satisfaction by 10% as per the post-purchase survey conducted 3 months after launch.