I led research and UX/UI explorations for The Footwear Collective, a non-profit dedicated to zero waste in the footwear industry. Following their brand guidelines, we expanded their online presence to launch their roadmap and current milestones. As well as crafting a case study video that captures their palpable passion and innovation to present at a major circularity conference for important exposure and funding.
Dec 2024 – May 2025
Figma, Miro, Adobe CC
C.J. Yeh Creative Director
Christie Shin Design Director
Kimiko Stuhr Designer
Natalie Leriche Motion Designer
Hedy Deng Developer
David Mendez Developer
Jorge Mendez Developer
View live site
Overview
Challenge
Faced with multi-layered and non-linear information that the client wants to convert into a visual roadmap. This resource is meant to be a living document, so it will be regularly updated. A traditional “poster visual” that TFC originally suggested is not optimal for this type of data.
Solution
An interactive website effectively lends itself to be updated at anytime, and for data to be condensed and organized into structures, or hidden from view until the users needs it. Although, circularity is not one easy path, but we can make the action plans easily digestible
Design Challenges
Non-Sequential Nature
The TFC roadmap is non-sequential, comprising a collection of actions and projects that can be pursued in parallel or independently.
Multi-Layered Structure
The roadmap is multi-layered. Actions are organized into seven pathways, with each action tagged with priority rankings: Now, Next, Future. Some actions may include "projects identified" and/or "projects in progress," while many others are empty at this time. Furthermore, a project can be assigned to many actions. This asymmetrical distribution of information presents a challenge for simple chart-based visualizations.
Dynamic & Evolving Content
The TFC roadmap is a living document, and its content is constantly evolving. We believe one of the goals of this roadmap should be to encourage member participation in its development.
Design Process
Data Analyzation & Visualization
I spearheaded research with data collection and analyzation. Breaking down comprehensive information into easily identifiable categories and organized groups. I familiarized my team with definitions and concepts, and condensed vast data into essential key ideas.
Data Analyzation & Visualization
I spearheaded research with data collection and analyzation. Breaking down comprehensive information into easily identifiable categories and organized groups. I familiarized my team with definitions and concepts, and condensed vast data into essential key ideas.
Diagram Sketches
Brainstormed interactive visuals for easy comprehension, preserving the multi-layered information of their Pathways Tool (roadmap).
Design Iterations
Explored multiple design directions with the Design Director, providing the client with three distinct options to choose from, that reflect and expand on TFC’s brand guidelines.
Design Solution
Translating Static Information into Digital Interactions
An interactive web-based document highlighting TFC's vision and approach, and inspiring participation in this collaborative effort.
Adapted for the Smallest Screen
To optimize the user experience for all users across different mobile devices, we design for the smallest supported screen.
