Status: Concept

This is a complete overhaul of my previous concept for Rive. You can check that out here!

Role

Project and design lead in a team of 3

Background

The process of finding somewhere to eat or something to do with friends or family can be involved, time-consuming, and often irritating. By distilling the decision-making process down to its most fundamental parts, Rive acts as a guide for quickly making the perfect decision on new options for restaurants and recreation.

Description

Rive, powered by Yelp and Uber APIs, turns discovery directly into decisions with a super simple process everyone can agree on. Pick your context-curated playlist, then swipe through the stack to pick your place. And you’re off. An Uber ride is called immediately, so there’s no time for arguments. No hopping back and forth between options for half an hour. Just pick a playlist, pick a place, and go.

Pick a Playlist

I love how services like Songza (and now Google Play Music) curate suggestions for music based on time of day and day of the week. I felt that this contextual, relevant filtering would be the perfect way to kick off the Rive experience. I implemented it with two distinct yet versatile categories- simply enough, "Eat" and "Do."

The user can immediately tell what's in store at a glance, and quickly can make an choice that suits his or her goal for the outing.

Pick a Place

Researching places to go with Yelp, Foursquare, or other directory services can often result in lengthy deliberations- searching, followed by comparing, followed by more searching, followed by more comparing.

Luckily, over the last couple years, a new type of interaction has emerged to encourage quick decision making (though typically harnessed in a social networking environment). I'm alluding, of course, to the "card stack."

We start with an "I'm Feeling Lucky Card," which embodies the original vision I had for what Rive could be when I first embarked on designing it. This card- which provides all relevant information for feeling comfortable with a place without actually knowing what it is- is key to bringing this concept to life. I'll talk more about this a bit later.

If the user isn't feeling quite so lucky, a swipe left or tap of the X button brings the next card in the stack into view. The user can now tap this card for details, swipe it left to keep looking for places, or swipe right to call an Uber immediately without leaving Rive.

This interaction flow solves what I perceive to be a key problem with location discovery services. By bringing the focus to binding decision making, I hope to guide users toward great new experiences they may have never tried otherwise.

UX Development Process

Original concepts for Rive focused heavily on taking the user somewhere cool without telling the user where he or she would be going until arrival. In addition, technological limitations meant the user would have to navigate there as well!

Whenever I tested the idea with friends, family, and others, the response was generally the same. It contained a mix of "Wow, that sounds really cool!" and "Wow, that sounds absolutely terrifying!" These comments general leaned more heavily in one direction than the other.

At first, I brushed these complaints aside. "They just don't get it," I'd tell myself. But the longer I thought about it, the more I realized that it was a problem I could work to fix rather than ignore- while still fulfilling my original goal of empowering people to make quick decisions to try new places.

Over time, new developments in other areas of experience design- namely context curation and stacks of actionable options- emerged. With these I saw a great opportunity to empower the user to make quick decisions themselves without trusting Rive blindly. The "I'm Feeling Lucky" card was icing on the cake- bringing the fun and excitement of a surprise location while providing relevant information and additional options for the more conservative user.

Finally, the Uber API came out this Fall and solved the final issue of navigation. As a college student without a car, Uber has come in handy for getting around Los Angeles with friends on countless occasions. In addition, the "I'm Feeling Lucky" card, which is likely to make users apprehensive, becomes much less nerve-racking if someone else is taking care of transportation. Of course, I plan to also provide Google Maps integration for those who have the means to drive themselves. With direct integration of these services into Rive, the entire experience can be seamlessly fulfilled in just a few taps.

Conclusion

Though Rive still has a long way to go before release, and will certainly see plenty of further tweaking, I'm thrilled to have iterated so consistently on the design before diving deep into development. The new flow makes for what I believe to be an amazing and novel experience for checking out new places, and I can't wait until we have an Alpha release ready to go. In addition, there are a few ideas from the original Rive concept- like hints along the way for I'm Feeling Lucky and price/distance control- that I'd like to find ways to work in here as well. Expect lots of news throughout 2016!

Icon resources modified from thenounproject.com

Status: Development Ended - Due to changes in the Instagram API, the app is no longer active.

Role

Product head and design lead in a team of 2

Background

