Spin App Features
ROLE
UX Motion designer
YEAR
2021
CONTRIBUTION
Interaction design, Prototyping, Animation, Design Handoff
Spin design team / Toptal
DESCRIPTION
Spin is an electric bicycle and scooter-sharing platform designed to address typically the last-mile challenge in daily commuting. I was approached by their design team to enhance the user experience for features like onboarding, map navigation, and the drunk test by developing consistent interaction patterns and engaging animated graphics. This collaboration transformed the app from a static, click-through interface into a smooth, responsive user experience.
Map Interaction
The previous map interaction allowed users to locate scooters but struggled to clearly display the geographical relationship between users and the scooters. This often led to users having to manually navigate the map, especially when switching between scooter options. During research, it was found that some users didn’t realize they had changed their selection due to insufficient visual feedback (in both map view and modals). To address this, I developed specific navigation guidelines for the map view and designed a series of UI transitions to improve interaction feedback and ensure smoother user navigation.
Animated Graphics
Spin’s brand embodies a simple, fun, and energetic vibe. However, the user experience included lengthy guidelines, agreements, and educational content that felt out of sync with this image. The design team developed a series of graphic libraries to bridge this gap and delight the user journeys. My role was to build the storytelling into stylized animations and ensure they were delivered in a development-friendly format (Lottie).
Drunk Detection
Riding a scooter while drunk is the worst, right? However there is a nicer way to address it. I collaborated with the team to create a “drunk test” game that assesses users’ reaction times. In the game, users must tap on a graphic as soon as it lights up, within a specific time limit, ensuring a fun yet effective way to measure their readiness to ride safely.
