Draeger's Market Website Redesign

Draeger's Market is a premium 90 year old grocery brand in the San Francisco Bay Area. While the stores have a great ambiance and they are very easy to navigate, their existing online experience didn't match the in-store experience.


I reimagined their online presence to enhance the user experience, streamline navigation, and reflect the brand's upscale, community-focused identity. By addressing user pain points and aligning with Draeger's core values, I created a modern, intuitive website that improves customer engagement and drives online sales.

Draeger's Market is a premium 90 year old grocery brand in the San Francisco Bay Area. While the stores have a great ambiance and they are very easy to navigate, their existing online experience didn't match the in-store experience.


I reimagined their online presence to enhance the user experience, streamline navigation, and reflect the brand's upscale, community-focused identity. By addressing user pain points and aligning with Draeger's core values, I created a modern, intuitive website that improves customer engagement and drives online sales.

View prototype
View prototype
View prototype
View Figma file
View Figma file
View Figma file

Divider

COMPANY

Draeger's Market

DURATION

3 weeks

TOOLS

Figma

Canva

Miro

Pen & Paper

MY ROLE

Competitive Analysis

User Interviews

Card Sort

Information Architecture

Taskflow

Product Strategy

Branding

Wireframe

Prototype

PROBLEM

Draeger's Market's existing website failed to meet the needs of its diverse user base. It lacked clear navigation, engaging storytelling for local products, and a seamless shopping experience. Users found it cluttered, inconsistent, and difficult to use, especially for online shopping, which led to frustration and low adoption rates for digital services.

HOW MIGHT WE

How might we create an intuitive and engaging website for Draeger's Market that reflects its rich heritage, highlights its premium offerings, and provides a seamless shopping experience that helps it competitive with other more established online shopping experiences?

SOLUTION

I redesigned website to:

  1. highlight Draeger's premium offerings,

  2. enhance storytelling for its rich history and local products, and

  3. provide intuitive navigation for both casual browsers and task-oriented shoppers.


The design incorporates user-friendly features like detailed product pages, streamlined checkout, curated bundles, and actionable promotions.

IMPACT

Improved website usability and reduced user frustration through clear, intuitive navigation.

  • Enhanced storytelling for local products, creating a stronger connection with the brand.

  • Strengthened Draeger's community-focused identity with a visually cohesive and engaging design.

  • Increased website usability score from 3 out of 10 to 8 out of 10.

Divider

Research

COMPETITIVE ANALYSIS

I started with competitive analysis assess the strengths and weaknesses of Draeger's Market in comparison to similar grocery stores. I used the following methodologies to identify Draeger's strengths and weaknesses in the competitive landscape:

  • Pluses & Deltas

  • SWOT Analysis


Draeger's strengths:

Relevance of Content

Content is highly relevant to what users are looking for, positioning Marble as a platform with tailored, high-quality media curated specifically for influential women leaders.

Content Variety

Offers a wide range of content types (e.g., news, books, podcasts, videos, lectures) to provide a holistic view of a leader’s media presence.

Women & Non-Binary Leaders

Finding women and non-binary leaders across industries is simple, making the platform a strong tool for both learning and networking.

Relevance of Content

Content is highly relevant to what users are looking for, positioning Marble as a platform with tailored, high-quality media curated specifically for influential women leaders.

Content Variety

Offers a wide range of content types (e.g., news, books, podcasts, videos, lectures) to provide a holistic view of a leader’s media presence.

Women & Non-Binary Leaders

Finding women and non-binary leaders across industries is simple, making the platform a strong tool for both learning and networking.

Relevance of Content

Content is highly relevant to what users are looking for, positioning Marble as a platform with tailored, high-quality media curated specifically for influential women leaders.

Content Variety

Offers a wide range of content types (e.g., news, books, podcasts, videos, lectures) to provide a holistic view of a leader’s media presence.

Women & Non-Binary Leaders

Finding women and non-binary leaders across industries is simple, making the platform a strong tool for both learning and networking.


Draeger's weaknesses:

Limited Audience Engagement

Marble offers limited ways for audiences to interact with content (e.g., no commenting, liking, or seeing what other fans and followers are saying). This reduces the sense of community.

Awareness Barrier

Users need to already know something about the leader to find content of interest. The platform lacks tools to surface trending or relevant profiles for users unfamiliar with them.

Content Interaction Tools

Lacks features like saving, favoriting, or sharing content, which are standard across other competitive platforms.

