https://github.com/jillmpla/slideware
Prototype for Haunted Couture, a Halloween-themed fashion e-commerce app designed as a slideware prototype. Includes report and prototype file documenting concept, storyboarding, prototyping, and user testing.
https://github.com/jillmpla/slideware
case-study ecommerce prototyping rapid-prototyping rapid-ux slideware ux-design ux-experience
Last synced: 2 months ago
JSON representation
Prototype for Haunted Couture, a Halloween-themed fashion e-commerce app designed as a slideware prototype. Includes report and prototype file documenting concept, storyboarding, prototyping, and user testing.
- Host: GitHub
- URL: https://github.com/jillmpla/slideware
- Owner: jillmpla
- License: mit
- Created: 2024-10-20T02:04:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-31T06:44:44.000Z (5 months ago)
- Last Synced: 2025-10-20T06:35:49.115Z (4 months ago)
- Topics: case-study, ecommerce, prototyping, rapid-prototyping, rapid-ux, slideware, ux-design, ux-experience
- Homepage:
- Size: 19.8 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎃 Haunted Couture - Slideware Prototype
This repository contains the **Haunted Couture** prototype, built as a **slideware prototype** for rapid UX exploration. The application imagines a Halloween-themed online fashion platform where users can upload their photos, virtually try on outfits, shop for themed clothing, and share creations on social media.
> 📌 This project was approached as a full UX case study, from concept and storyboarding to slideware prototyping, user testing, and iteration.
---
## 📝 What is Slideware in UI/UX?
In the context of UI/UX and **rapid prototyping**, *slideware* refers to prototypes created using presentation tools, such as PowerPoint, Google Slides, etc.
- **Purpose:** Quickly simulate screens, flows, and interactions without development overhead.
- **Speed:** Faster than high-fidelity prototyping tools; ideal for early testing and feedback.
- **Use Cases:** Storyboarding flows, demonstrating navigation, mimicking interaction patterns, and presenting usability scenarios.
Slideware prototypes help UX designers validate concepts early in the process, saving time and resources before committing to high-fidelity design or engineering.
---
## 📖 Case Study Overview
**Inspiration & Problem Space:**
Seasonal and themed shopping experiences (like Halloween fashion) often lack interactivity. Shoppers can’t easily visualize outfits, test combinations, or share their creativity.
**Goal:**
Design a platform that makes Halloween shopping engaging and interactive through photo uploads, virtual try-ons, AI-assisted styling, and social media sharing.
**Solution:**
We prototyped **Haunted Couture**, a Halloween-inspired online fashion experience, using slideware. The prototype demonstrates core features such as uploading personal photos, searching for items, trying on outfits virtually, and sharing styled looks with friends.
---
## 🎯 Key Tasks Prototyped
1. **Submit Pictures**
- Upload an image from a device or take a photo with a webcam
- Manage photos in a gallery with navigation via a slider
2. **Search for Fashion Items**
- Keyword-based search (such as "witch")
- Add themed items to a basket by size and type
3. **Virtual Fitting Room**
- Apply basket items onto a user's uploaded photo
- Toggle clothing on/off and save outfits with custom names
4. **Sharing & Social Media Integration**
- Share styled outfits with preview options
- Enable star ratings and/or comments
- Generate sharable links with buttons for Email, Twitter (X), Instagram, and Meta
---
## 🧩 Design Elements & Patterns
- **Interactive Components:** sliders, checkboxes, radio buttons, modals, text inputs, action buttons
- **Patterns Used:**
- Visual framework for consistent navigation
- Module tabs and navigation bars
- Progressive disclosure in sharing flows
- Cards and collections for displaying items and outfits
- Modal panels for confirmations and previews
---
## 👥 User Testing & Findings
We conducted usability studies with multiple participants. Key observations included:
- **Navigation Issues:** Users sometimes overlooked clickable elements like "My Basket" or misunderstood drag-and-drop areas.
- **Feedback & Confirmation:** Participants wanted more status updates, such as confirmation modals when uploading images or adding items.
- **Terminology & Labels:** Button text (like "Share Outfit") occasionally caused confusion; clearer labels improved task success.
- **Accessibility & Inclusivity:** Feedback suggested naming outfits for easier recognition and using toggles familiar to mobile UI conventions.
**Lessons Learned:**
- Never assume affordances are obvious; clarity matters.
- Redundant navigation (icon + button) improves usability.
- Inclusive design (labels, naming, accessibility) makes prototypes more realistic.
---
## 📊 Fidelity & Inspirations
- **Information Design:** Medium fidelity (consistent layout and navigation, but limited scope)
- **Interaction Design:** High fidelity (click-through flows, multiple task paths, functional interactivity)
- **Visual Branding:** High fidelity (distinct Halloween theme, cohesive palette, styled components)
- **Editorial Content:** High fidelity (realistic descriptions and outfit examples)
**Inspirations:** Google Shopping, H&M, and other online retail sites with filters, basket interactions, and social integrations.
---
## 📂 Repository Contents
- **slideware_prototype_report.pdf** - Full case study report with task descriptions, wireframes, design patterns, user study notes, and reflections
- **slideware_prototype.pdf** - Interactive slideware prototype file
---
> 📌 This project demonstrates how **slideware prototyping** can rapidly bring ideas to life, validate flows through user testing, and inform future high-fidelity designs.