Baby & Mothman Coffee
Baby & Mothman Coffee
Baby & Mothman Coffee
Redesigning the mobile experience to drive engagement and sales
for a pet driven coffee brand
Redesigning the mobile experience to drive engagement and sales for a pet driven coffee brand
Redesigning the mobile experience to drive engagement and sales for a pet driven coffee brand
OVERVIEW
Baby & Mothman Coffee is a specialty coffee brand that brings quality coffee to the community while supporting animal shelters through proceeds and donations.
Baby & Mothman Coffee is a specialty coffee brand that brings quality coffee to the community while supporting animal shelters through proceeds and donations.
Baby & Mothman Coffee is a specialty coffee brand that brings quality coffee to the community while supporting animal shelters through proceeds and donations.
The original website was built quickly with the goal of launching sales fast—but without resources, user research, and a strong UX strategy.
The first phase of the redesign focused on a mobile-optimized experience that could better engage users, reflect the brand’s personality, and drive conversions.
This case study walks through the process, from identifying usability issues to delivering a refreshed mobile experience built for future scalability.
The original website was built quickly with the goal of launching sales fast—but without resources, user research, and a strong UX strategy.
The first phase of the redesign focused on a mobile-optimized experience that could better engage users, reflect the brand’s personality, and drive conversions.
This case study walks through the process, from identifying usability issues to delivering a refreshed mobile experience built for future scalability.
The original website was built quickly with the goal of launching sales fast—but without resources, user research, and a strong UX strategy.
The first phase of the redesign focused on a mobile-optimized experience that could better engage users, reflect the brand’s personality, and drive conversions.
This case study walks through the process, from identifying usability issues to delivering a refreshed mobile experience built for future scalability.
TEAM
6 Members (Founders, UX Designers, Product Strategists, Writers)
6 Members (Founders, UX Designers, Product Strategists, Writers)
6 Members (Founders, UX Designers, Product Strategists, Writers)
ROLE
Product Strategist & Designer
Product Strategist & Designer
Product Strategist & Designer
TIMELINE
Nov 2024 - Feb 2025
Nov 2024 - Feb 2025
Nov 2024 - Feb 2025
DESIGN THINKING PROCESS
PROBLEM
The original site struggled to engage users and convert traffic into sales. From a UX perspective, the website lacked clear hierarchy, had limited content to build trust or interest, and wasn’t optimized for mobile—the format most customers used to browse.
Additionally, the design didn’t effectively communicate the brand’s values or visual identity, making it difficult for users to feel emotionally connected to the mission. Without usability testing or a clear user journey, the experience felt disjointed and transactional rather than community-driven.
The original site struggled to engage users and convert traffic into sales. From a UX perspective, the website lacked clear hierarchy, had limited content to build trust or interest, and wasn’t optimized for mobile—the format most customers used to browse.
Additionally, the design didn’t effectively communicate the brand’s values or visual identity, making it difficult for users to feel emotionally connected to the mission. Without usability testing or a clear user journey, the experience felt disjointed and transactional rather than community-driven.
The original site struggled to engage users and convert traffic into sales. From a UX perspective, the website lacked clear hierarchy, had limited content to build trust or interest, and wasn’t optimized for mobile—the format most customers used to browse.
Additionally, the design didn’t effectively communicate the brand’s values or visual identity, making it difficult for users to feel emotionally connected to the mission. Without usability testing or a clear user journey, the experience felt disjointed and transactional rather than community-driven.
Baseline Site Performance
Baseline Site Performance
Data over a period of 1o months was provided for pre-redesign analysis to set baseline metrics.
Data over a period of 1o months was provided for pre-redesign analysis to set baseline metrics.
Data over a period of 1o months was provided for pre-redesign analysis to set baseline metrics.
Hypothesis
Hypothesis
If we restructure the mobile layout and improve the visual hierarchy and CTA placement, then users will be able to navigate more efficiently and take action more confidently, resulting in increased engagement and a higher conversion rate on mobile.
If we restructure the mobile layout and improve the visual hierarchy and CTA placement, then users will be able to navigate more efficiently and take action more confidently, resulting in increased engagement and a higher conversion rate on mobile.
If we restructure the mobile layout and improve the visual hierarchy and CTA placement, then users will be able to navigate more efficiently and take action more confidently, resulting in increased engagement and a higher conversion rate on mobile.
DISCOVER
The research phase focused on identifying where the original experience was falling short in driving engagement and conversions. By analyzing user behavior, perception, and competitor patterns, we surfaced clear opportunities to improve messaging clarity, streamline the purchase journey, and align the site more closely with user expectations and brand goals.
The research phase focused on identifying where the original experience was falling short in driving engagement and conversions. By analyzing user behavior, perception, and competitor patterns, we surfaced clear opportunities to improve messaging clarity, streamline the purchase journey, and align the site more closely with user expectations and brand goals.
The research phase focused on identifying where the original experience was falling short in driving engagement and conversions. By analyzing user behavior, perception, and competitor patterns, we surfaced clear opportunities to improve messaging clarity, streamline the purchase journey, and align the site more closely with user expectations and brand goals.
User Exploratory Research
User Exploratory Research
To inform the design and brand strategy for an online coffee experience, we surveyed 10 daily coffee drinkers to understand their preferences, trust drivers, and common pain points when shopping online.
To inform the design and brand strategy for an online coffee experience, we surveyed 10 daily coffee drinkers to understand their preferences, trust drivers, and common pain points when shopping online.
To inform the design and brand strategy for an online coffee experience, we surveyed 10 daily coffee drinkers to understand their preferences, trust drivers, and common pain points when shopping online.
Impression Testing
Impression Testing
Before diving into the redesign, we conducted a impression test to understand how users perceived the homepage within the first few seconds of viewing it. Participants were shown the homepage for 5 seconds and then asked to describe what they remembered, how they felt, and what they believed the site was about. This helped us identify gaps in visual hierarchy, messaging clarity, and emotional resonance—and informed our early design priorities.
Before diving into the redesign, we conducted a impression test to understand how users perceived the homepage within the first few seconds of viewing it. Participants were shown the homepage for 5 seconds and then asked to describe what they remembered, how they felt, and what they believed the site was about. This helped us identify gaps in visual hierarchy, messaging clarity, and emotional resonance—and informed our early design priorities.
Before diving into the redesign, we conducted a impression test to understand how users perceived the homepage within the first few seconds of viewing it. Participants were shown the homepage for 5 seconds and then asked to describe what they remembered, how they felt, and what they believed the site was about. This helped us identify gaps in visual hierarchy, messaging clarity, and emotional resonance—and informed our early design priorities.
Competitive Analysis
Competitive Analysis
As part of our research, we analyzed the mobile-responsive homepages of several mission-driven coffee brands to gather inspiration and identify best practices.
This competitive review helped us understand how leading brands communicate their values, structure their content, and build trust through storytelling, visuals, and calls to action—insights we used to inform our own homepage layout and messaging strategy.
As part of our research, we analyzed the mobile-responsive homepages of several mission-driven coffee brands to gather inspiration and identify best practices.
This competitive review helped us understand how leading brands communicate their values, structure their content, and build trust through storytelling, visuals, and calls to action—insights we used to inform our own homepage layout and messaging strategy.
As part of our research, we analyzed the mobile-responsive homepages of several mission-driven coffee brands to gather inspiration and identify best practices.
This competitive review helped us understand how leading brands communicate their values, structure their content, and build trust through storytelling, visuals, and calls to action—insights we used to inform our own homepage layout and messaging strategy.
Key Insights
Key Insights
Key Insights
(1) All brands prominently feature their mission or story at the top of the home page
(1) All brands prominently feature their mission or story at the top of the home page
(1) All brands prominently feature their mission or story at the top of the home page
(2) Each uses strong, emotive visuals to connect with users
(2) Each uses strong, emotive visuals to connect with users
(2) Each uses strong, emotive visuals to connect with users
(3) CTAs are clear and repetitive to drive action
(3) CTAs are clear and repetitive to drive action
(3) CTAs are clear and repetitive to drive action
(4) Trust signals are front and center with statistics and reviews clearly on the home page
(4) Trust signals are front and center with statistics and reviews clearly on the home page
(4) Trust signals are front and center with statistics and reviews clearly on the home page
(5) Mobile layouts use vertical content blocks for clear spacing and readability.
(5) Mobile layouts use vertical content blocks for clear spacing and readability.
(5) Mobile layouts use vertical content blocks for clear spacing and readability.
DEFINE
With key insights in hand, I distilled what we learned into a clear picture of our target users and their core needs. This phase focused on aligning around a primary persona and identifying the key features and content that would create a more intuitive, engaging, and conversion-friendly experience—especially on mobile.
With key insights in hand, I distilled what we learned into a clear picture of our target users and their core needs. This phase focused on aligning around a primary persona and identifying the key features and content that would create a more intuitive, engaging, and conversion-friendly experience—especially on mobile.
User Personas
Theresa
Theresa
The Busy Professional Mom
The Busy Professional Mom
Teresa is a busy, family-oriented mom and full-time nurse who’s always on the move. Coffee isn’t a luxury—it’s a daily necessity that helps her get through demanding shifts and life with young kids. While she’ll drink whatever’s available during the week, she enjoys slowing down on weekends to brew a cup from a specialty roast she’s intentionally chosen.
Though her budget is tight, Teresa makes an effort to support small, mission-driven coffee brands. She shops almost exclusively on her phone due to her fast-paced lifestyle, and prioritizes websites that are easy to navigate on mobile.
Teresa is a busy, family-oriented mom and full-time nurse who’s always on the move. Coffee isn’t a luxury—it’s a daily necessity that helps her get through demanding shifts and life with young kids. While she’ll drink whatever’s available during the week, she enjoys slowing down on weekends to brew a cup from a specialty roast she’s intentionally chosen.
Though her budget is tight, Teresa makes an effort to support small, mission-driven coffee brands. She shops almost exclusively on her phone due to her fast-paced lifestyle, and prioritizes websites that are easy to navigate on mobile.
Megan
Megan
The Dog Mom
The Dog Mom
Megan is a passionate pet parent who actively seeks out products that align with her love for animals. She enjoys showcasing her small dog wherever she goes and gravitates toward brands that help her express that bond. While her coffee preferences are flexible, she’s drawn to drinks that feel high-quality or offer a unique twist—especially when paired with a playful or pet-friendly brand story.
Megan shops almost exclusively on mobile and expects quick, visually engaging experiences that are easy to navigate on the go. She’s highly responsive to emotional triggers—especially anything involving pets—and is likely to convert when a product feels both personal and purposeful.
Megan is a passionate pet parent who actively seeks out products that align with her love for animals. She enjoys showcasing her small dog wherever she goes and gravitates toward brands that help her express that bond. While her coffee preferences are flexible, she’s drawn to drinks that feel high-quality or offer a unique twist—especially when paired with a playful or pet-friendly brand story.
Megan shops almost exclusively on mobile and expects quick, visually engaging experiences that are easy to navigate on the go. She’s highly responsive to emotional triggers—especially anything involving pets—and is likely to convert when a product feels both personal and purposeful.
Douglas
Douglas
The Relaxed Retiree
The Relaxed Retiree
Douglas is a retired pet lover who values simplicity, routine, and meaningful experiences. Having shared his life with many animals, he’s now focused on cherishing his final years with his aging dog. He enjoys leisurely weekend outings like local farmers markets and appreciates brands that reflect thoughtfulness, nostalgia, and emotional connection.
Douglas drinks coffee occasionally, typically opting for decaf. His digital engagement is minimal, but he’s comfortable using his iPad for straightforward, low-friction browsing. To convert Douglas, an experience must feel trustworthy, easy to navigate, and emotionally resonant.
Douglas is a retired pet lover who values simplicity, routine, and meaningful experiences. Having shared his life with many animals, he’s now focused on cherishing his final years with his aging dog. He enjoys leisurely weekend outings like local farmers markets and appreciates brands that reflect thoughtfulness, nostalgia, and emotional connection.
Douglas drinks coffee occasionally, typically opting for decaf. His digital engagement is minimal, but he’s comfortable using his iPad for straightforward, low-friction browsing. To convert Douglas, an experience must feel trustworthy, easy to navigate, and emotionally resonant.
DESIGN
With a clear understanding of our users and core feature priorities, we translated key insights into structured mid-fidelity wireframes. This phase focused on refining the home page layout, content hierarchy, and mobile usability—laying the foundation for a more intuitive, mission-driven shopping experience.
With a clear understanding of our users and core feature priorities, we translated key insights into structured mid-fidelity wireframes. This phase focused on refining the home page layout, content hierarchy, and mobile usability—laying the foundation for a more intuitive, mission-driven shopping experience.
With a clear understanding of our users and core feature priorities, we translated key insights into structured mid-fidelity wireframes. This phase focused on refining the home page layout, content hierarchy, and mobile usability—laying the foundation for a more intuitive, mission-driven shopping experience.
HIGH FIDELITY PROTOTYPE
After validating the structure and flow through mid-fidelity wireframes, we moved into high-fidelity design to bring the brand to life. This phase focused on applying visual style, refining UI components, and ensuring the experience felt cohesive, engaging, and aligned with the brand’s mission. These polished mockups laid the groundwork for usability testing and further iteration in the next phase.
After validating the structure and flow through mid-fidelity wireframes, we moved into high-fidelity design to bring the brand to life. This phase focused on applying visual style, refining UI components, and ensuring the experience felt cohesive, engaging, and aligned with the brand’s mission. These polished mockups laid the groundwork for usability testing and further iteration in the next phase.
After validating the structure and flow through mid-fidelity wireframes, we moved into high-fidelity design to bring the brand to life. This phase focused on applying visual style, refining UI components, and ensuring the experience felt cohesive, engaging, and aligned with the brand’s mission. These polished mockups laid the groundwork for usability testing and further iteration in the next phase.
NEXT STEPS
With the high-fidelity designs in place, the next phase will focus on usability testing, collecting feedback, and refining the experience based on real user behavior. Key areas of focus include optimizing mobile flow, validating trust signals, and ensuring the site not only looks great—but converts effectively.
With the high-fidelity designs in place, the next phase will focus on usability testing, collecting feedback, and refining the experience based on real user behavior. Key areas of focus include optimizing mobile flow, validating trust signals, and ensuring the site not only looks great—but converts effectively.
With the high-fidelity designs in place, the next phase will focus on usability testing, collecting feedback, and refining the experience based on real user behavior. Key areas of focus include optimizing mobile flow, validating trust signals, and ensuring the site not only looks great—but converts effectively.
© 2025 Yamuna Navada. All rights reserved.
Let’s collaborate!
No more content...but lots more ideas.
© 2025 Yamuna Navada. All rights reserved.
Let’s collaborate!