Instagram has millions of active users every day- regularly posting records of memories and events. Though the Instagram app focuses on showing users what their friends and other people of interest are up to, the amount of publicly available data led me to wonder how Instagram might be harnessed in ways not related to the app's core mission. I remembered a seminar I attended my Sophomore year, led by Autodesk's Tatjana Dzambazova, where I learned about how a fallen statue in the middle east was reconstructed as a 3D model by aggregating various angles from tourist photos found through Google Images. I found that while many have used Instagram's API to search for locations to see photos that had been posted there, no one was focusing on exploring the "when," rather than the "where." Thus, Hereseum was born.

Description

Hereseum brings the past alive, wherever you are. Using data and photos from Instagram, travel through time to explore the history of your location. Remember great events and fun times, uncover lost relics, and become a historian of anywhere.

Time travel is dead simple- flux capacitor not required. Pick a year on the bottom bar, pick a month above it, and fly through time as fast as your curiosity takes you.

The original design focused on putting navigation at the forefront of the experience. The title bar lets the user know all necessary information about the displayed feed. The title "Hereseum," a blend of "Here" and "Museum" indicates that current location is the primary component, while the month/year combination below provides necessary context for navigation.

The design is meant to indicate to the user that though "Here" is constant, the timeframe is not. Thus, the 2-digit numbers in the navigation bar lose their ambiguity, as do the 12 letters above them.

The 2nd iteration of the design features a brighter color scheme to match Google's Material Design guidelines. I added a collection function for accessing favorite discovered photos, accessible at the top left, along with the ability to re-fetch current location at the top right. We are still determining whether we would like for the current location to be locked after the initial fetch, or if it should track a user as he or she moves.

Remind provides a seamless, simple solution for keeping teachers, students, and parents on the same page. By limiting its scope to communication, the team put together a wonderful tool I would have loved to use as a student, and will soon be adopting in programming courses I teach!

When considering how I could improve Remind, I knew I wanted to maintain this focus on communication. It would be extremely easy to clutter the tool with additional features; grading, roll call, and more came to mind, but they didn't fit Remind's mission or existing interaction design.

Announcements are the heart of Remind. Their quick, text-oriented nature makes it easy for teachers to easily push out important updates, reminders, and more. 

With this in mind, I thought back to classes I have taken and taught. I made 3 different Remind accounts- a teacher, a student, and a parent- and started using the tool as I would in those positions. After pushing out a number announcements, I started thinking about how their content could become more useful. 

This brought be to the concept I ran with- Intelligent Announcements. By using Natural Language Processing, announcements could be programmatically parsed for important content. It would allow teachers to focus on pushing out updates just as before, but provide additional interactive benefit. Below, I'll highlight a few useful possibilities that employ this paradigm: Calendar appointments, Checklists, and Permission slips.

As the teacher types, Remind scans for important information. Here, when the teacher types "due Wednesday," Remind creates calendar data to attach to the announcement, and highlights the information used in green.

When the student receives the announcement, the message is accompanied with a button to add the upcoming due date to his or her calendar. In addition, notification actions reflect this new capability by providing a new "add to calendar" default option.

When Remind notices the teacher typing out a list of supplies to bring to class, it generates a checklist for the student.

Built right into announcements, checklists can help students stay on top of all of their responsibilities.

The last option I'll showcase is also the most environmentally friendly. We can use Remind to save trees by putting permission slips right into announcements!

Of course, only parents can sign permission slips, so the signature option is only visible on parent accounts. Students will also see the announcement with a button to nudge their parents if they have yet to sign. In addition, we have a new "sign" default notification action, which brings the parent right to the signature option in the announcement.

Conclusion

By maintaining and building on the core structure of Remind, Intelligent Announcements can provide useful, relevant functionality in numerous scenarios. It was certainly challenging to build on a product as tightly designed as Remind, but I enjoyed the opportunity to work within its confines to create what I believe is a great addition to an already great experience.

Shazam recently underwent a radical visual overhaul which brought the application a much-needed modern rethinking. The application now has a consistent card-based structure that compartmentalizes features in a way that is easy to understand.

Shazam even has rudimentary functionality for concert ticket sales, though the feature is currently shoehorned in with a web application wrapper that is invoked when the user selects the "Next Concert" option for an artist the application has identified.

