Zebra Pen

Client
Zebra Pen - Client of Ignite2X
Project Type
Website Redesign
Date
April 2022
Responsibilities
Project Manager, IA, Director Product Design, Research, Development, Client Liaison/Presentations

Roadmap to Excellence

Zebra Pen wanted to revamped its online presence and improve the e-commerce user experience. The goal was to better understand the consumer, modernize the website, and have the website integrate seamlessly with D365 backend. We also recommended the implementation of Product Information Manager (PIM) for centralized content distribution.

Strategic Hurdles

The previous Zebra Pen site prioritized shopping but lacked in building brand loyalty and made it difficult for customers to learn more about the brand product lines. This challenge was addressed by creating a dedicated brand section for the new site to enhance consumer loyalty.

To improve the shopping experience, a focus was placed on formalizing all brand line naming conventions for consistency and consolidating brand lines. This effort created a more consistent look to each brand, simplified navigation and facilitated efficient product upselling. The implementation of a Product Information Manager (PIM) centralized all data and provides A+ content for platforms like Amazon and Walmart.

Reviewing the original Zebra Pen web site below, identified issues included clutter, inconsistent page layouts, and a lack of visual interest. On the product shop page, the top navigation section occupied excessive space, causing the "Add To Cart" button to appear below the fold, potentially resulting in a loss of sales. There is inconsistencies on how the brand name is spelled out (SARASA vs Sarasa).

Image of old Zebra Pen homepage
Image of old Zebra Pen all brands page
Image of old Zebra Pen product page
Person's hand drawing with a Zebra Pen product

Cultivating Devotion

Zebra Pen appeals to a diverse audience, ranging from young individuals to executive professionals. The brand places a significant emphasis on artists who have contributed to the success of the MILDLINER line and executives who opt for the STEEL products and want to make a statement in meetings. Loyal consumers of these products often choose to make direct purchases from the company website, demonstrating trust in both the company and its product line.

Embracing Empathy

Donovan Mercer

Type: Precision Shopper
Age:
28
Location: Dallas, Texas
Title: Senior Manager
Status: Married, homeowner

Tech
Internet
5 start rating
Social Media
3 start rating
Online Shopping
5 start rating
Gadgets
4 start rating
Bio
Donovan Mercer, a senior manager since 1992, balances career ambition with a warm, outgoing nature. Married and anticipating a new chapter with a child on the way, he is committed to success and family.
Personality Map
Introvert
Extrovert
Analytical
Creative
Loyal
Fickle
Passive
Active
Wants & Needs

Wants: A chic pen that reflects his identity and makes a statement.

Needs: A fast, straightforward website for seamless purchases.

Frustrations

Desires a swift buying process, unwilling to expend unnecessary time.

Seeks a durable, refillable product of high quality.

Emily Hawthorne

Type: Informed Explorer
Age:
22
Location: Phoenix, Arizona
Title: Artist
Status: Single, Renting

Tech
Internet
5 start rating
Social Media
5 start rating
Online Shopping
4 start rating
Gadgets
1 start rating
Bio
A dynamic artist, explores new mediums with boundless creativity. Juggling an apartment with two roommates and enjoys spending time with friends when not creating, She struggles to fund her art, facing the daily challenge of making ends meet.
Personality Map
Introvert
Extrovert
Analytical
Creative
Loyal
Fickle
Passive
Active
Wants & Needs

Wants: Innovative tools that enhance her artistic skills.

Needs: Affordable markers, pens, and pencils for ongoing artistic endeavors.

Frustrations

To ensure optimal buying choices and avoid unnecessary expenses.

Seeking a site with ample details for informed decision-making.

Strategic Rivalry

Examining other pen brands in the industry, only a handful genuinely prioritize customer loyalty and thorough pen brand research. Although every competitor boasts a more contemporary website than Zebra Pen, only Sharpie and Pentel do a better job at delineating products to empower consumers with information. These brands served as a source of inspiration during the creation of the Zebra Pen website.

Homepage image of Sharpie
Homepage image of Pentel

Designing Pathways to Achieve Goals

To accommodate the new brand section, a comprehensive overhaul of the Information Architecture was necessary. This involved mapping out new connections, identifying existing and new content, and streamlining brand relationships. Collaborating with the client, we established a consistent naming convention for all products. Below, you'll find the previous Information Architecture followed by the updated version. This restructuring ensures a more defined next step in creating wireframes and refining the consumer journey.

Original Zebra Pen sitemap
New Zebra Pen sitemap

Shaping the Future

Wireframes were developed using insights from consumer research, providing an understanding of their preferences. Users desired a website section for learning about products and comparing Zebra Pen offerings against competitors. Some sought products by brand or category (e.g., Pens, Markers). All paths lead to an enhanced shopping experience on the purchase page.

Strategic Pathfinding

There are two types of consumers that require two separate journey maps (the Informed Explorer and the Precision Shopper) the ultimate goal is converting each to a sale but both will have much different journeys. It is import that both types of consumers get the content that they need throughout their journey.

Precision Shopper Journey

In this consumer journey, precision reigns, ensuring a seamless path to purchase. Additional shortcuts exist to further streamline the buying process.

Animation show new user journey for precision shopper for Zebra Pen website

Informed Explorer Journey

The consumer's journey may lengthen due to detailed brand research. On the brand page, popup images, videos, and activities emerge, ultimately guiding consumer towards shopping.

Animation show new user journey for Informed shopper for Zebra Pen website

From Concept to Completion

Initial wireframes positioned highlighted products at the page's top. Through design iterations and consumer insights, we improved access to products higher up, reducing friction for the "Precision Shopper."

New Zebra Pen wireframe
Designed homepage with images

Visual Harmony

Constructing the website from the wireframe allowed for creative enhancements and emphasized product highlights. Users no longer guess about a brand's offerings. Product brand pages instantly showcase key features with easy exploration of images and videos. A standardized shopping experience, with optional features and "Add To Cart" placed higher, was implemented. Cross-selling and upselling enhance value and boost conversion.

Zebra Pen's new all brands pageZebra Pen's new brand product pageZebra Pen's new shop product page

Mobile First Approach

Our research indicated smartphones dominated web traffic, yet consumers often completed orders on desktops. Recognizing this, we ensured both mobile and desktop versions offered a consistent user experience for consumer convenience. Additionally, we incorporated a favorite feature, allowing consumers to resume where they left off in their journey.

Innovative Resolutions

After a thorough analysis of the old Zebra Pen website and gathering research data from existing consumers, we identified key pain points. This deeper consumer understanding allowed us to streamline access to essential information. Efforts were made to ensure the mobile site closely resembled its desktop counterpart, enabling a seamless transition between devices. Ongoing development, guided by analytics and heatmaps, ensures an optimal user experience. Additionally, an AI 3D chatbot was introduced for entertainment and to address consumer inquiries about Zebra Pen products (Ask Zen).

Image of laptop on purple background with the new Zebra Pen homepage on screen

Strategic Solutions

Addressing challenges on the previous Zebra Pen site, a comprehensive solution enhanced brand loyalty and streamlined the shopping experience through a dedicated brand section, standardized naming conventions, and layout improvements. Optimization measures, including fixing the top navigation and addressing brand name inconsistencies, prevented potential sales loss. The introduction of a Product Information Manager (PIM) centralized data and improved content creation. These strategic improvements resulted in a remarkable 25.4% increase in sales within the first year, underscoring the success of the corrective measures.

Get in touch

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.