Hearthy Foods
Modernizing an e-commerce website for a seamless experience
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.
[Industry]
E-Commerce / Shopify
[Timeline]
July 2025 (3 weeks)
[My Role]
Lead Designer
[Team]
Client, Lead Designer (Me), Developer
Design Process
1. Client Vision
2. Current Experience Research
3. Creating Wireframes
4. Responsive Design
Aligning with the client's vision
After reviewing the client’s vision and references, I translated their ideas into modern, conversion-focused UI components. With full creative control, I established a cohesive visual direction and created a lightweight brand identity guide, including updated colors, typography, and core UI elements. I also designed reusable UI components—product cards, section layouts, buttons, and headers—to ensure consistency across pages and speed up the design process. The guide was reviewed early on with the client to ensure alignment and reflect the brand’s personality and values.
[Brand Identity Guide + UI Elements]
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.
The redesign
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.
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]