Here, I saw an opportunity for Shazam to do something more with ticket sales. The app clearly has access to a multitude of databases and is well-integrated into Apple's iOS platform. Apple recently integrated Shazam functionality into Siri to make music identification easier, so what if Apple opened up Apple Pay to make Shazam the easiest way to buy concert tickets for artists you like? With this inspiration in mind, I set out to design a new Shazam Tickets experience from the ground up.

Below is the screen from which users currently access the ticket sale function. It appears after a song is identified, and the ticket icon here became a motif for the entire Shazam Tickets system I devised. Tapping "Next Concert" will now take users to the Shazam Tickets interface, pictured below.

The Shazam Tickets Interface

Upon tapping the "Next Concert" button, the user is greeted with information on the soonest, closest concert for the artist. The interface closely matches precedents set throughout the Shazam UI, from a double-barred semitransparent black gradient on the header image with overlaid Helvetica Neue text to the same colors and iconography found throughout the rest of the application.

From the main Tickets screen, the user can, without scrolling, see how far away the venue is, read more about the artist's tour, and purchase a ticket. If the user wants to read more about the tour, the fading gradient on the text indicates that a simple tap will reveal the remaining information. Tapping the ticket icon at the bottom prompts the user to pay with Apple Pay, authenticated by touch ID. A receipt is emailed and the price on the ticket changes to "Purchased" with an iOS check icon to indicate that the ticket has been paid for. An arrow also appears on the ticket to indicate that tapping it will bring relevant ticket functionality.

Accessing Purchased Tickets

The "My Shazam" section of the app, accessible from the bottom of the screen before song identification, now includes a tab for tickets. Here, the user has easy access to all purchased tickets from an interface already available within Shazam.

Using Purchased Tickets

When a purchased ticket is tapped from anywhere within Shazam, the user is provided a QR code for entry to the venue, along with relevant information for the ticket.

Conclusion

Shazam Tickets takes a half-baked feature and turns it into a full-fledged, ease of use-centered experience for quickly and easily purchasing tickets. Though technical implementation is certainly not as simple as tweaking a few interface elements, a feature such as this better positions Shazam as a leader in providing mobile services for music enthusiasts from all walks of life.

Below, you can find raw images of each of the screens I designed for this project.

Update: Yelp has since updated its mobile application to resolve many of the shortcomings detailed here. That being said, the service could still use a visual tune-up, so I'll keep this here as an example of how I feel it could be improved.

I have a love/hate relationship with Yelp. In my experience, it has the most complete places database, and its quantity of customer reviews is second to none. Visually and functionally, however, I've always felt like Yelp is something of a jumbled mess. With that in mind, I set out to see if I could mock up a simpler, more visually appealing Yelp that I would love to use.

The Main Screen

Yelp's current main screen features a search bar at the top, along with a dominating grid of secondary functions that don't make much sense for an application whose core functionality is based on finding places. In my experience, Yelp is most useful in its location-based recommendations and its search function.

With these thoughts in mind, I placed the search bar in a more front-and-center location, moved secondary functions to an easily accessible drawer on the left, and introduced a new function that uses location and previous search history to recommend great nearby options. This function is visible under the main interface, and by teasing the user with photos of the food, it entices a pull up from the bottom shade to see what's below.

The Drawer

Active Yelp users take advantage of these functions and need them to be easily accessible. The drawer pops in and magnifies the icons, adds labels, and pushes away the main screen shade to bring full focus on these functions.

Recommendations

Quick recommendations reside just under the main screen. A large tag at the bottom of the main screen can be swiped upward (as indicated by the arrow) to reveal general recommendations based on previous activity and locations. It's similar to the "Nearby" function, but takes personal taste and history into account and displays listings with large photos to make it as easy as possible for the user to find something perfect nearby.

Search

Search has been revamped to make photos a primary focus, while keeping important information as accessible as ever. This allows users to make an educated choice based on a combination of visual and data-driven factors.

Status: Concept

Description

Lillipod lets the user assign playlists to customizable parts of a map.

Background

I'm a big fan of movies, and an even bigger fan of music. Movie soundtracks pick the perfect background music for each scene, and that got me thinking - what if I could hear the Beach Boys as I drive along the coast, or some Beastie Boys while I'm heading downtown?

Role

Designer and project lead in a team of 3

Design

Each color corresponds to a different playlist, and users can highlight areas as large or as small as desired. When the user is ready to begin listening, pressing the play button starts the music.

Challenges

