Select Page

Redesign Keyboard Product page experience for ZAGG.

Lead UX Designer • Art Director

ZAGG is a leader in the mobile accessories market including keyboards for tablets and iPads

Prompt

Like most companies, the bottom line. We are taking a dip in sales of keyboards. Is there a way to sell them better?

So, I did a competitive analysis of product pages and was able to identify some gaps that led to a test. Gaps like leaving off basic features of our keyboards such as a sleep mode magnet. We had been leading so long in this area, that we took for granted simple features that people wanted focusing heavily on the new features. The test was between two experiences.

A vs. B

A: (current experience) Go straight to the product page with minimal  information or hype selling of the product.
B: Inserts a HYPE page that acts as a catalog of features to help users perceived value and sell the product

During our test, we ran into an anomaly. As a general marketing funnel practice, fewer clicks are better, but in this case, when we inserted a HYPE Landing page with information and experience increased revenue and click-through rates. Leading to the conclusion that consumers needed more information to increase percieved value in order to make the purchase.

Can that be done with one page?

Problem

Create a single page product page design that introduces the HYPE idea into the product page and maintain the increased revenue numbers of 25% or better.

Desired Outcomes

  • Create a single product page that combines the HYPE page and the current product page while maintaining or beating experience B numbers.
  • Create a standard template for all keyboards moving forward and back build our top sellers. This is a part of the greater goal of updating product pages across the site.
  • Come up with an experience that mimics the in-store tactile feeling.

Research, Analyse & Design

While our original assumption was that the user needed more information to make the purchase. We needed a little more from our users. We put together some questions and piggybacked a user group one of our analysts had set up. We definitely got some things to consider.

Considerations

  • Users start shopping on mobile, but finish on a desktop
  • Users require more information about keyboards to feel comfortable making an online purchase. Increases revenue
  • Every feature must be on the page
  • Minimize clutter, while having the information available
  • One of the key ideas for this came from looking at what the packaging team was doing. They created a package that allowed users to actually touch and feel the product before buying. They could feel the quality. So I thought, how can we translate that into an experience on a webpage while maintaining fast add to cart capability

LoFi Wireframes

Developed template structures and information strategy
Key strategies:

    • Add to cart sticky nav
    • Information drawers expand and collapse

    • Head to Head Page comparison and feature importance hierarchy

    • What to keep vs. what to get rid of

Tactile Ideation & Prototypes

How can we give the tactile experience for features via the web 

Some examples:

  • Keyboard angle 
  • Backlit keys
  • Break it apart and see the structure, beyond the tactile
  • Feature highlights

Final designs

A ringing success!!!

  • Ready for mobile and desktop
  • Combined the best of HYPE landing page and product page
  • Maitained 30% increase in revenue over test A, up from the 25%
  • Every relevant feature for side by side comparisons
  • Added that “in your hands” tactile feeling to the web

Next Steps

  1. Identify which product pages need the same kind of update.
  2. Push and pull on the content, run some tests removing and adding section, adjusting level of info around features, etc. to maximize outcome. Basically what is too much, what is that breaking point.

Conclusion & Reflection

What a huge win! 30% increase in revenue on a site that produces $30 Million a year. Some of our work was then taken back and added to the packaging. It was really great to work so closely with marketing and packaging during the process, because it made us align, which ads to the CX (customer experience). Imagine buying the keyboard online and getting a package that only ads to experience and solidifies the quality you were hoping for.

We also learned a lot about our customers and their needs. And more importantly that we were able to meet their needs.

 It was a privilege, that in my time with ZAGG we hit so many amazing mile markers. Site revenue went from $7 million a year to $35 million, the product page updates yielded a 1500% increase in revenue and the company hit the $1 Billion in revenue mark.