Teddy App

​

Overview

​

Teddy is a conceptual e-commerce mobile app designed in Figma that explores how a more emotionally driven and visually immersive shopping experience could improve product discovery on mobile. The project focused on simplifying navigation, reducing friction throughout the browsing journey, and creating a stronger connection between users and products through storytelling-focused design.

 

Rather than approaching e-commerce purely as a transactional experience, Teddy was designed around the idea that shopping on mobile should feel intuitive, curated, and engaging.

​

Problem

​

Many e-commerce experiences prioritize density and conversion at the expense of usability and emotional engagement. Users are often presented with overwhelming product grids, inconsistent navigation patterns, and interfaces optimized more for inventory exposure than discovery.

This creates several issues:

• High cognitive load during browsing

• Difficulty discovering relevant or inspiring products

• Generic shopping experiences that lack personality

• Friction between exploration and purchase intent

On mobile specifically, these problems are amplified by limited screen space and attention constraints.

​

User Goals

​

The experience was designed around several core user needs:

• Quickly browse products without feeling overwhelmed

• Discover items through visual exploration rather than heavy filtering

• Navigate seamlessly between categories, products, and saved items

• Feel confident and engaged throughout the shopping experience

• Complete common ecommerce actions with minimal friction

The goal was to create an interface that balanced efficiency with a more editorial, lifestyle-oriented shopping experience.

​

Constraints

​

This project was intentionally scoped as a UI/UX exploration rather than a production-ready product. Constraints included:

• No engineering or backend implementation

• Limited user testing and validation

• Designing entirely within a mobile-first framework

• Balancing visual richness with usability and accessibility

• Creating scalable patterns without a defined product catalog size

Because the project was exploratory, the focus was placed on system thinking, interaction flow, and interface clarity rather than feature completeness.

​

Strategy & Process

​

The project began with competitive analysis across modern ecommerce platforms to identify common friction points and interaction patterns. From there, the focus shifted toward defining a cleaner and more emotionally engaging browsing experience.

 

Key areas of exploration included:

​

Information Hierarchy: Product information was intentionally simplified to prioritize imagery, pricing clarity, and scanning behaviour. Content density was reduced to create more breathing room and visual rhythm throughout the interface.

​

Mobile-First Navigation: Navigation patterns were designed to minimize friction and support one-handed use. Category structures, product flows, and call-to-action placement were optimized for quick interaction on smaller screens.

 

Visual System: A consistent component and spacing system was developed in Figma to maintain cohesion across screens. The interface emphasized clean typography, strong imagery, and restrained UI elements to keep focus on products.

​

Discovery Experience: Instead of relying heavily on complex filtering systems, the experience explored more curated and visually guided discovery patterns that encourage exploration while maintaining usability.​

​

Outcome

​

Teddy became an exploration in balancing usability, visual storytelling, and mobile ecommerce behavior within a cohesive product experience.

The project strengthened my approach to:

• Mobile-first product thinking

• Designing scalable UI systems in Figma

• Creating clear information hierarchy

• Reducing cognitive load in high-density interfaces

• Building polished end-to-end product flows

 

More broadly, Teddy reflects my interest in designing digital experiences that feel both functional and emotionally engaging—where usability and aesthetics support each other rather than compete.