AandA.jpg
Pivotal Tracker.png
DSC_0067.jpg
f18271424.jpg
inspiration-1.jpg
User Flow.png
IMG_1558-1.jpg
Pivotal Tracker.png
AandA.jpg

alex and ani Case Study


SCROLL DOWN

alex and ani Case Study


the client

Alex and Ani is a popular brand that creates eco-conscious jewelry and accessories, and has hundreds of retail stores across America. Prior to their partnership with Prolific Interactive, their digital presence took the form of a responsive site.

 

THE ASK

Mobile shoppers represent a steadily growing segment of the Alex and Ani customer base, and the client wanted a mobile app that would streamline the shopping experience while providing a delightful and lifestyle-rich experience.

THE PROBLEM

Though the retail shopping experience provided an innovative way to shop
that enhanced discovery, the current digital experience did not provide a way for customers
to discover meaningful and relevant products that aligned with the way they shopped in-store.

 

The Team and My Role

I worked with an agile product team consisting of a product manager, a product designer, and two front-end engineers.

Minus a few improvements that I was a part of, the Alex and Ani core commerce experience was more or less built by the previous team when I came on board. For the v2 phase of the project, we were tasked with enhancing product discovery and creating a broader lifestyle experience, and post-release with adding improvements to the core commerce experience, and enhancing checkout with a variety of native payment options such as Apple Pay and PayPal.

 
Pivotal Tracker.png

The Approach


The Approach


 
 

A COLLABORATIVE LEAN PRODUCT TEAM

We used a hybrid agile-waterfall approach which emphasized quick design, testing, and iteration.

 

SHARING KNOWLEDGE AND DECISION-MAKING

We quickly learned that decisions flowed faster when the entire team, including stakeholders, were on the same page and had the same knowledge base. At every stage of the project, at every round of user interviews, I made sure everyone was updated and involved in the UX - whether through presentations, through UX digests, or through same-day email recaps that summarized a day’s research findings.

 

STAYING CLOSE TO THE CUSTOMER

While I developed personas based on patterns we identified in earlier rounds of user testing, we eventually realized that it was much more useful to us as a team to stay as close to real users as possible. Throughout the process, I made sure we always had users available to meet with weekly - this kept our process lean, and made sure our assumptions were constantly tested and validated.

 
 
DSC_0067.jpg

How Might We


How Might We


 

To help us launch our brainstorm and give us structure, I conducted a How Might We exercise. This is what we came up with:

 

How might we...

 

CREATE
    ... an enhanced mobile shopping experience that aligned with the rich
and discovery-focused retail experience


FOR
    ... new and core Alex and Ani shoppers


TO
    ... easily find products based on personal meaning


AND IMPROVE
    ... the overall user experience and immerse them fully in the
Alex and Ani lifestyle brand

 
f18271424.jpg

Research in Numbers


Research in Numbers


  • 8 competitive/comparative case studies

  • 40 prototypes

  • 13 flows

  • 10 UX digests

  • 5 research insights email recaps

  • 6 months on the project

  • 54 users interviewed/tested

  • 1,620 minutes with users (at 30 minutes each)

  • 4 surveys deployed

  • 10 design studio exercises

 

So, how did this all come together?

 

While we had one big ask, as you know, projects aren't always nice and neat.
Each feature correlated to a problem, and problems were usually interrelated.
We kept collecting knowledge in the form of interviews, surveys, and tests
throughout the project, and focused on features on a sprint-by-sprint basis while
keeping in mind our How Might We statement.


Here are a few stories of how these features came to be.
 

inspiration-1.jpg

Inspiration and Discovery


Inspiration and Discovery


IN A NUTSHELL ...

Problem
The Alex and Ani retail sales strategy enhances meaningful product discovery through a structured Q&A process that was challenging to represent digitally and unique among competitors.
 

Process
In-store visits, early assumption validation with users, structured brainstorming, technical review, low and high-fidelity prototyping, user testing, design iteration.
 

Outcome
A core discovery feature that fit with the brand, delighted users, and delivered products that they felt a meaningful connection to.

 

The Details

 

THE Problem


Alex and Ani's physical retail experience revolves around a structured conversation between the sales associate ("bartender") and the customer which allows the bartender to use the customer’s life experiences and a "symbol wall" to guide them to meaningful product recommendations. Developing an equivalent to this process was deemed critical to the app.

