swatchbook

remix

Platforms

Vision Pro | iPad | iPhone

Project Overview

Never Stop Creating

In 2023-2024 I worked hands-on and oversaw the design team for the creation of the “remix” app launched by swatchbook for VisionPro, iPad and iPhone in partnership with The Shoe Surgeon. Our team’s vision was to bring quality 3D product design to the palm of anyone’s hand – an app that gives professional results but easy enough for everyone to use. Everyone is a designer, now everyone has the right tool - an immersive application for applying materials to footwear, apparel and other products. We were featured prominently in Apple’s apps we love, hot this week and create on an infinite canvas list in the VisionPro AppStore 2024. We were one of the few apps available on day one of VisionPro's launch.

The App offers a free version with monthly drops of new products & materials, and a subscription-based access to premium content. The products and digital materials are of high technical and artistic quality powered by swatchbook’s real world suppliers.

Execution

Among the challenges faced;

  • How do we best display complex content to the average user?
  • How do we break down the process?
  • How do we make swapping materials/parts intuitive enough that it doesn’t cause cognitive fatigue?
  • After we won the user over how do we then retain them?

All these questions cannot overshadow the most obvious one, one that is relatively new with the launch of VisionPro:

  • How does UX stay consistent across spatial & non spatial devices without missing out on the device’s potential?

UX in the era of spatial computing adds a potential increase of sensual engagement, a tactile feel for the digital experience, a larger canvas and an immersive aspect. Things that were not as tangible before for digital design with tablet and mobile.

The answer was simple, UX core can and should stay consistent but we harness each device's superpower in its context. Features are scaled to the device's affordance. Same principal as any other responsive design, shouldn't be any different with VisionPro added to the list.

We can leverage the sensual engagement & immersive aspect for Vision Pro by providing great quality assets and a hands on design experience, expanded (exploded view) was a must but more on that later. Fast iteration and great quality AR were leveraged for the iPhone experience, most people have their phones on them ready for when creativity or boredom strikes. iPad would be our “intentional design session” device, you’re here because you want a slightly bigger canvas, matching AR experience but don’t necessarily own or want the VisionPro.

The flow was broken down into a stepped wizard initially, through the main window you select from the featured assets, you select the material collection and then you're presented with the editor.

For VisionPro, it would have been disappointing to design a traditional iPad UI floating in your living room like most did. Within our app premise we had the potential to dive deeper into spatial UX. On the other hand, in their Human Interface Guidelines, Apple encourages familiar UI-paradigms like windows, prioritizing comfort and familiarity, and sparingly sprinkling immersive experiences on top for special moments. To strike a balance we kept the main navigation within the familiar window but broke the 3D asset out of the UI and placed it within the user's reach. The user can grab it, bring it closer they can even touch it to select a part. This immediately brings up the requirement for initial placement calculations; a full sized model of a snowboarding man should not be placed as close to you as a keychain would.

The flow continues by allowing the user to select the part they want to assign a material to with either looking at it ( Exclusive to VisionPro), tapping it or selecting it from a list. Lists are especially important for complex models and smaller parts like stitching. Once a part is selected the user uses the same gestures to select a material roll. Element selection states were incredibly important especially in VisionPro where you're navigating with your eyes.

No alt text provided for this image

A/B testing (across 3 devices) for material and part selection revealed that the exposure of main workflow functions (Proposal 3 – Function exposure) can decrease time on task significantly (-16%) which contributes to healthy KPIs but it was observed that this significant decrease is limited to lower complexity models. For complex models (Proposal 2 – Icon exposure) seem to hit the sweet spot. Try the prototype Floating toolbar.

Case studies, usability tests and market research have shown that leveraging the correct InApp vs Push notification ratio, and proper gamification can increase the app’s stickiness especially on the iPhone. That would mean strategic new content drop planning, adding currency with timed UI exposure of announcements, banners & prepared remixes, challenges/events, theme colors..etc

Gamification Research
Gamification Research
User Retention UX - Event Timeline

Leveraging Notifications for Gamification and Onboarding

Results

The app removes the stigma of 3d navigation, 3d design and realistic 3d rendering by offering;

  • A seamless intuitive workflow; simple gestures for asset selection, material swapping and 3d navigation
  • Quality assets & digital real-world materials;  built by professionals these assets are processed and showcased in a user friendly setting (familiar fabric rolls, thumbnails and perspective shots).
  •  Built in professional lighting;  a versatile lighting scene built by our 3D artists insures quality renders. The settings have been fine tuned to insure a seamless and effortless user experience.
  • FoV (field of view effects); Tap and hold where you want the lens to focus, just like a camera it is that easy!
  •  Partlists and enhanced part navigation for increased efficiency.
  • All this editing power is available in your own space whether with VisionPro or AR. This enables the designer to better visualize their design in real life.

This yields into professional looking results at a fraction of the time and cost without any prior knowledge of 3D design.

Plans are underway to design a matching onboarding experience

Visit website

Download app

Projects UI - iPad
Collection preview and material assignment - iPad
Main remixing UI Realtime rendering & Dynamic FoV
AR - Dynamic field of view