These are some highlights of my motion and interaction work captured in video. These videos are best viewed full-screen
This video highlights how my prototyping skills, specifically around mobile web touch interactions and motion design, aided in UX Lab tests, design iterations, and ultimately the final production build. These demos can be located below.
This video shows the Homeaway Northstar experience, including Immersive Search, Search Results, Property Details, and Scratchpad (to become Trip Boards). This demo can be located below.
This video shows the desktop and mobile Trip Boards experience evergreen prototype, where I can collaborate with design as we ideate on new features or improvements. This demo can be located below.
Lab Prototypes, Production Prototypes, and Demos
My initial focus at Vrbo was building high-fidelity prototypes for user labs. I quickly realized that there were other prototyping worksflows that would have high impact. Production prototypes and demos serve to work as parallel experiences to the production app where I can collaborate with other designers and build upcoming interaction or motion rich features that then serve as blueprints and usable UI code for the production engineering implementation. This helps us achieve a highly crafted experience in our final product.
This is a responsive desktop and mobile web production prototype for the Vrbo Tripboards app, where users can create curated collections of properties and invite collaborators to comment and vote. Click on the user in top left for settings to add or remove people, change who you are, and change the owner of the board. Click the invite link to invite others to the board (emails in the settings control). Click on the 'Learn more' link to see a localizable css driven animation promoting the chat feature.
TB Polling - UX Labmobile/desktop
The first polling prototype, this is a mobile viewport sized study (on desktop and mobile) used to gain insight around our evolving group polling feature for Trip Boards. This study contained a combination of invision prototypes as well as the high-fidelity prototype (featured here) which focuses on the nuances of the drag-and-drop interactions for ranking your top properties.
TB Polling - Explorationsmobile/desktop
This prototype if a continuation of the Trip Boards polling work. With learnings for the UX study, the design team moved ahead and I iterated on the multiple different modes in which we could present this polling experience.
TB Polling - Production Prototypemobile/desktop
After deciding upon the best user flow from our polling explorations, I built a production demo prototyoe that covered both the poll creation and poll taking experiences. For this work, I adopted a modified drag and drop experience to better match our native experiences, which were concurrently being developed.
Hcom Property Detailsdesktop
This is a UX Lab demo done for Hotels.com to explore user sentiment as they work to add vacation rental inventory to their site. After Figma was unable to provide the intended sticky behavior, I created this prototype, that is a combination of live production data that power the images and availability calendar as well as static images for section that do not require user interaction.
This served as a UX Lab and production demo for an initiative to re-imagine what a personalized landing experience could be like. I built numerous configurable modules used to compose mobile, tablet, and desktop experiences.
Though technically never used for production, I spent my first year at Vrbo building this prototype of the entire Traveler experience. This prototype did consume our production APIs, but for the sake of stability, it now just uses a scraped, static version of this data. It is a responsive experience that works for both desktop and mobile web. Try it out for a trip to "Chamonix".
Partner Photo Manager Studymobile
A mobile study to explore the photo onboarding process for new partners. I used my extensive knowlege of mobile web gestures to build out the photo "re-arranging" portion of this prototype.
Serp Filters Studymobile
A mobile exploration around the filters options on our Search page. The most interesting part of this prototype is the iOS tumbler pattern I created for the price filters. Check it out on mobile, or at least in a your browser's mobile emulator, because the buttons relies on touch events in order to give a responsive feel.
This is a collection of production demos created by composing and modifying the existing set of Vrbo Design System web components, focusing mainly on calendar implementations, web animations, and modal patterns. These demos serve to help UX designers understand what is possible in our tech stack, iterate and refine their ideas by seeing them come to life, accelerate our production engineering team by completing a chunk of the front-end work before it gets to them, and ensure our production experience has the craft and polish our users deserve.
The production components are shared design system web components, live in our production app (www.vrbo.com), that I initially prototyped in collaboration with other designers, built out for the production code base, often in collaboration with our web app platform UI-Toolkit team, and continue to help maintain and improve. The components are all built in React and the demos are static builds of the component dev harnesses. All these production component are built for desktop and mobile web.
This is a native-like, touch-first swipable carousel with snap to and peaking functionality. It also supports pointer devices.
A panel and modal drawer implementation with header controls and a native-like experience for stepping through screens.
A click and scrolling mode supporting single and multi-card paging carousel with an accompanying extensible aspect-ratio based child card component. This component is littered throughout our experience and I have done several exploration around the extension of it's child cards
Card Carousel - Motion Study
A slide motion study with controls to explore the motion options around the single and paging transitions of the Card Carousel.
These enhancements involved adding a scrolling body modal, complete with built in scroll signifying shadows, and a swipe-dismissable bottom sheet modal, used to create a native-like experience on mobile web.
This component was built during my 6-month stint working on Property Details Page team as we worked to transition their code-base to React. The continually looping carousel supports stills, captions, and videos, has responsive touch gesture support, and supports inline and full-screen usage. Multiple carousel can be composed to create an inline experience that translate to full-screen. Use your phone or browser's mobile emulator to check out the swipe geture handling.
Single Image Carousel
When the Search Engine Results page needed a simplfied version of the Image Carousel for use in Google Maps, the Single Image Carousel was born. It supports showing only one still at a time, but has the same transition and responsive touch gesture support of its older sibling. Use your phone or browser's mobile emulator to check out the swipe geture handling.
Vertical Image Carousel
This vertically scrolling versions of the Image Carousel was created for a variant of the Property Details Page. It supports lazy loading images, captions, and video, and can be used in combinatino with a full-screen Image Carousel.
An inline message component with baked-in transition for showing, hiding, changing icons, and changing messaging. The component was created during my work with the Design Systems team on improving the Traveler Guest Picker component.
During a multi-month project to improve the usability of our Guest Picker feature, I partnered with our Design Systems UX Lead to create an improved prodcution implementation of our Guest Picker component. I also created a sample implementation in our Properties Detail Page.
Interaction and UI Consulting for Drop Party *I lied, it's not all Vrbo...
I did pick up one piece of consulting work in 2020 for Drop Party, a direct-to-consumer marketing platfrom on instagram. I helped them build out a base set of UI components in React and composed some mock experiences to help demo their platform.
Drop Party Experiencemobile
This is a mobile, touch-first experience composed of the different UI components I built. This expereince demonstates the user flow of landing on and registering for the initial drop.
Drop Party UI Componentsmobile
I worked with the Drop Party lead designer and lead engineer to build out these controlled React components. This work invovled building a custom swipable carousel, as well as a host of form elements.