Total Wine & More

Turning a Junk Drawer Into a Usable Account Menu

Three iPhone mockups of the Total Wine account menu: signed-in top, signed-in scrolled, and signed-out guest welcome.
Role
Lead UX/UI Designer
Responsibilities
End-to-end design process
Collaborators
2 designers, product, Analytics, engineering
timeline
Q2 2025

overview

“Redesign the app account menu.” No defined problem statement, no success criteria.

Legacy Total Wine app More tab list beside the Account dashboard grid of large tiles.

This project started with a vague brief: redesign the account menu. Everyone knew it was as outdated and messy, I liked to refer to it as the “junk drawer,” but we needed to understand why. Instead of jumping straight to solutions, we used analytics, a usability audit, and baseline user testing to define a clear problem.

Uncovering the Problem

The most-used features were the hardest to find.

Our first step was building the research foundation to figure out what we were actually solving for.

I started by pulling usage data to understand how customers were actually moving through the account menu. The data pointed clearly to a handful of high-value areas: rewards, order history, buy again, and messages. These were driving the majority of engagement and conversion.

Annotated flow from More menu to Account and Preferences with callouts for duplicate entry points, inconsistent icons, poor hierarchy, and important content behind links.

What stood out was the gap between what users were trying to do and how the current design supported it. A long, undifferentiated list of links offered no hierarchy and no signal for where to start.

Key Insight

The navigation wasn’t reflecting how users actually behaved. High-value features were buried in the same flat list as rarely-touched settings.

User interviews and app store reviews revealed additional pain points.

1. Loyalty barcode was hard to find

Customers couldn’t locate their barcode quickly during checkout—causing friction and hold-ups at the register. Store associates flagged this as a frequent source of frustration on both sides of the counter.

2. Users couldn’t find where to update their notification preferences

Notification preferences split across two places. Email preferences lived inside Account → Preferences, buried at the bottom below other settings. Push notification settings were on a completely separate page accessed through “Notification Settings.”

Competitive Research

Retail account screen comparison across Sephora, Nordstrom, Lowe's, Lululemon, Dick's Sporting Goods, Petco, and Instacart with labeled patterns for greetings, loyalty access, quick links, icons, rewards, and section chunking.

Competitive takeaway

The strongest account experiences act more like a personalized dashboard than a settings drawer. They surface relevant information before users have to go looking for it.

Information Architecture

Getting the structure right before designing anything.

With the audit and competitive research in hand, we worked on a new information architecture before touching visual design. The goal was a clear grouping that would reduce the cognitive load of scanning the menu.

Information architecture diagram, tree-testing hierarchy view, and low-fidelity mobile content-blocking wireframes for the account menu.

I ran tree testing to validate the structure before committing to anything visual. Participants worked through common tasks: finding their loyalty barcode, changing notification preferences, accessing order history.

Testing & Iteration

Usability testing revealed gaps in findability and guided iterative improvements.

Account list with Communication Preferences and Notifications screen showing the gear shortcut to Communication Preferences.

Users expected to manage notifications from the notifications screen

Our initial design had a single entry point to Communication Preferences from the account navigation. In testing, 80% of users went to the Notification screen to update their notification settings. Adding a second entry point on the Notification screen improved task success to 100%.

Before and after Account screens comparing Messages as a quick link versus a header notification bell and My Lists tile.

16% → 92% task success

Stakeholder input coming into the project was to make “Messages” a quick link since it was a high-converting item in the original design. Testing showed users couldn’t find it (16% success, 1.5/5 ease of use). Testing showed they expected a bell icon labeled “Notifications” in the header. We updated the label and placement, raising task success to 92% and ease of use to 4.75/5.

Solutioning

The right information, in the right place

Tap to View loyalty card opening into the Your Loyalty Pass modal with barcode and wallet action.

No more fumbling at checkout

We surfaced the loyalty barcode using a “Tap to View” interaction to make it easily accessible.

Rewards and Status card with circular progress toward the next reward above Purchases and quick actions.

Rewards progress at a glance

Progress ring makes rewards status readable at a glance, without having to tap into the rewards page.

Communication Preferences showing push toggles and email categories on two phone mockups.

One unified screen for notification and email preferences

Push notifications and email subscriptions consolidated into a single Communication Preferences screen where users can manage both in one place.

Outcomes

Testing showed improvement across every task

Post-redesign usability testing measured the same core tasks against baseline results.

↓13s
avg. Time on Task
↓1
Screens
↑25%
Directness

Reflection

What this project taught me

1. Familiarity creates blind spots

I initially carried over parts of the existing experience because they were familiar and already established. That familiarity made some issues harder to spot.

For example, notifications were labeled as “Messages,” a mismatch with user expectations that I didn't immediately flag. This taught me to be more critical of inherited patterns and that just because something exists doesn't mean it's working. It also reinforced the value of user testing in uncovering issues that familiarity can hide.

2. Designing for competing priorities

With multiple stakeholders involved, each team brought different priorities that needed visibility in the same space. This required balancing business needs without degrading the user experience.

I learned how to advocate for user clarity while still accommodating business goals, making intentional tradeoffs rather than trying to surface everything equally.

3. Navigation is strategy, not just structure

Redesigning the account menu shifted my perspective from organizing links to shaping behavior. The structure influenced what users noticed, prioritized, and ultimately used.

I learned that navigation is a strategic tool, it doesn't just help users find things, it guides what they engage with and how they move through the product.