ZYWEN
Services
Marketplace
WorkAbout
Resources
Log inStart a project
Services
MarketplaceSOON→
Resources
Work→About→Contact→Start a project →

Hearthly

A web design case study — a warm home marketplace for appliances, furniture and LPG delivery in Accra, plus Hearthly Mail.

Client
Hearthly
Industry
Home & living · E-commerce
Services
UX research, UI design, e-commerce
Deliverables
Store, Mail app, filters, UI kit
Hearthly e-commerce website homepage shown on a laptop screen in a warm wooden setting — web design case study cover by Zywen
01 — OVERVIEW

Everything for the home, one warm place.

The challenge

Shoppers in Accra bought appliances, furniture and cooking gas from different sellers, sites and WhatsApp chats. Prices were unclear, delivery was guesswork and nothing felt premium.

The goal

One marketplace where every room, appliance and LPG refill is easy to find, compare and order — with clear GHS prices and delivery to the door.

Our role

UX research, IA, visual design for the store (home, category, product, filters), the Hearthly Mail app, and a shared UI kit.

Timeline

7 weeks

Team

Product designer, PM, 2 developers

Methods

Shopper interviews, card sort, wireframes

Platform

Desktop web · 1920

02 — DISCOVERY

We shopped like our customers first.

Shopper interviewsStore visitsMarketplace auditCard sortAnalytics review

Primary persona

Ama, the new homeowner

Just moved into a flat in Dzorwulu. Furnishing room by room and wants trusted products, clear prices and reliable delivery without visiting ten shops.

Goals

  • Furnish room by room
  • Clear GHS prices
  • Fast gas refills

Frustrations

  • Too many sellers
  • Hidden delivery fees
  • Flat product photos

Context

  • Weekend browsing
  • Laptop and phone
  • Shops with partner
03 — SHOPPING FLOW

From browsing to checkout in four steps.

Before

  1. 01Many sellers
  2. 02WhatsApp orders
  3. 03Hidden fees
  4. 04Flat photos
  5. 05Phone-in gas
  6. 06No reviews

Before: separate shops, unclear prices and gas ordered by phone call.

After

  1. 01Browse
  2. 02Filter
  3. 03Compare
  4. 04Add to cart
  5. 05Delivered

Shoppers browse by category or by room, filter by price, brand and rating, compare on a rich product page and add appliances and LPG to one cart.

One cart for everything
GHS prices up front
Shop by room or category
04 — PROCESS

Structure first, warmth later.

01WEEK 1

Discovery

Shopper interviews and marketplace audit.

02WEEK 1

Structure

Categories, card sort and sitemap.

03WEEK 3–5

Visual design

Home, category, product and filters.

04WEEK 6

Handoff

UI kit and developer specs.

05WEEK 7

Launch

Go live and track orders.

Wireframe → final — hero

Hearthly homepage hero wireframe evolving into the final lifestyle hero design with search and delivery address
Lifestyle hero with delivery address and search up top.

Wireframe → final — category

Hearthly category page wireframe evolving into the final appliance product grid design
A clean product grid, with filters one click away.

Wireframe → final — product

Hearthly product page wireframe evolving into the final electric stove product page with gallery and buy box
Gallery, price and buy box, trust badges below.
05 — THE SITE

A warm marketplace, and a mail app to match.

Full Hearthly e-commerce homepage design for home appliances, furniture and LPG delivery in Accra
Hearthly category page design with left filter rail, GHS price ranges and appliance product gridHearthly product page design for a premium electric stove with gallery, price, buy box and trust badges
Hearthly Mail web app inbox design with folders, email list and reading pane
Hearthly Mail compose new message screen designHearthly Mail sign-in screen designHearthly Mail email thread and reply screen designHearthly Mail create account sign-up screen design
06 — VISUAL SYSTEM

Warm wood and honey gold.

Colour

Walnut

#291D0F

Copper

#AE6F28

Honey

#EAAA08

Sand

#E5D2B8

Cream

#FFFAEB

Type

Display — SF Pro Bold

Body — SF Pro Regular / Medium

Components

Badges

In Stock
4.8 ★
Popular
Free Delivery

Warm neutrals · lifestyle photography · copper accents

07 — COMPONENTS

One kit, for the store and the mail app.

Hearthly UI kit buttons — Add to Cart, Buy Now, Order Now and Explore Full Space in copper
Hearthly product card component showing an electric stove with rating and GHS price
Hearthly category tile component for Home Appliances with air fryer and blender
Hearthly navigation bar and category search component
Hearthly LPG gas refill card component — most popular 5kg cylinder with GHS price and Order Now button
Hearthly buy box component with price, quantity, Add to Cart and delivery, payment and returns badges
Hearthly Shop by space component with living room, bedroom and workspace cards
Hearthly Mail email row component in default and selected states
Hearthly Mail action menus — main menu, move to folder and report submenus
08 — ITERATION

Three rounds of testing, each one calmer.

Round 01

Navigation

What we tested

Can shoppers find a product by room or by category?

What changed

Added “Shop by space” beside the classic categories.

Round 02

Filters

What we tested

Can shoppers narrow 200+ appliances fast?

What changed

Moved filters to a left rail with GHS price ranges.

Round 03

Checkout trust

What we tested

Do shoppers feel safe buying big items?

What changed

Added delivery, secure payment and returns badges.

Next project

Melbourne Arboretum — Web Design

LET’S BUILD

Have something
worth building?

Hire our studio to design, build and grow it — or start faster with a product from the Zywen Marketplace.

Start a ProjectBrowse marketplace
Zywen studio project cards