design system creation, user flows, competitive analysis, cross-functional collaboration, stakeholder management

Challenge: Bring together thinking to align a roadmap for Meijer and accelerator agencies to replatform Meijer's web presences while also creating consistent visuals and interactions across a massive digital transformation.

Translation? Take a beloved Midwestern grocery chain's entire digital presence and drag it—lovingly but firmly—into the modern age. No big deal.

Meijer wasn't just asking for a refresh—they were asking for a complete replatforming. We're talking new tech stack, performant architecture, clean design, accessibility baked in from the start, and a user experience that didn't feel like it was designed by a committee.

Oh, and did I mention the timeline was aggressive, the stakeholder pool was massive, and several consulting agencies were all trying to contribute simultaneously? Cool, cool, cool.

Before the army of consultants descended, though, it started with two scrappy UX/UI designers who were determined to make something people would actually enjoy using. Catie DiCiuccio owned the mobile app side, and I took the lead on defining the design system that would keep us all sane—and consistent—across web and app.

Retail e-commerce app design / Grocery shopping app UX / Large-scale retail redesign / Omnichannel shopping experience design

Let me be real: there wasn't just one problem. There were many. Here's what we were up against:

Core Problems

1. Fragmented digital experiences
Meijer's web and mobile properties felt like they were designed in different decades. Because they basically were. Consistency? She was nowhere to be found.

2. No design system
Every designer was inventing the wheel. Every developer was guessing at implementation. Every QA engineer was crying into their keyboard.

3. Outdated tech stack
The backend architecture was... let's call it "legacy." The kind of legacy that makes engineers wince when you ask about scalability.

4. Accessibility wasn't a priority
It should have been. It needed to be. We were going to make it one.

5. Too many cooks, not enough alignment
Multiple consulting agencies. Internal teams. Stakeholders from every department. Everyone had opinions. Few had aligned on a vision.

6. Aggressive timeline
Development needed to start now. Like, yesterday. Which meant design needed to deliver faster than we could probably sustain.

jump to results

The Process

  • Step 1: Understand the constraints

    I started by diving deep into documentation—thrilling stuff like backend architecture specs, API limitations, and technical debt assessments. Why? Because designing pretty things that can't be built is a waste of everyone's time.

    Key questions I needed answered:

    • What can the backend actually do?

    • What are the technical constraints we're working within?

    • Where are the opportunities to push back and advocate for better UX?

    Step 2: Analyze the competition

    I conducted a competitive analysis of other grocery retailers (hello, Target, Kroger, Walmart) and e-commerce experiences to understand:

    • What patterns users already know and expect

    • Where we could differentiate

    • What components we'd need to support common workflows

    Step 3: Partner with the mobile team

    Catie and I tag-teamed this thing. She brought mobile expertise, I brought web thinking, and together we made sure our components would work across platforms without feeling disjointed. Weekly syncs, shared Sketch files, and a lot of "wait, how are you handling that?" conversations kept us aligned.

  • Here's the thing about design systems: everyone says they want one until you ask them to use it consistently. My job was to create something flexible enough to scale but opinionated enough to maintain consistency.

    What I created:

    1. Interim Style Guide
    Developers couldn't wait for the "perfect" design system. They needed something now. So I created a lightweight interim guide covering:

    • Typography scale and usage rules

    • Color palette (working closely with marketing to ensure brand consistency)

    • Spacing system (8pt grid, because math should be easy)

    • Core components (buttons, forms, cards, navigation)

    • Accessibility guidelines (contrast ratios, focus states, keyboard navigation)

    2. Component Library
    I designed and documented every component we'd need, including:

    • All states (default, hover, active, disabled, error, loading)

    • All variations (primary/secondary buttons, small/large inputs, etc.)

    • Usage guidelines (when to use what, and why)

    • Do's and don'ts with visual examples

    3. Sitemaps and User Flows
    To identify content types and hierarchy, I mapped out:

    • Key user journeys (browse → add to cart → checkout)

    • Information architecture across the site

    • Navigation patterns and content relationships

    4. Header and Navigation Analysis
    I analyzed competitor approaches to headers and navigation, then proposed solutions that:

    • Balanced business needs (promote sales, mPerks, categories)

    • Supported user mental models (where do people expect to find things?)

    • Worked across screen sizes (mobile-first, always)

    5. Accessibility and Inclusive Design Focus
    This wasn't an afterthought—it was baked into every decision:

    • WCAG 2.1 AA compliance minimum

    • Keyboard navigation for all interactive elements

    • Color contrast ratios that actually pass

    • Screen reader testing and semantic HTML structure

    • Focus on reducing cognitive load

  • Cross-functional meetings. So. Many. Meetings.

    I partnered with:

    • Marketing: To ensure brand consistency without sacrificing usability

    • Mobile team (Catie): To maintain visual parity between web and app

    • Product Management: To prioritize features and negotiate timeline tradeoffs

    • Engineering teams: To ensure components were technically feasible and performant

    • Consulting agencies: To translate our design thinking into their development process

    • Stakeholders: To present strategy, secure buy-in, and manage expectations

    The reality check:
    Not every component made it into v1. Not every idea survived stakeholder review. But every decision was documented, every tradeoff was intentional, and every "no" came with a "here's why, and here's what we can do instead."

  • Real-time analytics + live usability testing

    I backed every design decision with:

    • Analytics data: What were users actually doing? Where were they dropping off?

    • Industry case studies: What had worked for similar retailers?

    • In-person usability testing: We brought in real Meijer shoppers to test prototypes and identify friction points

    Key insights from testing:

    • Users expected mega-menu navigation (they shop at other retailers—consistency matters)

    • Search needed to be stupid accessible (top right, always visible, autofocus on mobile)

    • Category pages needed filtering that actually worked (revolutionary, I know)