Limited Audience Engagement

Marble offers limited ways for audiences to interact with content (e.g., no commenting, liking, or seeing what other fans and followers are saying). This reduces the sense of community.

Awareness Barrier

Users need to already know something about the leader to find content of interest. The platform lacks tools to surface trending or relevant profiles for users unfamiliar with them.

Content Interaction Tools

Lacks features like saving, favoriting, or sharing content, which are standard across other competitive platforms.

Limited Audience Engagement

Marble offers limited ways for audiences to interact with content (e.g., no commenting, liking, or seeing what other fans and followers are saying). This reduces the sense of community.

Awareness Barrier

Users need to already know something about the leader to find content of interest. The platform lacks tools to surface trending or relevant profiles for users unfamiliar with them.

Content Interaction Tools

Lacks features like saving, favoriting, or sharing content, which are standard across other competitive platforms.


Opportunities for Draeger's:

  1. Online Presence

Expanding e-commerce options and improving digital marketing could help reach younger demographics and compete with online grocery services.

  1. Customer Loyalty Program

Implementing or improving a loyalty program could help retain customers and encourage repeat visits.

  1. Customer Loyalty Program

Emphasizing and expanding partnerships with local producers could further differentiate Draeger's from larger chains.

  1. Online Presence

Expanding e-commerce options and improving digital marketing could help reach younger demographics and compete with online grocery services.

  1. Customer Loyalty Program

Implementing or improving a loyalty program could help retain customers and encourage repeat visits.

  1. Customer Loyalty Program

Emphasizing and expanding partnerships with local producers could further differentiate Draeger's from larger chains.

  1. Online Presence

Expanding e-commerce options and improving digital marketing could help reach younger demographics and compete with online grocery services.

  1. Customer Loyalty Program

Implementing or improving a loyalty program could help retain customers and encourage repeat visits.

  1. Customer Loyalty Program

Emphasizing and expanding partnerships with local producers could further differentiate Draeger's from larger chains.

USER RESEARCH

To better understand users' needs and pain points, I also conducted three user interviews and usability tests each. Interviewees were US residents aged between 25 to 40 years old.


User interviews

My primary objectives behind my user interviews included:

  1. Understanding users' typical grocery routine both online and in store.

  2. Their decision making process during online grocery shopping, such as when and why do they choose to shop online.

  3. Their experience shopping at competitors' in store and online experiences.


Here are my affinity maps based on the user interviews:

USABILITY TEST

To better understand users' needs and pain points, I also conducted three usability tests each. Interviewees were US residents aged between 25 to 40 years old.


Usability tests:

I wanted to finds patterns on the following experiences during my usability tests:

  1. Product offerings

  2. Search & navigation

  3. Cart & checkout experience

  4. Homepage

  5. Look & feel

  6. Business perception


Here are my affinity maps based on the usability tests:

Divider

Approach

PERSONA CREATION

I noticed two personas emerge from the research insights based on their different priorities:

  1. The quality-focused, local enthusiast—I named her Amy

  2. The budget-conscious, convenience seeker—I named them Alec


Here are the quadrants they fall into:

PERSONA

In the interest of time and since, based on my competitive analysis, Draeger's strengths is in premium grocery products, I decided to focus on primary persona, Amy. I designed the persona to serve as a cumulative representation of most of the common user needs, goals, thoughts, feelings, pain points and actions into account, that I derived from my interviews and insights.

PROBLEM STATEMENT
REDESIGN PRIORITIZATION

MUST HAVE

  1. Redesigned About page for Featured Members

  2. Addition of Q&A Section

  3. Redesigned Edit Section

NICE TO HAVE

  1. Standardized terminology

  2. Addition of Biography

  3. Timeline

  4. Site loading report to understand usability

  5. Design cohesiveness with Newsfeed

OUT OF SCOPE

  1. Design for mobile

  2. Redesigned About page for

  3. Audience Member

  4. Redesigned landing page

MUST HAVE

  1. Redesigned About page for Featured Members

  2. Addition of Q&A Section

  3. Redesigned Edit Section

NICE TO HAVE

  1. Standardized terminology

  2. Addition of Biography

  3. Timeline

  4. Site loading report to understand usability

  5. Design cohesiveness with Newsfeed

OUT OF SCOPE

  1. Design for mobile

  2. Redesigned About page for

  3. Audience Member

  4. Redesigned landing page

MUST HAVE

  1. Redesigned About page for Featured Members

  2. Addition of Q&A Section

  3. Redesigned Edit Section

