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.
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.
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.
To help us launch our brainstorm and give us structure, I conducted a How Might We exercise. This is what we came up with:
... an enhanced mobile shopping experience that aligned with the rich
and discovery-focused retail experience
... new and core Alex and Ani shoppers
... easily find products based on personal meaning
... the overall user experience and immerse them fully in the
Alex and Ani lifestyle brand
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.
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.
In-store visits, early assumption validation with users, structured brainstorming, technical review, low and high-fidelity prototyping, user testing, design iteration.
A core discovery feature that fit with the brand, delighted users, and delivered products that they felt a meaningful connection to.
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.
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.
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!
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.
Stakeholder interviews, user testing, structured brainstorming, design studio, comparative analysis, microinteraction design, design iteration.
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.
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.
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.
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.
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.
User mental modeling, brainstorming, competitive analysis, sketching, wireframing, user testing, and iteration.
Came up with a new filter design that organized products by color instead of metals, that matched users’ mental models.
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.
Initial filters on the Alex and Ani iOS app, which was modeled after the website.
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.
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.
Questions? Comments? Dying to learn more?
(you know you want to)