Zumiez

Zumiez Brand Loyalty App

Zumiez is building a brand loyalty app with the goal of generating relevant content and empowering users. A good brand loyalty program forms a cycle of loyal habits of purchase, which uses a point system to drive customer engagement.

Team

1 Creative Director, 2 Product Designers, 2 Visual Designers

Duration
4 months

 

Goals

  1. Make the curated content relevant and engaging for users.

  2. Enable users to tune the content they see.

  3. Present a modern brand visual.

 

Understand & Ideate

First, I created a user journey map for Zumiez’s customers when they’re using the app. The core experience of this journey should be the process from explore to convert.

 

Ideation

Since the app required the ability to serve dynamic content, the UI element needs to be modular enough to do so. This is why I quickly came down to designing a card feed as the core experience. And I ideated a couple of card ideas to start the brainstorming session.

 

Workshop

I hosted a workshop with the team and stakeholders to explore what kind of relevant content can potentially be surfaced. We as a team went through all the possibilities and created tons of different ideas. Then we started prioritizing what we can implement during this timeframe and scope.

zumiez workshop.001.jpeg
 

Define App Framework

After sorting out the card types, it’s time to put some stakes in the ground. I started from an overall app framework, which has the card feed as its core experience, and enabling users to tune the feed by reacting to one card, using like, dislike, don’t show again, and “why am I seeing this?“ The card detail is standardized to bear different types of card content.

Whatever it is, the way you tell your story online can make all the difference.
app framework.png
 

Apply Visual Design

Then we got to visual design. Our visual designers explored 3 distinct visual styles. The team ended up with this one — using clean black and white as the main UI, sprinkled with a couple of special moments with bold color and the use of graphical elements.

Visual directions designed by the awesome Julia Rundberg and Riley Gish.

Visual directions designed by the awesome Julia Rundberg and Riley Gish.

Me and the other UX designer (Una Paulsen) applied visual style to every screen.

Me and the other UX designer (Una Paulsen) applied visual style to every screen.

 

Talk to the Users

We did a guerrilla user testing at a Zumiez physical store located in Northgate mall in Seattle. The goal is to capture quick, initial reaction to the new UX from Zumiez customers to help validate our direction.

What we were trying to validate were:

  1. Overall architecture (tabs)

  2. Card interaction (swipe, tap on card)

  3. New visual style

Storefront of the Zumiez Store.

Storefront of the Zumiez Store.

My colleagues planning for the usability test.

My colleagues planning for the usability test.

We ended up talking to 20 customers and the overall feedback was positive. Users familiarized themselves with the navigation and card interaction in a short amount of time. They also responded positively to the new visual style.

There were a couple of things that we learned:

  1. There should be a link to redeem points from the profile because users started thinking about redeeming points while they’re looking at the points they have.

  2. Let users get live updates from their favorite brands so they don’t miss the limited edition.

  3. In the card detail screen, enable swipe to get to the next card. Many users were intrigued to do so when playing with the prototype.