Project: Grubhub - User Generated Photos
Role: UX, Visual Design, Research, Integration of feature into Ratings and Reviews flow
This project is a feature I worked on at Grubhub that was designed to collect user generated photos of a user’s delivery items. At Grubhub, we decided to invest in working on this feature after research was conducted that determined that users were posting a significant amount of photos on other networks featuring Grubhub delivery. We also received a significant amount of user reviews daily, which, when tied with the opportunity for collecting user generated photos presented an opportunity to bring Grubhub’s photo content onto our platform (as opposed to secondary social networks). Although this feature was primarily mobile focused (for mobile and tablet), at Grubhub, I design cross platform on most features. It should be noted also, that when designing for Grubhub, my feature designs also get applied to Seamless’s product as well (and at the time Eat24).
For this project, I initially started by using our previously conducted research on user generated photos and began to wireframe after having sketching some lower fidelity solutions and discussing with my team. The core of the functionality here was a photo capture feature that would integrate into our ratings and reviews flow where users could capture photos, and their photos would be tagged with their menu item. The main success metric for this project was to create a brand new feature that wouldn’t negatively impact our conversion metric. Secondarily, this initial design was created to see how many photos we could potentially collect from users.
After arriving at a wireframe that covered the photo capture flow we needed for this feature, I conducted internal research sessions after collaborating with a researcher to write a research script. The wireframes we tested with for these initial research sessions are included here.
From these initial research sessions, I (along with the Product Manager I was working with on this project) developed key learnings about the UI we were testing with. For example: buttons we altered to be clearer, and the initial vs. ‘photo captured’ state of the camera capture UI was altered to be a clearer separate state. From this point, I was able to go ahead and alter the flow with the changes we needed from research, and continue to the visual design stage of this project. The majority of the final frames are included here. Not shown are animations I prepared for this project to explain the scroll menu behavior. To finish this project at the time, I prepared a design spec, final flow mocks, did animations in Principle, and prepared a final prototype in Invision.
Project: Grubhub - Menu Combos
Role: research, collaboration on feature strategy with product managers, product design, visual design (including new patterns)
Project deliverables: prototype deliverables for user testing, iterative and final product design flow (UX/visual design) of menu combos feature across mentioned platforms
Menu combos is a menu feature that was designed cross platform for Grubhub’s mobile and desktop apps (desktop web, mobile web, iPhone and Android) that was designed to be applied to multiple restaurant’s chain menus.
My role on this project was to design a flexible menu interface that would allow users to combine a multitude of different chain items from different restaurants. In terms of my involvement in this project, I paired with our product team to establish scope, and I designed this feature end to end, including sketching and wireframe stages, to qualitative user testing to final visual design. The visual design of this project also included new component and animation design.
Below are examples of the project at it’s different stages, from wireframe fidelity to visual design.
Just the thing was a global marketing campaign that Etsy was launching for Spring 2017. The impetus for this campaign was showing users that Etsy has a multitude of items, or 'just the thing'.
For this project, I was tasked with designing the UX of the front of the funnel of the experience, for how users would arrive at this page from traffic drivers. Additionally, I designed the look and feel of this page and worked closely with the Etsy brand team to integrate the photo and GIF creative they shot specifically for this campaign. Because I worked closely with the brand team on this project I pulled inspiration from their work for part of the feel of this page and attempted to give the page an editorial but still highly shoppable look and feel overall. Pictured here are final wireframes for the project, as well as the final visual design for the landing page.
role: UX, Visual, Product Design
photography/art direction/copy: Etsy Brand team
marketing concept: Etsy Marketing team
For this project, I was tasked with imagining the future of Etsy's Editors Picks pages. These pages were used by the Merchandising teams as ways to highlight items for events or seasons.
In this iteration, I tried to solve for making items easy to purchase, by having them directly on the page, but also wanted to make the page behavior more dynamic and mobile first. In this mock, I explored making the page more dynamic by designing swipeable carousels of items, that would be personalized to the user based potentially using machine learning based on past likes and browse history. These carousels would also be expandable via a small grid icon that would allow users to quickly browse and purchase on mobile, an experience we were optimizing for. The categories would then be picked by the merchandising team to relate to the holiday or theme they wanted within the page. An example of when a page like this would be used would be to highlight items for a holiday either globally, or specific to a targeted market.
Additionally, I did visual explorations here of category level treatments. I was imagining that these cards would exist in a carousel in the larger page but then click through to category pages that are a tight, curated collection of items again personalized to each user by theme.
For Swarm's 4.0 release I designed multiple features including: redesigned photos in feeds, a page that lives off of a user's profile that allows users to check in at a later time, and a round up of your friends' most interesting activity as a means of discovery called the weekly swarm.
I wrote about the features I designed, as well as the updated marketing look and feel I designed for this release here
Included here as well is the Android version of the updated photos design, including a gallery view and privacy notification and toggle and process images for the one page experience I designed to check into past venues.
For Swarm's 4.8 release in October 2016, I redesigned it's onboarding, which was a great chance to reframe the story of Swarm, as our onboarding hadn't been modified since our 3.0 release in the summer of 2015. Since Swarm's 3.0 release, many things about the app had changed: our visual language had been refined, and we were more certain about the narrative of using Swarm to check in and get perks as well as interesting visual content like stickers. Along with these elements, it was important to note the use case of lifelogging in our new onboarding, as that continues to be a heavy use case of Swarm as well. All in all, redesigning onboarding for Swarm's 4.8 release was a great chance to reframe the narrative around checking in to life log, get stickers and coins, and get real world perks, as well as refine the visual language that introduces users to Swarm.
Included here are a sampling of the onboarding flow for both iOS and Android as well as my iOS wireframes for this project.
For Swarm's 4.7 release I designed an updated version of Swarm's new Perks feature - which was launched to allow users to receive real world deals in Swarm. Here I designed a purchase flow, to allow users to buy perks with Swarm coins, an updated banner on our venue detail screen, and a web-view, which was our redemption point for users.
role: product design, visual design
The gold scratch off UI was designed originally by Courtney Christopher
This project is a continuation of my work on designing the experience of photos in Swarm, and functions to allow user's to upload multiple photos to their check ins.
From a UX perspective, designing this feature was complex and included elements like photo ordering in the selection grid, including privacy toggles on the photo's edit screen.
After Swarm's 4.0 release that included a richer photo experience, we analyzed the engagement of check ins with photos and found that engagement numbers were higher for check ins with photos. From these findings, in this feature, we decided to make it easier for users to upload multiple photos for a richer user experience. Since this features' release the amount of check ins with photos has increased.
Role: UX, Visual Design
I designed this flow for Android M to properly request permissions according to Android's standards. This mock represents the flow of a user checking in for the first time and left to right represents: our EDU asking a user to check in for the first time, Swarm asking for appropriate location permissions to grant check ins in the second frame, and then popping a full screen permissions ask in the last frame if a user has denied location permissions.
Role: background illustrations, UX of permissions flow, visual design
Note: First time permissions flow in frame 1 was designed by Courtney Christopher
I designed this Swarm one page site for the August 2015 launch of Swarm's 3.0 release. This release continued to build on gamified elements of Swarm, and also built upon messaging features that I worked on.
This site was meant as a short and sweet marketing page to highlight major features of Swarm, in a similar playful aesthetic that we were building upon and continue to build upon with the design of Swarm.
The site is also response, and is live at swarmapp.com
This is a feature I designed for Swarm's messaging tab. The challenge of this feature design was flattening both messages and notifications into one tab. The challenge became how to make these items distinct enough, yet flat enough in content to be presented in one tab, where this tab previously had two tabs: one for messages and one for notifications.
Along with the flattened tabs, I introduced a new 'new message' icon in the upper right of these screens. Whereas previously this icon was hairline and thin, I included thicker lines and more vibrant colors to be consistent with Swarm's post 3.0 visual styling.
This project is the web relaunch of the Tapestry brand. To take the brand from a playful storytelling app to sleek ad product, I designed the site to match this change in direction. The site also serves as a destination to tell the story of Tapestry, past and present, and is a destination for potential users and clients. As Lead Designer at Tapestry, I was tasked with the art-direction, concept of the site, and design execution.
As well as these tasks, for the site I shot product photography, did illustrations, and assisted with some front end development, writing CSS.
The site is live at tapestrylabs.com
At Tapestry, I redesigned the 3.0 version of the storytelling app, redesigning the look and feel and designing a feature to enable users to create tappable stories from their iPhone and iPads.
After launch, the app was featured in the App Store in May, and featured in Cosmopolitan Magazine's September issue.
This is a redesign of Art+Commerce's site Photovogue. I designed the site to be responsive, and work with Masonry JS, and as an update to a past iteration of the site.
All Photography used is owned by Photovogue, and shot/art directed by Photovogue artists.
These are logo iterations designed for Art+Commerce's sister site Photovogue, a collaboration with Vogue Italia. For all logo iterations, I used variations on the brand's colors, red, black and white, and kept the brand's core look and feel in mind. For most of these logo iterations, I also tried to work in the monogram of "PV" to be used as potential watermarks, and simplified logos as well.
All photography used is owned by Photovogue, and shot/art directed by Photovogue artists.
This is an audio visual performance project I designed the visuals for. To design visuals for this project, I used a combination of AfterEffects animation, shooting live video and programming using MaxMSP/Jitter. The visuals are controlled gesturally by Matt Bethancourt's Gesture Controller - a custom midi device.
As personal projects, I often initiate hand drawn typography projects. This work has included the projects here: a neon type composition and a project called 'The Inspirational Type Project' (described more below). The neon composition was taken from handdrawn type then vectorized in Illustrator with details added in Photoshop.
The Inspirational type project was a self initiated project I designed to create a set of desktop images and posters, all around the theme of designing typography heavy images. I was interested in this project as it was a chance to experiment with designing typefaces in more complex ways. It was also an important goal for this project to create finished designs that would work at multiple resolution, and poster sizes.
As a result of this project, I also designed the typeface "Modern Mistral" (the last image above). Which I designed to be a cleaner, more modern (yet still very decorative) version of the font Mistral.