Divider

TYPE

Solo Project

DURATION

3 weeks

TOOLS

Figma

Claude

Canva

Unsplash

Miro

Pen & Paper

MY ROLE

Competitive Analysis

User Interviews

Card Sort

Information Architecture

Taskflow

Product Strategy

Branding

Wireframe

Prototype

Draeger's Market Website Redesign

Draeger's Market Website Redesign

Draeger's Market, a 90-year-old premium grocery brand in the San Francisco Bay Area, offers an exceptional in-store experience, but its online presence fell short. I reimagined their website to enhance usability, streamline navigation, and reflect their upscale, community-focused identity. The redesign addressed user pain points, aligned with Draeger's core values, and created a modern, intuitive platform to improve customer engagement and drive online sales.

Divider

Overview

Overview

Overview

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?

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?

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 the 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

Reseach

Reseach

Reseach

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:

High-Quality Gourmet Products

Draeger's is known for offering premium, gourmet, and artisanal food items that appeal to a niche, high-end customer base.

Personalized, Upscale in Store Shopping Experience

Draeger's provides a curated, luxury shopping experience, emphasizing customer service and product quality.

Strong Community Ties

As a family-owned business with deep local roots, Draeger's benefits from strong customer loyalty in the Bay Area.

High-Quality Gourmet Products

Draeger's is known for offering premium, gourmet, and artisanal food items that appeal to a niche, high-end customer base.

Personalized, Upscale in Store Shopping Experience

Draeger's provides a curated, luxury shopping experience, emphasizing customer service and product quality.

Strong Community Ties

As a family-owned business with deep local roots, Draeger's benefits from strong customer loyalty in the Bay Area.

High-Quality Gourmet Products

Draeger's is known for offering premium, gourmet, and artisanal food items that appeal to a niche, high-end customer base.

Personalized, Upscale in Store Shopping Experience

Draeger's provides a curated, luxury shopping experience, emphasizing customer service and product quality.

Strong Community Ties

As a family-owned business with deep local roots, Draeger's benefits from strong customer loyalty in the Bay Area.


Draeger's weaknesses:

Smaller Online Presence

The e-commerce experience at Draeger's is less developed compared to competitors, with opportunities to expand online shopping, delivery, and marketing.

Higher Price Point

Draeger's pricing may limit its appeal to a broader audience, as many competitors offer similar products at lower prices.

Limited Locations

Draeger's has a smaller geographic footprint, making it less accessible than larger chains like Whole Foods or Trader Joe's.

Smaller Online Presence

The e-commerce experience at Draeger's is less developed compared to competitors, with opportunities to expand online shopping, delivery, and marketing.

Higher Price Point

Draeger's pricing may limit its appeal to a broader audience, as many competitors offer similar products at lower prices.

Limited Locations

Draeger's has a smaller geographic footprint, making it less accessible than larger chains like Whole Foods or Trader Joe's.

Smaller Online Presence

The e-commerce experience at Draeger's is less developed compared to competitors, with opportunities to expand online shopping, delivery, and marketing.

Higher Price Point

Draeger's pricing may limit its appeal to a broader audience, as many competitors offer similar products at lower prices.

Limited Locations

Draeger's has a smaller geographic footprint, making it less accessible than larger chains like Whole Foods or Trader Joe's.


Opportunities for Draeger's:

  1. Enhancing 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. Expanding Local Partnerships

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

  1. Enhancing 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. Expanding Local Partnerships

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

  1. Enhancing 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. Expanding Local Partnerships

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 is my affinity map based on the usability tests:

Divider

Approach

Approach

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:

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:

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 Timeline

  3. Site loading report to understand usability

  4. Design cohesiveness with Newsfeed

OUT OF SCOPE

  1. Design for mobile

  2. Redesigned About page for Audience Member

  3. 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 Timeline

  3. Site loading report to understand usability

  4. Design cohesiveness with Newsfeed

OUT OF SCOPE

  1. Design for mobile

  2. Redesigned About page for Audience Member

  3. 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 Timeline

  3. Site loading report to understand usability

  4. Design cohesiveness with Newsfeed

OUT OF SCOPE

  1. Design for mobile

  2. Redesigned About page for Audience Member

  3. Redesigned landing page

Divider

Design

Design

Design

SITE MAP

I audited the existing site's navigation and site map, then used a slightly different card sorting technique to redesign its information architecture. 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 navitation 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 decided to update the color palette into a warm and make the colors consistent with those in the stores.

HI-FI WIREFLOW & INTERACTIVE PROTOTYPE

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

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

DESIGN JUSTIFICATION

To better understand the some of rationale behind my design decisions, please check out the side by side comparison here.

Divider

Summary

Summary

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:

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.

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 great learning 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 brands that create emotional connection in physical location can also bring that experience to their online presence.