“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

---

QUESTION 
What does it mean to express an ever changing collection across an interactive experience? 

OBJECTIVES

• Develop a cohesive e-commerce experience grounded in user research
  

• Create wireframes, UI design assets, and interactive prototypes for core shop flows (e.g., browsing, product selection, checkout, account creation)

• Integrate principles of accessibility, usability, and visual hierarchy

• Consider branding, storytelling, and content strategy in the user experience
  

INTRODUCTION
In this assignment, student groups will conceptualize, design, and prototype a unique e-commerce shop focused on a specific niche or underserved community.

The project emphasizes designing across platforms (desktop and mobile), prioritizing accessibility, brand voice, and compelling user flows.

DELIVERABLES

• 1–2 page project brief defining the shop’s concept, audience, and unique value proposition

• Persona(s) representing target users

• User journey map(s) highlighting pain points, goals, and opportunities

• Wireframes for all major flows (desktop & mobile): homepage, product grid, product detail, cart/checkout

• 1-4 Page Designs: Homepage, Product Grid, Product Detail, Cart/Checkout

• Interactive prototype (using Figma/v0/Lovable/Figma Make)
  

• Presentation deck summarizing research, process, design rationale, and how decisions support user needs and shop goals

• Accessibility checklist demonstrating how the site meets WCAG 2.1 AA guidelines
  

GUIDELINES

Scope:
The shop should sell a minimum of five SKUs and support core flows from discovery to order confirmation.

Focus Areas:

• Navigation simplicity and clarity

• Inclusive, responsive design

• Distinct brand voice and storytelling

• Accessible forms and controls

Tools:
Figma, v0, Lovable, Figma Make, Flora, Chat GPT, Black Forest Lab, Midjourney, Ideogram

SHOP TYPES

• Sustainable/Eco-Friendly Products: Online stores offering zero-waste household items, biodegradable goods, or upcycled fashion serve environmentally conscious consumers. This is a fast-growing and socially impactful segment.

• Health and Wellness: Sell products like yoga gear, meditation aids, organic supplements, or fitness equipment, appealing to the self-care and lifestyle market.

• Pet Supplies: A specialty shop for pet food, eco-friendly toys, personalized collars, or pet tech gadgets. The pet sector continues to grow and allows room for creative branding.

• Jewelry: E-commerce shops focused on made-to-order or customizable accessories are popular for their uniqueness and cater well to gift buyers or those seeking self-expression.

• Niche Clothing Boutique: Options include size-inclusive, adaptive, or sustainable fashion, or apparel with a distinct design theme (e.g., streetwear, vintage, or handmade designers).

• Workspace Goods: As remote work persists, curated shops for ergonomic furniture, organization tools, or productivity gadgets appeal to a broad professional audience.

• Interactive Digital Goods: Sell downloadable products like fonts, templates, illustrations, or online courses, with the e-commerce shop serving as both a storefront and an interactive experience for digital creatives.

SCHEDULE

Phase 1: Research & Discovery (Week 1)
In Week 1, your team will lay the foundation for your e-commerce shop by conducting research and defining the project direction.

This phase focuses on understanding your users, market, and niche before any design work begins.

Goals for the week:

• Identify your target audience and the specific niche or community your shop will serve.
  
• Conduct competitive analysis of similar or adjacent e-commerce sites to find opportunities for differentiation.
  
• Develop user personas that capture your primary customers’ needs, motivations, and pain points.
• Map out the user journey from discovery to purchase, noting where users may face challenges or find delight.
  
• Draft a 1–2 page project brief that defines your concept, audience, and unique value proposition.
  

Deliverables by end of Week 1:

• Project brief
  
• User persona(s)
  
• User journey map(s)
  

What this phase sets up:
Your research will guide every design decision that follows — from visual style and navigation to accessibility and brand storytelling.

By the end of Week 1, your team should have a clear, evidence-based concept ready to move into wireframing and ideation in Week 2.

Templates: Project Brief Outline 

Focus:
Turn your research insights into tangible design directions. This week is about exploration, structure, and storytelling — developing the information architecture, user flows, and initial low-fidelity wireframes for your e-commerce experience.

Goals for the Week:

• Translate your research findings into design principles that align with your target audience’s needs.
  
  
• Define the site architecture (pages, hierarchy, and navigation flow).
  
  
• Sketch and iterate on low-fidelity wireframes for key pages (e.g., homepage, product listing, product detail, checkout).
  
  
• Establish a clear user flow from entry point to purchase.
  
  
• Begin exploring content strategy and tone of voice that reflect your shop’s brand and value proposition.
  
  
• Conduct quick peer or user feedback sessions to validate your early concepts.

Deliverables by End of Week 2: 

• Information architecture / sitemap
• 3 Identity Direction (Type, Color, Etc.) 
• User flow diagram
  
• Low-fidelity wireframes for core pages
  
• Early content and tone exploration (optional copy snippets or brand statements)
  
• Feedback notes or test results summary

What This Phase Sets Up:
By the end of Week 2, your team should have a validated structural foundation for your e-commerce site — ready to evolve into high-fidelity design and brand expression in Week 3.

Focus:
Bring your concept to life visually. You’ll develop a cohesive design system, create high-fidelity mockups, and begin prototyping interactive flows.

Goals for the Week:

• Define your visual direction across 3 different visual approaches: including color palette, typography, imagery, and overall style. 
• Build a mini design system or style guide (buttons, forms, cards, product components, etc.).
  
• Apply the visual system to your key wireframes to create high-fidelity mockups. This should include all of your pages.  
• Prototype interactive user journeys (at least one (ie. browsing to checkout).
  
• Conduct usability testing or gather structured feedback on your prototype. 
• Iterate based on feedback and prepare your designs for presentation.
  

Deliverables by End of Week 3:

• Visual design system ​(color, type, UI components)
  
• High-fidelity mockups of key screens
• Clickable prototype
  
• Usability testing summary or feedback notes
  

What This Phase Sets Up:
By the end of Week 3, your e-commerce experience should feel cohesive, branded, and functional.

This will lead naturally into Phase 4: Refinement & Presentation (Week 4) where you’ll refine, test, and finalize your design for presentation.

TEAMS

• Group 1: Grace Ahn + Soyeon Kang
• Group 2: Trinity P. De Leon + Minkyu Kim 
• Group 3: Ziru Lin + Shunqi Luo
• Group 4: Andy Lu + Fnu Mahira + Hye Rin Park
• Group 5: Anirudh Menon + Ziyi Wang
• Group 6: Eden Kyongbin Yoo + Darcy Sun

SUGGESTED READINGS

• E-Commerce Accessibility, Baymard Institute

• Mobile E-Commerce UX, Baymard Institute

• 10 Web Design Best Practices For eCommerce

• Rob Giampietro, Unbuilding, 2012.

• Nika Fischer, A Pioneer of Digital Design Looks Back on a Defining Era, 2021.

• Michael Rock, WYSIWYG, 2014.

• Amber Bravo, Tooling Up, 2016.

• Jill Lepore, The Cobweb, 2015.  

ADDITIONAL LINKS AND RESOURCES

• https://seed.com/

• https://pleaselook.org/

• https://www.usalproject.com/

• https://www.symbolaudio.com/shop/usm-x-symbol

• https://www.smalls.com/

• https://loveinjection.nyc/

• https://trippin.world/

• https://alright.studio/

• https://literarysport.com/

• https://wakawaka.world/