[Case 04]
Hearthy Foods
Shopify E-commerce
Hearthy Foods
Modernizing a family-run food brand’s Shopify eCommerce website across desktop, tablet, and mobile.
Project Overview
Hearthy Foods is a family-run brand offering allergen-free baking mixes and superfood products. I was brought on as the sole designer to refresh their website and make it feel more modern and trustworthy. The client had a clear vision and provided reference sites for inspiration.
The Challenge
The existing website felt outdated and didn’t reflect the quality or energy of the brand. The layout lacked hierarchy, product visibility was low, and the mobile experience was clunky. The client wanted a refreshed site that felt fresh, modern, and conversion-friendly — without losing its warmth and personality.
[Focus]
Shopify E-commerce
[Timeline]
July 2025 - Present
[My Role]
Lead Designer
[Team]
Client, Lead Designer (Me), Developer
Design Process
1. Client Vision
2. Heuristic Evaluation
3. Wireframes
4. Responsive Design
5. QA, Developer Handoff (ongoing)
01. Aligning with the Client’s Vision
After reviewing the client’s vision and references, I translated their ideas into modern, conversion-focused UI components. The client gave me full creative control, which allowed me to take initiative in establishing a cohesive visual direction. I created a lightweight brand identity guide — including updated color palettes, typography, and a few core UI elements — to build a strong foundation for the redesign. I also designed several reusable UI components — such as product cards, section layouts, buttons, and headers — that could be applied across different pages. This not only helped speed up the design process but also ensured a consistent visual language throughout the site. We reviewed the guide together early on to ensure alignment and to make sure the visuals reflected the brand’s personality and values.


[Brand Identity Guide + UI Elements]
02. Evaluating the Existing Experience
I conducted a quick heuristic evaluation of the existing Hearthy Foods website to better understand its usability challenges. By reviewing the site through the lens of common UX principles, I identified several key pain points that were likely affecting user experience and conversion. These insights helped inform my design decisions and highlighted areas where a visual and structural redesign could have the most impact.

Poor Navigation & Category Structure
Navigation is overwhelming, repetitve, and lacks clear CTAs, making product discovery difficult.
✅ Redesign Fix: I reorganized the site structure with clearer labels and a more intuitive CTAs to help users find products faster.
Weak Device Responsiveness
Mobile & tablet versions of the old site feels cramped, with elements not well-optimized for smaller screens.
✅ Redesign Fix: I designed for desktop, tablet, and mobile separately, ensuring content adapts fluidly and CTAs remain easy to interact with.
Flexibility & Efficiency of Use
The old product pages lack filtering or sorting options, forcing users to scroll through all items manually.
✅ Redesign Fix: I designed layouts that support future enhancements like filters and sorting tools to improve browsing efficiency and support return users.
03. Laying the Visual Foundation
I began by creating high-fidelity wireframes of the desktop design, as the client shared that most users access the site through this platform. Once the desktop layout was finalized, I adapted the content for mobile, prioritizing essential information and simplifying interactions to suit smaller screens. This involved rethinking layout structures, using icons and collapsible sections, and applying mobile-friendly visual cues to maintain clarity without overwhelming the user. Lastly, I designed the tablet version, bridging the gap between desktop and mobile to ensure a consistent and seamless experience across all devices.
0.4 Designing for Every Device
The client emphasized the importance of responsiveness across all devices, so I made it a priority during the design process, creating three responsive versions of the site tailored to desktop, mobile, and tablet screens.
[Old]
[Redesign]