HELLO, I’M A PRODUCT DESIGNER / NO-CODE DEVELOPER

Designer’s eye.
Builder’s mindset.

Turning complex problems into intuitive digital experiences. Blending product design, AI, no-code and development to bring ideas to life.

E-commerce & Web Experiences
03 / SHOPIFY · WEBFLOW · WEB DESIGN

Make shopping feel effortless.

A collection of business websites and e-commerce experiences designed and built for real-world use.

Diagrams are illustrative. Client details are kept private.
A miniature shopping cart holding a gift box in front of a laptop, with a paper shopping bag beside it
Photo: Pexels
INDUSTRY
E-commerce · Business websites
CONTEXT
Faydn Digital and freelance
MY ROLE
Website design · E-commerce design · No-code development
SCOPE
Responsive sites and stores, from layout to launch
THE CHALLENGE

Shoppers leave when products are hard to find, information is thin, or checkout asks for too much.

WHAT I DESIGNED

Responsive storefronts and business websites, designed and built in Shopify and Webflow.

KEY SOLUTIONS
  • Filters and navigation that make products easy to find
  • Product pages with what a purchase decision needs
  • A short, honest checkout with the total visible
01 / OVERVIEW

E-commerce & Web Experiences

This is a collection of business websites and e-commerce stores I designed and built for real-world use, from layout to launch.

I covered structure, responsive UI and implementation, so what I designed is what shipped. Client details are private, so this case focuses on the approach and the patterns I rely on.

What I executed

  • Site and storefront structure
  • Responsive layouts
  • Product list and product page UX
  • Cart and checkout flow
  • Reusable section library
  • Build in Shopify and Webflow
  • Launch support
02 / CHALLENGES

What needed to change

Shopper challenges

  1. I can’t quickly find the right product
  2. Product pages don’t answer my questions
  3. Checkout asks for too much, too early
  4. The site feels hard to use, or to trust, on my phone

Business challenges

  1. Visitors leaving before checkout
  2. Low confidence in an unfamiliar brand
  3. Costly updates after launch
  4. Inconsistent pages across the site
03 / RESEARCH

What I discovered

Most store problems are well documented. I used published e-commerce usability research to decide where to spend effort, then applied it to each store’s own products and audience.

Research methods

  • Review of Baymard checkout and mobile commerce research
  • Journey mapping from landing to order confirmation
  • Heuristic review of product list, product page and checkout
  • Mobile-first layout exploration
Key findingWhat it meant for the design

Unexpected costs, forced account creation and long checkouts are among the main reasons shoppers abandon carts.Baymard Institute (opens in a new tab)

The total is shown early, guest checkout is offered, and every field that is not needed is removed.

On mobile, filters and extra product content are often hidden in separate interfaces or subpages, and get overlooked.Baymard Institute (opens in a new tab)

Applied filters stay visible, and key product information lives on the main page, not behind tabs.

Shoppers need to trust a retailer before they will hand over card details.Baymard report via Amazon Pay (opens in a new tab)

Delivery, returns and secure-payment cues appear at the moment of decision, not only in the footer.

04 / PROCESS

From insight to interface

I design mobile first, then scale up. Each project moves from the shopper’s journey to structure, UI and a build that matches the design.

  1. 01Research
  2. 02Define
  3. 03Ideate
  4. 04User flow
  5. 05Wireframes
  6. 06UI design
  7. 07Build
  8. 08Launch

  • Mobile first

    The phone layout is the design, and larger screens add to it.

  • Answer the question before it is asked

    Price, availability, delivery and returns are visible without hunting.

  • Remove steps, then remove fields

    Every extra step or input has to earn its place in the checkout.

  • Build with reusable sections

    A consistent section library keeps pages coherent and easy to update.

05 / HOW I SOLVED IT

Decisions, and what they cost

Every strong decision gives something up. These are the calls that shaped the experience, and the trade-offs I accepted.

01

Make products easy to find

Solves: Shoppers unable to locate the right product

Clear navigation, visible applied filters and a scannable product grid let shoppers narrow down quickly, and see what they have already chosen.

Trade-offFewer decorative layouts, in exchange for faster scanning on small screens.

Illustrative wireframe: collection page
02

Give the product page what a decision needs

Solves: Thin product pages that leave questions unanswered

Image thumbnails, price, variants, availability, delivery and returns sit together, with the add-to-cart action always in reach.

Trade-offA denser page, managed with clear hierarchy rather than hiding content in tabs.

Illustrative wireframe: product page
03

Keep checkout short and honest

Solves: Abandonment from surprise costs, forced accounts and long forms

A few clear steps, guest checkout and a running total. Fields are cut to what is necessary and errors are explained in plain language.

Trade-offLess data collected up front, so marketing capture is moved to after the order is placed.

Illustrative wireframe: checkout
06 / READY FOR DEVELOPMENT

Built to stay consistent

Each store is built from a reusable set of sections, so pages stay consistent and are quick to extend.

  1. FoundationsColour, type scale, spacing and button styles
  2. ComponentsProduct card, price, badge, filter, quantity, cart item
  3. SectionsHero, collection, feature, testimonial, FAQ, footer
  4. TemplatesHome, collection, product, cart and checkout, content pages

Developer handoff

  • Responsive layouts for mobile, tablet and desktop
  • A section and component library built in Shopify and Webflow
  • Content structure the owner can update without a developer

Responsive across devices

Designed mobile first: tap-friendly controls, a sticky add-to-cart and layouts that scale up cleanly to desktop.

States designed, not assumed

  • Out of stock
  • No results
  • Sale price
  • Loading
  • Empty cart
  • Form error
  • Order confirmed
07 / IMPACT

How success is measured

I have not published outcome numbers here. These are the measures the design was built to move, and the ones I would track.

  • Add-to-cart rate

    Shows whether product pages are giving shoppers what they need.

  • Checkout completion rate

    The clearest signal of whether the checkout removes friction.

  • Filter and search use vs. exits

    Tells me whether people can find products or give up.

  • Mobile vs. desktop conversion gap

    A check that the mobile-first approach is paying off.

08 / REFLECTION

What did I learn?

  • Most conversion work is removal

    The biggest improvements came from taking away steps, fields and distractions, not adding features.

  • Mobile is the design, not the adaptation

    Starting small forced clearer priorities, and the desktop layouts got better for it.

  • Trust is built in small details

    Delivery, returns and payment cues matter most at the moment someone is deciding.

What nextNext I would set analytics baselines at launch and test checkout with real shoppers, so each change can be judged on evidence.

MORE PROJECTS

Continue exploring.