We needed to build an e-commerce experience which would similarly allow users to apply their own preferences to come up with meaningful product recommendations and enhanced discovery.
 

Alex and Ani bartenders use a symbol wall like this one to start a conversation with a customer and help them find something meaningful.

Alex and Ani bartenders use a symbol wall like this one to start a conversation with a customer and help them find something meaningful.

 
 

THE PROCESS


We confirmed Alex and Ani's assumptions by researching their sales approach. I got into the stores and observed real interactions, heard from the bartenders themselves, and also spoke to dozens of customers to understand their side of the sales interaction. We found that this sales approach, creating a personal connection that ranked above aesthetics in terms of purchase consideration, was clearly core to the Alex and Ani experience. In essence, many users were excited by meaning and  shopped with meaning in mind, and were less likely to make substantial purchases without that additional guidance. With the core e-commerce experience we had solved for the users that shopped on their own, but hadn't yet solved for the users that needed a little help navigating a large product catalog.

Using the bartenders' sales questions and the symbol wall as a center point, I led a structured brainstorming session with the team using research findings and shopping trends, culminating in low-fi wireframes. Working with the product designer, we came up with high-fi wireframes for an InVision prototype, which we user tested and iterated on. We knew that this feature would require heavy backend item-tagging to work, and made sure we worked with the Alex and Ani team to scope out feasibility and technical limitations.

 
 
CroppedBrainstorm.jpg
 
 

The Outcome

Inspiration Engine

Several months and countless prototypes and user tests later, we finalized the Inspiration Engine. It got so much love in user testing and with stakeholders that, although originally thought of as a supplement to search, it ended up at the center of the tab bar. The client felt that it perfectly represented the spirit and meaning behind the Alex and Ani brand.

Most importantly, it took users to products that they didn't know existed, and yet connected meaningfully to. Users were delighted!

 
Wow... this is really awesome! I just tapped “strong” and found two things I would’ve never found by myself. I read the descriptions and thought ‘oh my god! I can definitely add these to my collection!
— Sarah

With the inspiration engine,
Find meaningful products based on

A+A Inspiration Engine.png
 
User Flow.png

Empowering Users


Empowering Users


IN A NUTSHELL ...

Problem
Alex and Ani is all about meaning and empowering users not only through products but also through the Alex and Ani story and message. The current Empowerment section on the app was not very clear to users and limited Alex and Ani's ability to tell their story.
 

Process
Stakeholder interviews, user testing, structured brainstorming, design studio, comparative analysis, microinteraction design, design iteration.
 

Outcome
A daily digest that acts as visual and lifestyle inspiration for customers and drew them back to the app, while simultaneously showcasing the evolving meaning and stories behind the Alex and Ani brand, and guiding the Alex and Ani woman.

 

The Details

 
Alex-and-Ani-Symbol-Wall.jpg

The Problem

Every conversation I had with users defined a single point to us - that users are empowered by the meaning they wear through their Alex and Ani pieces. One user mentioned that the bangles she chose to wear were like a tattoo: they told a story and they reinforced her sense of identity. In addition, they have the potential to - and usually do - represent values and inspire their wearers. This is a big part of the brand, and something that Alex and Ani cultivates daily, for example, through the Motivation Nation quotes posted each morning on the official blog. Alex and Ani didn't just want commerce functionality, they wanted to make their customers feel good through positive messaging.

This is why, when I joined the team, the mobile app had an Empowerment section. This section featured the popular Motivation Nation quote first, allowing you to side swipe to moonscope, and to a feature we had initially named “Path of Life”. By entering your name and birthdate, the Path of Life feature provided them with their personal horoscope, zodiac, flower, among other things. Though fun and beautiful, the current Empowerment section was confusing to users - though they enjoyed the quotes, not everyone understood the interactions, the Path of Life feature, or the moonscope.

As the UX designer, I needed to review the Empowerment tab with my team and redesign the content in a way that connected with users, clearly communicated the brand, and allowed for the additional content scaleability Alex and Ani desired.

 
 

THE PROCESS

 
 

Right from the outset, we realized this was a content problem. What kind of content would appeal to Alex and Ani shoppers? We met with stakeholders to understand what they thought resonated with their customers. They knew their blog was popular, and wanted to expand their content team to produce more of what customers loved. They didn’t want the feature to be a side note but rather a core feature to the app because they wanted to share the Alex and Ani lifestyle with their customers.