The primary design challenge I faced was making interactions for map navigation and area coloring impossible to confuse. Early iterations allowed the user to toggle between coloring (with a traditional finger-painting method) and moving the map. This made it difficult to both color and move the map simultaneously, required two different sets of controls for drawing and navigation, and could result in frustration for the user as coloring the map precisely is difficult using just a finger.

I ultimately conceived the current system, which places a resizable circle at the center of the map. Controls at the bottom allow the user to fill or erase the contents of the circle, change the playlist's color, and undo the previous action.

By placing the selector over a region and using the fill tool, users can make precise adjustments without needing to worry about unintentionally highlighting unwanted regions, and users can move the map while holding the fill button down to draw on the map for as long as they desire.

Visual Language

The music note in the currently highlighted color selection lets the user know that tapping the icon will prompt playlist selection.

The circle selector features a grabbable tab on the side for adjusting size, consistent with the iOS grabber on the notification center. The fill and erase tools at the bottom also clearly correspond with the circle at the center.

The color changer is represented by three intersecting semitransparent circles, implying variance in color while using only white.

Main Interface V1 - The toggle at the bottom left switched to the movement interface from the drawing interface, and was overly complex for what I was trying to create. In addition, this setup required a cluttered setup of buttons for brush size and erasing. I avoided using a traditional eraser in my iconography, and instead opted for a more direct digital representation of the action (the circle with the gradient line crossing through it). Unfortunately, this icon did not make its way into the final design, but I may use it in the future if necessary.

Main Interface V2 - Here, navigation can occur at any time by swiping and pinching around the map. Brush size is controlled by the grabber on the right side of the center circle. Buttons at the bottom left allow the user to fill and erase the contents of the circle. This setup allows for one mode of interaction that is not hindered by an ambiguity of whether touching the map will move it or draw on it.

Status: Concept

Background

For the better part of the last decade, "sharing" has become the de-facto way in which we share our thoughts and opinions about what we watch, see, and read. That being said, I'm not crazy about publicly sharing things I want to talk about, but instead enjoy sending links to friends with whom I most want to discuss. What I realized after doing this for a long time is that many of my friends frequent the same sites I do, and will thus view the same content I view without my sending them the link. I came to the conclusion that although not everything is worth sharing- publicly or through messaged links- quite a bit is worth talking about with people whose opinions matter to you.

Description

Groops allows you create communities of friends who read the same stuff. A chat box appears at the bottom right corner of content on specified sites, letting you know who has read an article article and allowing you to initiate conversations right on the page. Through use of a browser extension, Groops notifies users when a conversation has been initiated and links them back to the content where discussion is taking place.

A small, unintrusive box at the bottom right of the browser window displays profile pictures for group participants, along with the group name, functionality to choose a different group, and a minimization button. Friends who have visited the current page have profile pictures in color with a blue border surrounding them. Initially, I felt the profile pictures being in color was enough differentiation, but I realized my artsier friends might use a grayscale profile picture, so I added the blue border as a safeguard against that.

Clicking a friend's profile picture selects him or her (indicated with a blue overlay), and makes visible the chat initiation button. By having the button appear when a friend is selected, rather than opening a chat window immediately, the user understands that more than one friend can be selected before initiating discussion.

Interactive interface demo available at http://invis.io/U31FM4YGX

IMPORTANT UPDATE (12/11/15): This concept has been totally revamped and is in development! Check out the new design here!

Role

Head of project and design in a team of 4

Background

The process of finding somewhere to eat or something to do with friends or family can be involved, time-consuming, and often irritating. By distilling the decision-making process down to its most fundamental parts (which everyone can agree on), Rive acts as a third party for making the perfect decision on restaurants and recreation.

Description

Rive helps you find great places to eat, snack, hike, or relax. The magic lies in Rive's focus on taking the idea of a "suggestion" to the next level by directing the user to the perfect place automatically. By leveraging existing Location and Places API, Rive navigates the user to a location guaranteed to be high in quality, but does not tell the user what exactly the destination is until arrival!

The user is first greeted with a screen prompting a selection between "eat" and "do." From here, three further selections are prompted:

Type (snack or meal? / active or relaxed?)

Price (cheaper or a bit pricier?)

Distance (nearby or a bit further?)

Rather than make a suggestion, Rive finds the perfect place based on these criteria and navigates the user to the destination. 

Icon resources modified from thenounproject.com