Garrett Lawson

Contact Me

Garrett Lawson

Contact Me

MoodMaid

Botanicals

Website Redesign

MoodMaid Botanicals

A responsive e-commerce

website redesign focused on clarity, trust, and confident purchasing in the wellness space.

A responsive e-commerce website redesign focused on clarity, trust, and confident purchasing the wellness space.

A responsive e-commerce

website redesign focused on clarity, trust, and confident purchasing in the wellness space.

OVERVIEW

MoonMaid Botanicals is a small herbal wellness brand offering topical creams and natural remedies. This project redesigns the website to streamline the shopping experience across desktop and mobile with a more intentional product layout and checkout flow.

MoonMaid Botanicals is a small herbal wellness brand offering topical creams and natural remedies. This project redesigns the website to streamline the shopping experience across desktop and mobile with a more intentional product layout and checkout flow.

Role: UX / UI Designer

Timeline: 6 Weeks

Tools: Figma, Figjam,
Midjourney

Scope: Responsive e-commerce
website redesign

Scope: Responsive e-commerce website redesign

PROBLEM / GOALS

SITE ADJUSTMENTS

SITE ISSUES

SITE ADJUSTMENTS

The existing site made it difficult to browse products and move toward checkout, especially when comparing options or shopping on mobile.

GOALS

SITE GOALS

GOALS

Simplify product browsing and comparison

Reduce steps between interest and purchase

Keep the experience consistent across screen sizes

KEY DESIGN DECISIONS

01 — Single Primary Action

Each page centers around one clear action to prevent competing CTAs during purchase.

02 — Product First Layout

Price, quantity, and action are presented first, with details following below.

03 — Responsive by System

The same hierarchy is maintained across screen sizes instead of redesigning per device.

04 — Minimal Interaction

Clear layout and content were prioritized over animations or advanced interactions.

KEY DESIGN DECISIONS

01 — Single Primary Action

Each page centers around one clear action to prevent competing CTAs during purchase.

02 — Product First Layout

Price, quantity, and action are presented first, with details following below.

03 — Responsive by System

The same hierarchy is maintained across screen sizes instead of redesigning per device.

04 — Minimal Interaction

Clear layout and content were prioritized over animations or advanced interactions.

FINAL VISUALS

A product-first, responsive e-commerce experience designed to reduce friction, clarify purchase decisions, and scale cleanly across devices.

IMROVED QUIZ FLOW FOR HIGHER CONVERSIONS

This flow shows how users either take a short quiz for guidance or browse directly, then move from product selection through checkout to order confirmation.

OUTCOMES / IMPACT

Improved purchase clarity by prioritizing a single primary action and reducing competing CTAs

Reduced cognitive load through a product-first layout and minimal interaction patterns.

Ensured scalability with a system-driven responsive hierarchy across breakpoints