Architecting the guest experience on the newest features of Ulta Beauty's mobile App.
Introduction
Ulta Beauty's mobile app users are the most engaged and have some of the highest conversion rates.
I was the UX Architect imbedded on the mobile app scrum team. Along with my partner in UI design, I supported the newest features launching on App.
The three largest projects I worked on were:
UX Architect Imbedded on Mobile App Scrum Team
Position
Agile Team
Product Owner
UX Architect
UI Designer
Front End Developers
Back End Developers
QA Testers
Responsibilities Included
Workshop Sessions
Journey Mapping
Competitive Analysis
Requirements Gathering
Use-Case Identification
Information Architecture
User Acceptance Testing
Cross Functional Collab.
Prototyping
User testing
Experience Specs
Stakeholder Reviews
Task Management
Design QA Reviews
User Flows
Wireframes
Projects at a Glance
Buy Online Pickup In Store
Project 1
Bringing this complex project to life involved store operations, multiple back end systems, and front end changes to the shopping and checkout experience.
As the UX Architect for the mobile app, I supported the full-chain roll out to all stores by bringing the app experience into parallel with the web MVP experience.
Process included:
-
Iterating based on web research findings
-
Detailed experience logic for in-bag messaging and out of stock items
-
Wireframes and user flows
-
Collaboration with POs, UI Designer, and Developers
Learning from the web MVP findings, we iterated on the experiences in the shopping bag and order history.
Wireframes and User Flows
Select Delivery Method in Bag
The web-first designs need to be translated to app patterns based on iOS and Material design standards. Detailed use case identification and UX specs were defined with collaboration with technical partners.
In-Bag Messaging
Because of the new complexity of online stock vs. in-store stock vs. stock between different stores, the experience required a complete redesign of the in-bag copy and logic.
Change Store Modal
To better reduce in-bag messaging and avoid user disappointment, we pushed to add bag-level item availability right in the change pickup store experience.
Delivered by my UI design partner, through collaboration with UX and developers.
High Fidelity Comps
Select Delivery Method
Change Pickup Store
Bag Updates Card
Bag Updates Modal
Ultamate Rewards™️ App-Experience Redesign
Project 2
Ultamate Rewards™️ is Ulta Beauty's industry leading loyalty program. The customers who regularly use the program are the most engaged and have the highest conversion rates. The problem - it was so complex that many users didn't know how to use it and felt cheated by the program.
Our goal was to transform the app into an Ultamate Rewards™️ dashboard that would increase clarity through intuitive experiences.
Process included:
-
Stakeholder workshop
-
Journey mapping
-
In-depth user research and competitive analysis
-
Tight partnership with Marketing
-
Detailed micro experiences and logic for personalization
-
Wireframes and user flows
-
Collaboration with UX Researchers, POs, UI Designer, and Developers
Process, Journey Maps, and Research
Brainstorming Workshop
Led by our UX and Market Researchers, stakeholders gathered to brainstorm how to transform the Ultamate Rewards™️ experience in the app.
Journey Mapping
Taking the workshop results, we created three main journeys, identifying pain points and potential high-level solutions.
Competitive Analysis
UX conducted a competitive analysis of other loyalty programs, especially focusing on the app experience.
Wireframes and User Flows
We moved quickly, reviewing new wires and concepts daily with a small working team that included marketing, UI, developers, and key stakeholders.
To improve program clarity we focused on experiences that displayed digestible rewards stats at a glance and then expanded the rewards dashboard for detailed year to date spend, tier status, points trackers, and micro-experiences based on where the guest stands in the loyalty program.
Homepage Banner to Rewards Card
Primary rewards stats are now available immediately on app load, including simplified points and tier trackers. Unique copy creates micro-experiences that encourage and celebrate the user.
Tier Tracker and Member ID Card
Loyalty programs should spark delight. The new Ultamate Rewards™️ dashboard has two animated trackers, an interactive member ID card, and detailed information on current points, tier, and year to date spend.
Points Tracker and Clarity
The animated points tracker is interactive and horizontally scrollable to display current and future redeemable values. Iconography is used indicated when points go up in value, and pro tips help clarify how points work.
Micro-Experiences
Extensive logic was created for micro-experiences - small, personalized experiences based on a guest's standing within the program, including encouragement, congratulations, birthday celebrations, and end of year urgency.
User Testing
Testing during the wireframe stage proved to be difficult, because the data is so personalized. However, post-launch user testing showed that all users surveyed had improved clarity and attitude towards the Ultamate Rewards™️ program.
"I really appreciate that the very first thing I see is my status, my offers, my messages, my points. That's what I go here to get most frequently."
"The Rewards program is VERY motivating to go and purchase more ... because I feel like I am being rewarded. It's fun and motivating."
"It's very clearly laid out. The Ultamate Rewards program is one of the clearest [loyalty programs]."
"The App feels personal, which I appreciate."
Delivered by my UI design partner, through collaboration with UX, marketing, and developers.
High Fidelity Comps
Homepage
Offers Inbox
Tier Tracker
Points Tracker
App Personalization Redesign
Project 3
During journey mapping for the Ultamate Rewards™️ app-redesign, the team identified experiences that didn't quite make the cut for the first iteration. The next goal was to combine loyalty and personalization to give users a unique experience based on their own data, purchase history, and browsing patterns.
Process included:
-
Tight partnership with Marketing
-
User testing
-
Wireframes and user flows
-
Heavy Involvement with Back End Architecture
-
Collaboration with UX Researchers, POs, UI Designer, and Developers
Process and Wireframes
We walked the fine line between delightful personalization and "oh, now that's just creepy." We focused on information architecture of the homepage, additional micro-experiences, and utilizing patterns that were uniquely mobile app experiences.
Homepage Top Bar, Tabs, & Scrolling
The new homepage has three sections for Ultamate Rewards™️, promos, and personalized content. A seamless and elegant scrolling behavior was crucial to usability and experience.
Micro-Experience: Order Status Module
The "For You" tab has new modules with personalized content based on browsing and purchase data. Each new module has multiple states to customize the customer's experience.
Micro-Experience: Customer Birthday
Birthday treats are one of the biggest draws to Ulta's loyalty program. Highlighting that celebration in the app will increase user's delight and feeling of appreciation.
Delivered by my UI design partner, through collaboration with UX, marketing, and developers.
High Fidelity Comps
Homepage
For You Tab
Featured Tab
Inbox Offers
