Center for Functional Fabrics
I developed and launched an accessible interactive map for a Drexel research lab backed by the Pentagon and Department of Defense. The final Sitecore-based site replaced an inaccessible prototype, showcasing advanced e-textile technologies to partners and defense stakeholders.
Project Overview
The Team
Communications Manager, Director of Business Development
My Role
UX Designer, Web Developer
Problem Space
The original interactive map prototype was not accessible to screen readers or keyboard navigation, limiting usability and reach. Built in Figma, it also suffered from performance issues due to disorganized layers and oversized assets. With a small team, tight timeline, and limited budget, I needed to transform the prototype into an accessible, maintainable web experience without sacrificing interactivity or visual quality.
Approach
Rather than rebuild from scratch, I explored ways to preserve the visual storytelling of the original Figma prototype while addressing its performance and accessibility shortcomings. I conducted a prototype audit to pinpoint inefficiencies, then tested performance improvements. I assessed accessibility risks, researched compliant design patterns, and consulted with stakeholders to understand user needs. Through user testing and a risk assessment framework, I identified pain points which informed the final launch.
Solution
I delivered a hybrid experience: a fully accessible, WCAG-compliant website built in Sitecore, plus a link to the original Figma prototype for power users seeking an immersive experience. I translated complex interactions into static, navigable subpages and repurposed video assets to explain equipment and workflows more clearly. Visual continuity was preserved by reusing graphics and color from the prototype.
Outcome
Prototype speed improved by 60% after Figma optimization. The final site provided accessible, engaging access to the Center’s capabilities to a broader audience.
Prototype Analysis
- I started by digging into the original Figma file to understand what was already working and what wasn’t.
- A lot of issues popped up: slow load times, messy file organization, and even typos throughout.
- It was clear that without cleanup, the prototype would not be sustainable for users or the team.
Prototype Optimization
- I pinpointed what was slowing things down! Duplicate hidden layers, oversized media, and scattered assets.
- I introduced clear layer naming conventions, utilizing Sections to organize the file into logical, scannable project areas.
- I built modular Components with clear labels to streamline updates and reduce file clutter, helping the prototype load faster and animations run smoothly.
- I converted assets into Variants and grouped them into interaction states to reduce duplication and ensure smooth animations.
- I flattened complex vectors to reduce file size while keeping the visuals sharp and intact.
- I also swapped out heavy GIFs with optimized, lightweight versions to improve speed without sacrificing quality.
- These improvements led to a 60% increase in prototype speed, allowing smoother stakeholder demos and faster team collaboration.
Inspiration
- Working on ideas for the site, I drew inspiration of interactive maps from institutions like The Metropolitan Museum of Art and the National Gallery of Art.
- These examples helped me see what was possible: creative layouts, thoughtful storytelling, and detailed assets.
- They inspired me to approach this project not just as a fix, but as a chance to build something engaging and memorable.
Technology Exploration
- I explored a few different tools and platforms to figure out what would actually work.
- I considered Infogram as a method to get around the structured CMS, and I even tried building a custom prototype in vanilla JavaScript.
- In the end, I aligned with the team on using Sitecore. It met accessibility needs and fit into their existing CMS ecosystem.
Design Iterations
- Since we already had defined assets and were short on time, I jumped straight into high-fidelity wireframes.
- I tried to keep the colorful, immersive feeling of the prototype while making it usable in a more static format.
- Some features didn’t translate well, like floating buttons, so I worked closely with the Communications Manager to find the right balance between creativity and practicality.
Asset Designs
- I cleaned up and rebuilt vector graphics in Illustrator to sharpen the look and improve performance.
- Wherever I could, I pulled in the brand’s color palette and visual language to keep everything cohesive.
- I paid close attention to materials and textures to make sure the visuals reflected real equipment and processes.
Deployment Process
- Once the design was locked in, I rebuilt the experience directly in Sitecore using their component system.
- I edited and embedded video clips, wrote supporting copy, and created clear subpages to replace complex interactions.
- It wasn’t just about launching pages, I was attempting to translate a creative concept into something accessible and tangible.
User Testing
- The Communications Manager and I ran user tests with both stakeholders and students to understand where people got stuck.
- A few common problems came up: confusing slideshow labels, hard-to-find links, unclear navigation.
- I used a risk assessment matrix to sort out which fixes were most urgent before launch.
Critical Tasks
- I organized a list of the most critical issues that had to be addressed before launch.
- Users were confused by the first slide being “Programming” — we decided to move “Fabrication” forward to better match expectations.
- The Figma prototype link was going unnoticed, so I restyled it with clearer text and positioning.
- After another round of testing, the flow felt more natural and users found key information faster.
Impact
Improving the visibility of the Center's capabilities supported efforts to secure strategic partnerships and grants in advanced materials and defense tech:
- Achieved a 60% increase in prototype performance, enabling smoother demos and faster updates.
- Delivered six WCAG-compliant pages in Sitecore that replaced the inaccessible Figma prototype.
- Enhanced discoverability and navigation through targeted user testing and refinements.
This project taught me how to translate high-concept design into accessible, efficient deliverables, working independently across design and development while adapting quickly to technical and organizational constraints.