The Design System

What you see documented here is Version 0—the scrappy, nimble, "we need this yesterday" prototype that eventually evolved into the Meijer Digital Design System.

This wasn't the polished, final version. This was the boilerplate. The MVP. The thing that got us unstuck and moving forward.

Components included:

  • Typography system

  • Color palette (with accessibility annotations)

  • Button variations

  • Form inputs and validation states

  • Card structures

  • Navigation patterns

  • Grid system

  • Iconography guidelines

Documentation included:

  • Usage guidelines

  • Code snippets (HTML/CSS starter code)

  • Accessibility requirements

  • Responsive behavior notes

  • When to use (and when not to use) each component

This design system became the repository that consulting agencies, internal teams, and future designers would reference to build consistent experiences across Meijer's digital properties.

Outcomes & Impact

What shipped:

  • Interim style guide that unblocked development immediately

  • Component library with all variations, states, and documentation

  • Information architecture that streamlined content and improved findability

  • Accessibility-first approach that raised the bar for inclusive design at Meijer

  • Foundation for the Meijer Digital Design System used across teams

What I'm proud of:

  • Creating clarity in chaos (multiple agencies, aggressive timeline, massive stakeholder pool)

  • Building something flexible enough to evolve but structured enough to maintain consistency

  • Advocating for accessibility and inclusive design from day one

  • Partnering across functions to translate design thinking into developer-friendly documentation

  • Starting with scrappy and iterating to scalable

What I learned:

  • Design systems are never "done"—they're living, breathing things that need care and feeding

  • Interim solutions are better than perfect solutions that arrive too late

  • Cross-functional collaboration is a superpower when everyone's aligned on the "why"

  • Sometimes you have to design for today's constraints while planning for tomorrow's possibilities

  • Documentation matters more than designers want to admit (sorry, it's true)

Reflections

This project was a masterclass in stakeholder management, cross-functional collaboration, and designing under pressure. It taught me that sometimes the most impactful work isn't the final polished product—it's the foundational work that makes everything else possible.

Was it perfect? No. But it was done, it was usable, and it unblocked an entire digital transformation effort.

And honestly? That's the kind of scrappy, strategic, "let's ship something that works" thinking that makes me love this job.

Previous

ATBS Mobile App
Next

Meijer Mobile App