Abstract
This project was completed as part of my Interactive Design course, where I was tasked with creating a data-driven experience using a minimum of 100 data points. I chose to explore the diverse world of footwear by visualizing the types of shoes people wear on a given day, including data on brand, style, material, color, price, condition, and weather. The outcome was an engaging and interactive 3D web experience designed to help users explore trends and patterns in shoe choices.
The Challenge
Designing an interactive and informative data visualization posed several key challenges:
Collecting and analyzing detailed data from at least 100 individuals within a short timeframe.
Creating a visually compelling and user-friendly experience that communicates insights effectively.
Integrating 3D interaction in a way that feels intuitive and enhances data exploration.
Designing a responsive site that works across multiple platforms, including virtual environments.
My Role
I served as the sole designer, researcher, and developer on the project. My responsibilities included:
Conducting user research and collecting data
Analyzing and organizing data for visualization
Designing UX wireframes and UI elements
Developing a 3D interactive experience using Spline
Testing and refining the design based on user feedback
Timeline
The project spanned 4 weeks, each focused on a specific phase of the design process:
Week 1: Data collection and analysis
Week 2: Wireframing and prototyping
Week 3: 3D design and development
Week 4: Usability testing and iteration
Defining Project Goals
The high-level objectives of the project included:
Data Visualization: Create an immersive and interactive experience to explore shoe-related data.
Trend Analysis: Reveal patterns in footwear choices influenced by style, brand, weather, and other variables.
Usability: Design a platform that is both accessible and easy to navigate, including considerations for VR interaction.
Constraints
Several limitations shaped how I approached the project:
Time Constraints: Gathering 100 complete data entries required quick outreach and streamlined collection methods.
Limited VR Knowledge: Since the project touched on virtual interaction design, I needed to rapidly research and understand best practices in spatial UI.
Technical Complexity: Integrating 3D interactivity added layers of complexity, from navigation design to performance optimization.
Research & Data Collection
I surveyed 100 participants, gathering data on the following variables:
Brand
Style
Material
Color
Price
Condition
Weather on the day of wear
This comprehensive dataset enabled the visualization to surface rich trends, such as seasonal preferences or brand popularity under specific weather conditions.
I also conducted background research on spatial and 3D interaction design to ensure a smooth experience within the chosen platform.
Wireframes and Initial Mockups
Early wireframes were designed to structure the user journey, focusing on:
Clear navigation paths within a 3D space
Layered data presentation to avoid cognitive overload
Responsive layouts that translated from desktop to immersive environments
Build & Design
3D Interactive Design
I used Spline to build a dynamic 3D environment where users could explore the dataset interactively. Users navigate through different "bento box" data zones, each revealing a different aspect of the dataset.
UI Design
Designed and prototyped interface elements in Figma and Adobe XD
Created clean, readable typography and interactive cues for intuitive navigation
Ensured responsive behavior across screen sizes and devices
Data Visualization Features
Interactive hover states provide detailed insights on each data point
Color coding and iconography clarify categories like shoe condition and weather influence
Smooth transitions between sections guide exploration
Usability Testing
To validate the user experience, I conducted usability tests with 5 participants of varying familiarity with data visualizations and 3D tools.
Key Findings
All participants successfully navigated and interacted with the visualization
Some found the 3D controls confusing on first use
Users requested richer detail when hovering over data points
Improvements Made
Simplified navigation and added an onboarding tutorial for first-time users
Enhanced hover interactions to include more descriptive data labels
Streamlined the UI to improve responsiveness and loading performance
High-Fidelity Design
The final high-fidelity prototype offered an immersive yet simple way to explore a complex dataset. Users could intuitively explore shoe preferences influenced by style, price, and environmental factors—all in an engaging spatial interface.
Closing Thoughts
This project was a deep dive into interactive data visualization and spatial UI design. It pushed me to learn new tools, balance aesthetics with usability, and build a project that turns raw data into a compelling user experience.
The combination of user feedback, iterative design, and emerging technology made this an exciting and educational challenge.
What I Learned
Detail-Oriented Research: Quality visualizations begin with intentional, structured data collection.
User Testing is Crucial: Iterative feedback helped me refine confusing elements and uncover new opportunities for improvement.
3D Environments Have Power: Spatial design can elevate engagement when used with clear purpose and intuitive interaction patterns.