Proddfolio Projects

ShopZen

Shopzen - A Clean, Fast Mobile E-commerce Experience

A streamlined mobile shopping app designed to reduce friction, improve clarity, and create a smooth journey from browsing to checkout.

Role

UX/UI Designer

Duration

12 weeks

Platform

iOS & Android

Project Overview

The Challenge

Modern shoppers expect mobile experiences that are fast, intuitive, and reliable. The goal of Shopzen was to explore how a mobile-first e-commerce platform could reduce friction, build trust, and turn casual browsing into confident purchasing.

The Challenge

Users frequently abandoned carts due to complex checkout flows and difficulty finding relevant products.

Target Users

Tech-savvy shoppers aged 22–35 who value convenience, clarity, and speed.

Goals

Reduce checkout friction, improve engagement, and create a more intuitive shopping experience.

User Research

Understanding Our Users

Before designing anything, I spoke with frequent mobile shoppers to understand their habits, frustrations, and motivations.

Pain Points

What We Discovered

😤

Checkout Exhaustion

Users felt mentally drained by long, repetitive checkout forms, often abandoning purchases before completion.

🔍

Search Anxiety

Users felt overwhelmed when browsing large, unstructured product lists, often struggling to make confident decisions.

🤔

Trust Issues

Users wanted personalization but were skeptical about privacy. They needed to feel in control of their data.

What They Really Wanted

✨

Delightful Simplicity

I want it to feel effortless, not like work” was a common sentiment. Users wanted shopping to feel simple and enjoyable.

🎨

Visual Inspiration

Users don’t just shop - they browse for ideas, mood, and style. They wanted an experience that felt visually inspiring, not transactional.

⚡

Speed & Respect

"Respect my time" was a common refrain. They wanted to buy something in under a minute if they chose to.

User Personas

Personas were selected by conducting user research and identifying common pain points, that frustrate and block the user from getting what they need from a product.

Sarah

The Conscious Shopper

28 • Marketing Manager • SF

"I care about sustainability and want to support ethical brands, but most apps make it impossible to filter by my values."

Pain Points

• Too many irrelevant product suggestions

• Can't find eco-friendly options easily

• Checkout takes forever

Goals

Quick, values-aligned shopping that doesn't feel overwhelming

Marcus

The Impulse Browser

24 • Designer • Brooklyn

"I don't always know what I want. I just like to browse and get inspired. But most apps are built for people who know exactly what they're searching for."

Pain Points

• Search is too rigid and text-heavy

• Wants visual inspiration, not lists

• Gets lost in endless scrolling

Goals

Discover cool products through beautiful, curated visual feeds

The numbers told a story

73%

Abandoned carts because the process felt too complicated

8 min

Average time to complete a purchase (they wanted under 1 minute)

82%

Preferred visual browsing over searching by keywords

User Journey Map

We translated research insights into low-fidelity wireframes, focusing on information architecture and core user flows.

Mapping the emotional journey

One tap. That's it. Payment saved, address remembered

Discovery

Opens app, instantly sees beautiful products that match their style

😍

Excited & Inspired

Exploration

Swipes through curated collections, saves favorites with one tap

🤔

Engaged & Curious

Decision

Reviews smart recommendations, sees transparent pricing

😌

Confident & Calm

Checkout

One tap. That's it. Payment saved, address remembered

⚡

Relieved & Quick

✓

Delight

Playful confirmation animation, easy tracking, can't wait to come back

🎉

Happy & Satisfied

Starting the Design

From Concept to Wireframes

We began with rapid sketching and low-fidelity wireframes to explore navigation flows and content structure before committing to visual design.

📱

Mobile-First Thinking

Every interaction designed for thumbs, not cursors

✂️

Ruthless Simplification

We removed unnecessary screens and reduced complexity in the first draft.

🧪

Test Everything

Shared sketches with users weekly and discarded ideas that didn’t perform.

Final Designs

The Shopzen Experience

A cohesive mobile shopping experience that balances visual clarity with functional efficiency across every touchpoint.

Mockups

These are high-fidelity designs representing the final product experience.

I designed all key app screens using the finalized typography, color system, and iconography, and built a complete component library for production. The goal was to present the Shopzen experience in a clear, polished, and implementation-ready format.

Making It Beautiful

Where function meets delight

This is where intent met execution. Every pixel, interaction, and color choice was designed to feel thoughtful and human.

Design principles

Delightfully Simple

If it takes more than two taps, we redesign it

Lightning Fast

Speed isn’t a feature - it’s respect for people’s time.

Emotionally Connected

Every interaction should feel human, never robotic

Visually Stunning

Beauty isn’t superficial, it builds trust and emotional confidence.

Building a visual language

We created a design system that felt warm and approachable rather than corporate or cold. Every color, radius, and shadow was intentional.

Colors that speak

#4027ff

#0dac57

#f6bc2f

#323135

#FBFBFC

We chose colors to add depth and warmth - making the app feel alive, not static.

Typography with personality

Satoshi Bold

Friendly yet confident for headings

Satoshi Medium

Clear labels that guide

Satoshi Regular

Highly readable for body text

Generous line heights and letter spacing improve readability and prevent dense, overwhelming blocks of text.

Reflections

What this journey taught me

💎

Simplicity is the hardest work

We deleted more features than we shipped. Every “simple” interaction was the result of dozens of iterations. Complexity is easy - elegant simplicity takes real craft.

❤️

Emotion drives behavior

People don’t remember features; they remember how an experience made them feel. Micro-interactions, subtle animations, and personality in every detail mattered most.

👂

Listen, really listen

The breakthrough insights didn’t come from data alone - they came from sitting with users, hearing frustration in their voices, and seeing the moment something finally clicked.

🚀

Ship fast, learn faster

We tested wireframes weekly, gathered feedback early, failed fast, and weren’t precious about our ideas. The best design happened through conversations with real people.

Want to see the full journey in Figma?

View the full design process in Figma