In addition to capturing stakeholder insight, I researched their blog and social media presence independently to see what was working, going straight to users to see what on the blog stood out. It was clear that the Motivation Nation quotes were powerful, and that users engaged with inspirational product-related blog content.

Knowing that this would be a feature that would include daily updated content, our main question was whether this would be a digest or a feed. Following guided brainstorming and an extensive competitive analysis of similar features on the market, the product designer and I developed, tested, and iterated to arrive at the daily digest.

 
 

The Outcome

DAILY SCROLL

In the end, to showcase the very popular daily motivational quote and the additional amazing new content Alex and Ani was producing, we replaced the Empowerment section with a Daily section in the form of a very intuitive scrollable digest and, based on research, provided our client with a strong list of content recommendations that proved popular with users. The Daily section’s highly visual form not only provided opportunities for customers to connect more deeply with the brand, but in turn also gave users suggestions on how to wear the products and kept them in the know about emerging collections.

The daily digest was a hit with users, met Alex and Ani’s brand goals and provided them with a hook to bring users back to the app daily - moving the app away from core e-commerce, towards a more integral lifestyle product.

 

It [Daily Scroll] kind of inspires me to go ‘oh, I want to feel like this today’. I like to look at the stories and the collections because it explains the brand.
— Joanne
 
IMG_1558-1.jpg

Shopping Improvements


Shopping Improvements


IN A NUTSHELL ...

Problem
Post-release, our filter feature, patterned on the Alex and Ani website's filter, was underused. We needed to diagnose why, and fix if necessary.

Process
User mental modeling, brainstorming, competitive analysis, sketching, wireframing, user testing, and iteration.

Outcome
Came up with a new filter design that organized products by color instead of metals, that matched users’ mental models.

 

The Details

 

The Problem

To aid discoverability across Alex and Ani's wide product selection, we built product filtering into our e-commerce app, modeling it after the Alex and Ani website.

After we released the app, our mobile analytics showed that users weren't using filters as much as we had expected based on web analytics. Further user testing on the app revealed that users simply had a difficult time using filters - often not getting the results they were looking for. As discoverability is an important part of the app, we needed to quickly diagnose why, and develop a solution.

 

Current filter on the Alex and Ani website.

Initial filters on the Alex and Ani iOS app, which was modeled after the website.

 
 

THE PROCESS

 
 

Following my intuition, I conducted more user tests, and realized that there was a stark difference between business thinking and users' mental models. While Alex and Ani tags its products by metal (e.g., 14kt gold filled, 14kt gold plated), users think in terms of color (e.g., yellow gold, white gold). The current finish filters were based on metal, and when users filtered, they would try to filter for gold, but only select the 14kt gold filled filter - also the first filter available on the app - limiting the products displayed to only the most expensive products. This confused them, and a new customer might even be discouraged from searching further. With my product designer, we brainstormed options, tested them, and when we landed on an optimal design, worked with the product manager to create the user stories.

 
 
 

The Outcome

revised filters

After a week, we reorganized the existing information on the filters screen and added a 'Select All' function that made it easier for users to see available colors and filter down to only the ones they wanted to see, while still allowing them to filter by metals if they so chose. Most importantly, this design tested extremely well, and when shown to the developers, proved an easy fix. I'm looking forward to seeing it come out on a later build.

Play with the prototype!

Gold is the only color that looks good on me, so I’ll always narrow down that way first. It was so easy to see only what I want to see on the app, and it saves me so much time!
— Yvonne L.
 
Pivotal Tracker.png

The Outcome


The Outcome


Over 150,000 downloads

FEATURED AS A BEST NEW APP on the app store

winner of digiday's "best native mobile app" in 2016

4 stars with 67 reviews

 

Users have responded extremely well to the app, especially loving the Inspiration Engine and Daily feature and showing high rates of return. Unfortunately, negative feedback largely relates to latency issues that are beyond our control, but that the team is consistently trying to improve. 

 
Yes!! I’ve been waiting forever for this app! Beautiful bracelets right at my fingertips, and the gift guide helps me find what to get my friends. So great. :)
— jeebslay
This is the coolest App! I have become obsessed with Alex and Ani bangles. I love the daily motivation nation. I send them to friends and family!
— Shortie Shrimp
Really love all the different inspirational content - especially the daily quotes! Makes me love Alex and Ani even more!
— SoccerMama
 

Questions? Comments? Dying to learn more?

(you know you want to)