NICE TO HAVE

  1. Standardized terminology

  2. Addition of Biography

  3. Timeline

  4. Site loading report to understand usability

  5. Design cohesiveness with Newsfeed

OUT OF SCOPE

  1. Design for mobile

  2. Redesigned About page for

  3. Audience Member

  4. Redesigned landing page

Divider

Design

SITE MAP

I audited the existing site's navigation and site map, then used a card sorting technique to redesign its structure. To ensure clear and logical user flows, I conducted card sorting interviews with three users and analyzed the results. This process informed the creation of a new, intuitive, consistent, and user-friendly information architecture for Draeger's website.

TASK FLOW

I prioritized user journeys for key actions like searching for products and checking out. Based on the prioritization matrix mentioned above, I focused on just the immediate need of my primary persona: her task of ordering a premade meal for a weeknight.

SKETCH & LOW-FI WIREFLOW

I used pen and paper to do a rough mockup of the pages I prioritized for the redesign. I then used the sketch to inspire a set of low-fidelity wireframes in Figma.

VISUAL IDENTITY

I decided to keep the logo since it's an iconic visual identity at this point. Users tended to not like the big presence of grays in the webpage as "it took away from some of the warmth". I updated the warm color palette and to make the colors consistent with those in the stores.

HI-FI WIREFLOW & INTERACTIVE PROTOTYPE

I went to the physical store to find inspiration and notice their branding and presentation style. I used those inspiration to create my redesign.


Developed and tested prototypes to validate design decisions.To check out an interactive prototype of my redesign, please click here:

View prototype
View prototype
View prototype
DESIGN JUSTIFICATION

I went to the physical store to find inspiration and notice their branding and presentation style. I used those inspiration to create my redesign.

Divider

Summary

TAKEAWAYS

The redesign of Draeger's website reinforced the importance of balancing the brand’s rich heritage with modern usability. Key takeaways from this project include:

  1. User-Centered Design Matters

Insights from user interviews and testing were invaluable in shaping the design to meet customer expectations, particularly for navigation and storytelling.

  1. Simplification Is Key

Streamlined navigation and clear product categorization significantly improved usability and user satisfaction.

  1. Simplification Is Key

Ensuring a cohesive experience between in-store charm and online functionality is crucial to maintaining customer loyalty.

  1. User-Centered Design Matters

Insights from user interviews and testing were invaluable in shaping the design to meet customer expectations, particularly for navigation and storytelling.

  1. Simplification Is Key

Streamlined navigation and clear product categorization significantly improved usability and user satisfaction.

  1. Simplification Is Key

Ensuring a cohesive experience between in-store charm and online functionality is crucial to maintaining customer loyalty.

NEXT STEPS

If I had more time to work on this project, I'd do the following:

  1. Conduct Usability Testing: I'd test the live site with real users to identify areas for improvement and optimization.

  2. Redesign the Remaining Pages: The revised site map has a number of other pages that need to be redesigned to create consistency with the design system.

  3. Integrate Personalization: I'd further ideate to develop AI-driven recommendations based on shopping history to offer a more tailored user experience.

  4. Track Analytics: Monitor key performance metrics like user engagement, cart abandonment rates, and online sales to measure the redesign’s impact.

  5. Iterate and Improve: Use feedback and data to iterate on the design, ensuring the website continues to meet evolving customer needs.

REFLECTIONS

This project was a valuable opportunity to bridge a traditional retail experience with digital innovation.

  1. I learned the importance of listening to diverse user needs, from quality-focused planners to convenience-driven shoppers, and addressing those needs in a single platform.

  2. The challenge of balancing aesthetic appeal with functional simplicity highlighted the need for iterative testing and feedback to refine the design.

  3. While the final design met many user needs, there is always room to further explore features like enhanced personalization and improved mobile responsiveness.

  4. Incorporating Draeger's legacy into the digital space was rewarding, proving that storytelling can create an emotional connection, even online.

Shamima

Send an email

Use our advanced form to get in touch with us if you need assistance or have questions about my services.

All rights reserved © 2025. Designed by Shamima Khan

Shamima

Send an email

Use our advanced form to get in touch with us if you need assistance or have questions about my services.

All rights reserved © 2025. Designed by Shamima Khan

Shamima

Send an email

Use our advanced form to get in touch with us if you need assistance or have questions about my services.

All rights reserved © 2025. Designed by Shamima Khan