As a product intern I rapidly explored UI solutions for both web and iOS during a pivotal rebranding in the company.
As a product intern at Rent the Runway, I worked on rapidly prototyping and developing a new user interface for a fast-paced company-wide rebranding. To begin my time, I explored ways in which animations could be more widely integrated into the site as well as created a guide on how to best programmatically implement them using variations of CSS alone, javascript alone, as well as combining the two to optimize performance. The animations were created in After Effects, exported to PNGs and then compiled into an animation sprite sheet in Photoshop. Several examples can be seen below as well as a full guide I wrote on their implementation. Simply tap or click the icons in the pink tiles below to experience some of the animations I created for RtR.
The vast majority of my time and effort at Rent the Runway went into the rebranding that occurred. I worked alongside RTR’s UX lead to create interactive full prototypes that could be used for user testing ahead of the launch as well as explored interface options for the full launch of the unlimited subscription to RTR.
Lastly, as a part of an intern project, I explored more creative interactions for the site such as shoppable videos and new ways to interact with the Unlimited Subscription business model. Shoppable videos allow the user to click interesting items as they view the video and then review the items they selected at the end of the video.
An exploration of engaging work space information and interaction design.
Lightboard is an exploration of the opportunities offered by a large LED environmental display in the Dow Jones midtown office. With a highly visible screen spanning multiple floors, it provides an excellent canvas for data visualization and disseminating information. Data drives decisions—especially at a company like Dow Jones, but that data does not have to be boring or impersonal. Data can be remarkable if it's presented remarkably. Due to its importance and easy availability, Lightboard's current focus is cataloging and exploring Twitter data from the @WSJ handle. Lightboard then makes the data interactive through the use of an iPhone app which lets users interface with the board by playing games on it, viewing its data on the go, and posting memos to the board for the whole company to see.
On the team, I both programmed and aided in designing the iOS component of Lighboard. Additionally, I used Socket.IO to set up communication between the iOS app and the node.js server that powers Lightboard’s back end.
Device Factory is a small NYC based startup that produces the swiss army knife of accelerometers, the DF1. The DF1 is a small Bluetooth LE beacon that computes and wirelessly transmits accelerometer data at a maximum of 50Hz to a companion iPhone app.
As a developer for this company, I am in charge of both the design and the programming of their iOS app that communicates with the DF1. The design consists of three primary views, plus an on boarding sequence. The user first sees a list of all DF1’s that are in range and is allowed to select which DF1 they would like to interact with. Once selected, the user is presented with a dashboard of live data being retrieved. Lastly, a configuration view allows users to customize which widgets they would like to see and what those widgets should do. This allows the DF1 to function in multiple use cases, from recording scientific data to getting notifications when the DF1 experiences motion or an impact over a user determined threshold.
RTR's retail stores offer a critical touchpoint with our customers. It is the physical embodiment of the dream closet. In the modern world, checkout lines and large crowds are definitely not a magical experience. This is where retail technology comes in. We set out to concept and build the technology that makes the dream closet feel like magic. No checkout, no talking to people if you don't want to, and no more long lines. This would allow our stores to service more customers, more accurately, at a faster pace than ever before. The ideation process for this team involved a close collaboration between our retail associates and our product design team as well as several store observation sessions to get a better understanding of the pain points in our retail stores.
iPad Scanners
The first technology we designed to create the dream closet experience is a system of 3 types of iPad scanners. First off is availability scanners, which allow customers to check the availability of an item without asking an associate. Second is drop off scanners, which allow customers to scan their items and drop them in a bin, instantly marking them as returned and opening up slots for subscription customers without waiting for UPS.
Lastly, we designed self service swaps scanners, which allow subscription customers to sign into their RTR Unlimited account and swap old items for new items without going through the checkout line.
RTR Pass
The second way we brought the dream closet to life involved changing the way we identify our customers. Identifying our customers in the store has always been a pain point. Customers would traditionally have to spell out their email addresses to our associates, which was both time consuming and unsecure. To solve this, my team and I designed the RTR Pass, a unique QR code that can be scanned to identify any customer. These can be used for signing up for a fitting room or quickly singing in on an iPad scanner for subscription self service.
Challenges and Ongoing Work
One of our ongoing challenges is striking the right balance of security and ease. We have noticed some customers scan their items at the swap scanners and walk away without logging out or confirming their order. To remedy this, the team is exploring audio cues as well as interstitials after the first item is scanned in order to slow the customers down and make sure they know they must confirm their order before walking away. Additionally, the team is working on building tools for store associates to monitor self-service technologies and inventory.
To Due
Task management simplified.
To Due is my most comprehensive, personal, and long lasting project. It has been entirely designed and written by me and seeks to create a seamless and simplified task management solution. By having the entire application live in the menubar of the mac, tasks are always just a click away. No need to launch and quit and app, or throw a clunky window to the side so you can focus on the rest of your work. Instead To Due is there when you need it and gone when you don’t. Furthermore, it auto-prioritizes your tasks based on how urgently they are due, giving a color category to each. Red is due in the next 24 hours, yellow is this week, and green tasks are due in more than a week. Lastly, it offers a quick way to create multiple reminders for a task with just a tap. In stead of opting for scroll wheels to set reminder times, To Due uses easy one tap/click toggles for convenient sets of reminder times.
Problem Order Swaps
Solving a fashion emergency at the last second.
The Problem
When a customer orders a dress at Rent the Runway, there is a very small but real chance that the dress they ordered may become unavailable for their rental date if it is returned late or damaged by the customer before.
When this happens, the order becomes a “Problem Order” or PO for short. Normally this is handled by our customer service team by reaching out and offering any item on our site that is available, regardless of price. This involves a lot of back and forth via email or a lengthy and usually challenging phone call for our customer service team.
Explorations
I set out to design a robust system for clearly presenting what went wrong and all potential solution options for the customer. This began with a written map of screens and potential paths, then extensive explorations of UIs in sketch.
Testing and Challenges
The obvious large challenge with this experience is the lack of a human touch on a very stressful situation. To get a better understanding of this situation, I spent two days sitting with our customer service team listening in on calls to resolve these order problems. Frequently, this process notifies customers that they will not be getting their rental only a few days before their event and only offers a few hours for them to select a replacement for them to still get the order on time. After creating initial prototypes in invision, my team and I conducted extensive in-person user testing and went through numerous copy iterations to strike the right balance of urgency, apology, and empathy. Additionally, we tested the best way to reward customers for solving this problem on their own, testing things such as free mystery jewelry being added to the order or a free bonus style.
The Solution
The final version of this system was the result of hundreds of hours of testing and collaboration with our customer service team. Many elements were cut due to scoping reasons, but the final version allows for a customer to choose replacement styles in app that will be delivered on their original delivery date, plus offers an additional bonus style as a thank you and apology. We have seen a massive adoption of this feature and a 98% completion rate of the swapping flow once a customer enters it. You can see an early beta of this feature below.
RTR App Redesign
Building a personal closet in your pocket.
Background and Goal
Since joining RTR full time in 2016, I have taken ownership over the mobile app; focusing on modernizing the design patterns while shipping business changing new features that are focused on bringing value to our customers. Visually, these changes have involved bolder typography at larger point sizes, rounder interface elements such as buttons, and the addition of broader uses of animation throughout the app. This has also been brought to life in three core features: reinventing the home tab of the app, updating the navigation UX, and creating a more modern hearting experience.
Home Tab
The home tab of the app has been virtually the same since the app's launch in 2015. It has been a stack of full screen tiles, all directing to different grids of featured products. This was an inflexible system that failed to appropriately service our customers. To solve this, I designed a robust system of modules that could be controlled by our CMS. These modules included carousels, large imagery tiles, small tiles for larger collections of product groupings, and a list at the bottom of the home tab to help customers that were trying to navigate from the screen. These modules could be targeted to specific customer types and carousels of products could be rearranged based on our recommendation engine's understanding of the customer's personal style preferences.
Hearts
For the new home tab experience to be most effective, we needed our customers to engage with our hearting feature to tell us what they liked. This was the perfect opportunity to revisit the hearting UX, making it more accessible for taller devices as well as updating its visual language.
Navigation Rework
The navigation of RTR's app had three main drawbacks - poor recognition as a nav, poor discoverability of categories, and an inflexible system that only supported a two layer deep navigation hierarchy. To remedy the recognition problem, I reverted the navigation to a more traditional hamburger styling. For the other two problems, I designed a robust drawer system, allowing the app to support any depth of taxonomy while feeling modern and gestural. You can see the original navigation below on the left, and the new navigation on the right.
Animations
Ever since high school I have been exploring the potential uses of animation for both practical and entertainment purposes.
The above animation is a playful exploration of motion using elements from numerous past projects I have worked on.
This animation uses frame by frame motion tracking to overlay a history of Apple ads on top of a more recent iPhone Ad.
Lastly, this animation centers on simple shapes and transitions.
Atomic Design Style Guide
Based on the atomic design principles of Brad Frost, this style guide links into the Rent the Runway storefront application to provide constantly up to date styles for company use.
As Rent the Runway's online store front evolves, the CSS and front end frameworks that support it have become more and more complex. Decisions made by the creative, product, and engineering teams all add to the complexity and decentralization of our global styles. This is exactly where an atomic design based style guide can come in to help.
React is a front end javascript framework that allows for the separation of reused user facing elements into components. The style guide is a systematic breakdown of the site and creation of these React components to be used by the front end team. This directly links into the very same sass files that power the site's front end, which allows for seamless updates of both the style guide and the actual site itself. Change the font on a button in the style guide and it is instantly reflected site wide.
As an additional feature of the guide, I have analyzed the grids on dozens of Rent the Runway pages in order to develop a singular grid system based on Twitter Bootstrap to power the site. This further cuts down on repeated CSS, cleans up layouts, and speeds up development time.
So this all sounds great, but one of the biggest challenges is getting cross team collaboration and buy-in to ensure that the living style guide becomes an effective manner of generating consistent styles and fast paced development. For the engineering team, I held an Architecture Review Board for the introduction of a new grid system which passed and is being used on Rent the Runway pages today. For the product and creative teams, I have created Sketch and Photoshop documents of the elements and grid system for use, ensuring that the designs the engineering team receives can be built by the frameworks and components provided by the style guide.
The style guide will be launching later this year as a public facing document. More info will come on this project as soon as it goes live.
