Production Prototypes and Demos
The 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.
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 and drawer 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. There are about 9 demos, selectable through the control in the upper-left. Check them all out!
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".
Progress Disclosure in Onboardingdesktop
This production demo explored several different patterns to handle progress disclosure in part of the Vrbo partner onboarding experience.
A playground where I can easily explore different production possibilities by pushing the envelope of our current component set. Check out "Cards, Carousels, and Grid" to see some explorations around Carousel Cards.
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.
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.
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.
Virtual Tour CTA Slide
This is a custom Virtual Tour CTA slide that can support time-based or scroll-based horizontal parallax animation. I helped the Virtual Tours team out with this becuase it needed to be intergrated in many of the image carousel.
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.
Usability Lab Prototypes
These prototypes, built through a collaboration with other designers, were used for usability testing in user labs located in both Austin and London. Most of these prototypes were built in our same production tech stack, using existing and modified shared components.
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.
Group Collaboration Polling Studymobile/desktop
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.
Landing Pages Scroll Studymobile
Another mobile UX study (again use your phone or at least your browse's mobile emulator) designed to explore sticky navs and scroll behavior as we encourage user to explore our Landing Pages beyond just the searchbox.
A desktop study to explore card variations to help diversify our content and layouts on the homepage. This built off my extensive work with cards and the card carousel, as well as an easy grid modification. The initial experience is for a new uer, but pop a '/return-user' route on the end of the url to see the return user experience where you can 'heart' properties to add them to you Tripboards.
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.
Though this desktop study never made it into the lab, it was a fun exploration around the possibilities for a more guided and flexible experience around the searchbox (and header) layout. Resize your viewport width (get down almost to mobile) and try a few of the options afforded by the different query parameters: '?flex', '?immersive', or '?immersive&flex'