Featured

Hotspot for iPhone & Android

 

ui1Now spread in several cities across the US, Hotspot is a startup I started working with in Spring, 2013 (Co-founder, Chief Creative Officer). Originally based out of Seattle and now moved to New York, Hotspot is a “deals” app that let’s users get cheap- if not free- drinks and food from bars and restaurants by simply texting their friends to join. Their friends don’t even have to show up. What’s even better is that the app can alert you when you walk into or even past a bar or cafe that has a Hotspot deal.

The design challenge here was making something that college students would gravitate towards; something with an edgy feel, both bold but easy enough to use that they could grab a deal in a few seconds while standing in line for a drink.

Another UX challenge, common with new app startups, is acquisition and retention. I had to pay attention to the number of potential users who were getting texts from their friends using the app, as well as creating web-based, mobile friendly versions of the app that people could use before they committed to downloading the full app. In addition to the UX/UI design, several marketing campaigns and a website redesign are currently underway.

Most of this process has been defined by rapid iterations that could get into the hands of users quickly, testing what works and what doesn’t, as well as reaching out to users who have tried the app and seeing what their impressions were and what hangups they’d encountered. The result is bold, vivid and easy to use with very little to no training.

Once a user has found a deal they are interested in, I worked on a clean and intuitive details view that gave them clear instructions on how to get the deal, as well as mitigate any confusion they might have, especially when using the app for the first time. Honestly, the deal model was so great that users had trouble believing there was no “catch” to getting a free drink:
ui2

As we fine tuned the in-app experience for users finding specials and claiming them, we wanted to explore more ways to drive interaction between bars and users organically. Below are test UIs for a “Newsfeed” feature that allowed users to follow their favorite bars, and for bars in return to both gain a following, but also to push special deal straight to users.

I especially worked to understand what iconography was most intuitive and invoked the quickest interaction; from a Facebook-like “globe” icon, to a heart, to plays on messaging and inbox iconography:

ui-newsfeed

I also played with the interaction model and UI for the newsfeed itself, taking in special consideration that most users would not have a lot of friends on the app early on, nor be following any nearby bars. I designed streamlined “get started” prompts to get them going in moments and ensured that there would most always never be an empty newsfeed:

ui-newsfeed2

I also had to consider the greater experience outside of the app itself, both in generating training materials for bar staff, as well as designing out clear touch points and collateral for engaging users. Below are a weekly summary receipt sent to users, as well as a simple GIF we were able to blast out to bar staff that quickly teaches them everything they needed to know about redeeming an app voucher (as well as make them laugh).

reciept

 

Here is a simple GIF we sent out to bar staff explaining Hotspot in just a few seconds:

hotspot-how-to

As well as working on designing the larger app experience, I also helped roll out new marketing strategies aimed and viral attraction to the app. Below is one such campaign called “Office Heroes”, whereby a Hotspot user could get their entire office a free happy hour at one of our partner locations, only requiring folks to download the app to get their drinks.

 

office-hero

 

An example of weekly email sendouts detailing what’s new and nearby- these generated tons of new users and were often shared with friends:

email1

 

 

 

– – – – – – – – – –  Process & Evolution (2013-2015)

Early on we tried to explore an app experience more about connecting friends, regardless of where or what type of venue. The direction was bright and bubbly and focused more on “hangouts” and had very little forethought into venues being able to leverage these social interactions. Eventually, after speaking with both users and venue managers, we would move away from this and on towards a more mature app experience that honed in on the distinct business model of connecting users directly with bars, and rewarding them for inviting friends (tons of free drinks). However, here are some of the earliest iterations of Hotspot:

old

hotspot2hotspot3

hotspot1

 

Of note, the idea behind Hotspot has changed as well; initially it was a meetup app for friends, allowing users to send out invites to events or hangouts and essentially broadcast the invite through friend groups. The design for this original direction (which never took off due to lack of interest) was much more cartoony and bubbly- a direction I am still trying to move further away from… Designs below:

Original website-

Screen-Shot-2014-01-05-at-11.28.39-AM1

 

Maim Street

best

“Best New Games”, “New Games We Love” -2016

In So Choice Softworks’ “Maim Street,” you are a crossing guard helping people across the street. But there are too many cars. Like, way too many. You can’t save everyone! Earn prizes to upgrade your game, and even unlock the powerful bazooka to turn the tide of the intersection war! Rescue pedestrians to learn secrets about the town. Plenty of games reward perfection, this one rewards adequacy.

So Choice Softworks’ debut title, “Maim Street”, launched in March 2016 to viral success. However, with limited resources and a team of only 4 individuals, the challenges in creating Maim Street were numerous. The concept for Maim Street came about in late 2015 as we considered a ‘simple pilot exercise’ to get our feet wet before tackling larger projects. Yet, even as we began to dabble in the idea of a simple crossing guard facing numerous and perilous odds, the team quickly fell in love with the game and we worked to make it into a fleshed out concept in it’s own right.

I was brought on initially to help design and test the UI for the game, but quickly found a place in character design, marketing, game design, and in general helping to shape the experience and thematics of the game.

Below are some early process shots of the process:

Screen Shot 2016-07-14 at 3.52.29 PM

Screen Shot 2016-07-14 at 3.48.25 PM

Maim Street has a simple and straightforward gameplay mechanic- mainly swiping left, right, up and down. However, the concept of the game and the ‘joke’ behind it- that you simple cannot, nor should not try to save every pedestrian, was immediately non-obvious to our beta testers. This required several iterations between reworking the tutorial (which was often skipped) and the game interface and feedback loops in order to successfully instill in players the true objectives of the game- that being to keep your crossing guard’s stamina up as long as possible by saving at least one pedestrian before the stamina meter runs out. Add into that dozens of in game upgrades and modifications, including a bazooka and costumes that change the gameplay, and you get the addictive and chaotic (and adorable)  Maim Street.

ui

 

 

Roles:UX/Modeling/Art Direction/Game Design

Team: Wes Citti/Exec Producer/Dev, Tony Wilson/Creative Direction, Jeff Ames/Lead Dev

CEVO

CEVO is a global eSports company built around North America’s largest competitive online PC gaming league. Founded in December of 2004 with the intention to transform competitive online gaming into a professional sport, CEVO has been hosting both free and pay-to-pay tournaments across a variety of AAA titles for almost 10 years. They are also engaged in online broadcasting and other digital media.

Over the years, the CEVO team kept creating robust and comprehensive tools for competitive online players to track their stats, follow their favorite teams, as well as watch and play in online tournaments. In the end, however, they realized their web experience was becoming rather information-heavy and cluttered, leading to confusion and frustration on behalf of players. Here is a glimpse of the new website coming soon with a completely redesigned interface and UX flow. The current site is displayed first for comparison. Note the rich graphics, color in determining hierarchy and simplified navigation. This redesign also funnels users more efficiently to play and watch live games, two of the biggest draws for the company, without getting these call to actions lost in the mix.

 

 

Before:

CEVO Before

After:
cevo

PLAYON.tv Website Redesign

After working on the massive rebranding and redesign of their entire software suite, the PlayOn.tv website was in desperate need of a redesign. Their current site as of Spring, 2015, was a bit outdated and wasn’t doing much to engage potential customers. On top of reworking business strategies to now offer a free download of the app, the website needed to properly funnel people into downloaded while also offering a glimpse of the robust premium features.

Here is a preview of the previous home page;


current

 

After spending a good chunk of time conceptualizing and wireframing with other members of the team, I was able to come up with the following three page views, each comprising the majority of main user acquisition flow. Subjective aesthetics aside, the new site was design to pull users into a narrative flow that walks them through the value statements and into the major features of PlayOn. Overall, it builds on a sense of movement, storytelling and engaging graphics that help sell potential customers on the value of PlayOn.

Home Page:
1_playon_home_v2



Features page with sub navigation to quickly scroll to sections of interest:

2_playon_features_v4

And the “What’s On” page, with an ‘endless scrolling’ tile view that shows off a chunk of the awesome content users can watch, record and cast with PlayOn.

3_playon_whats-on

PlayOn: Process 2015

After two years, we are finally about to release a massive overhaul of not just the core product (3 separate software products now rolled into one), but also an entire brand relaunch. I’ve been privileged to oversee every part of this process, from early conception and iteration to it’s final launch coming out in August. From brand redesign and entire web redesign, to tackling the core products, it’s been a massive undertaking, but I’m pretty thrilled with how it’s come together. Below is a very brief look at the soon-coming launch with some of the very extensive process outlined as well.

Main PlayOn App

The main desktop app (which if you’ve never used it is similar to Spotify, but for streaming, casting and recording videos and any content really, from the web to your PC, smartphone or TV. You can record anything on the web to watch later, and our software even lets you skip the ads, which is fantastic.

Here’s a preview of the old (currently live) version of the product:

Popular_titles

 

As you can see… it’s rather bland. The product itself is fantastic. It works like a charm (most of the time) and give you a god-like power over internet television. Any video, any time, no commercials and on any device. The problem is, this great underbelly is entirely unwieldy. It’s like having a Rolls Royce engine strapped to…. well, whatever the worst car ever design was. Not to mention the entire software suite was fragmented- Want to record something? You have to use “PlayLater”; an entirely separate piece of software. Want to cast something? Need PlayCast. Want to watch vids? PlayOn. And so on. There was much more thought in the early days of Playon going towards marketing than to actually giving users a fantastic experience. Ultimately, the entire brand was charmless and lackluster. But despite this they have gained millions of followers.

Starting Over

In the first days of digging in it was pretty obvious we needed to eventually break out of the fragmented product lifecycle and move into a comprehensive and intuitive user-centered product that both redefined the PlayOn brand and which could keep up with other major brands in the playing field (Chromecast, Apple TV, Hulu, Netflix, Sling TV, etc…)

But there was a limitation on our end and that was precisely how to achieve these broad goals. So I set out to connect with the users themselves.

I sent out a survey,something of an ethnographical study into who our audience and ideal users were, (that’s what you get working with an anthropology major). You can read UX best practices and research all day, but in the end, I wanted to understand what a day in the life of a user looked like (to a degree). What were their viewing habits? What kinds of content did they want to watch? Movies or ongoing television series?  Did they want something similar to Netflix robust browse experience with tons of content being fed to them, or did they want to be able to favorite shows and be able to always pick up where they left off? There were so many facets to this, never minding the raw tools we were providing, to understanding what would make a good product. So I asked them. We surveyed 7,000 users, with something like 50 logic-based survey questions (the follow up questions would shape to previous answers). And people talked. A lot.

Our next priority became sifting through the mountains of data we had just begun to collect. Here are some sample questions and feedback:

1
3 4 5 6 7 8 9

*With a generated word cloud/listing of most-mentioned terms in user comments:

10

 

 

As you can see, I asked all sorts of questions. I was curious. I needed to understand our user base. I walked away with a slowly-forming picture in my head of what our product needed to be; users who sitting in cool, earth-toned living rooms after dinner with a glass of wine, most wanting to watch a television show- something short and sweet after a long day (meaning we needed a more romantic, darker UI that wouldn’t be too jarring like Netflix’s old fire-engine red splash screen…). Users were curious but picky. They wanted recommendations and a social sense of “what other people around them were watching”, but overwhelmingly wanted to be able to favorite (what we now call ‘subscribe’) to their favorite shows so they could easily get back to them. But not even just a queue of favorites, a living subscription agent that could check every hour and see if a new episode had aired and then tell them at work that not only was a new episode out, but we had just recorded it for them and queued it up commercial-free. Our users were incredibly vocal.

So, with this wealth of knowledge in hand, I began working on several iterative prototypes. I will highlight the main desktop UI, but keep in mind the entire product suite encompasses mobile, various TV UI’s for Roku, every major gaming console, Chromecast, desktop players and even various browser plugins.

This wireframe changed many, many times as we continued iterate, experiment and, most importantly, talk with users. Ultimately, here is some of the wireframes that I used for beginning the main app build with the design/dev team:

Main-App-Wireframe Support-flow

 

Obviously this product is much more complicated a beast then that; several dozen main body views, various states for the record queue, alerts, modals, cast controllers, etc. But at it’s heart I concluded that there are three main aspects to the new PlayOn; User Driven content (like personal media and recordings), consumable content (any show or movie or video clip on the web), and the Record Queue, which let’s them check the progress of media they are recording- much of it automated. It’s like a magical kitchen that knows your favorite dishes and always has them ready, always has something new for you to taste, and there’s always a wonderful smell coming from the oven. Delicious.

With this all in mind, we began to design, all the while carefully crafting a new brand identity as well. (Read more about the current website redesign here).

 

Iterations

I think it’s fair to say that wire framing is the easy part. The problems always seem more cut and dry; UX itself is a puzzle of varying and ever-shifting pieces, but ultimately they fit together somehow. Styles on the other hand are a pain. Especially when your project lifecycle lasts months or even a year or more. And for a major rebrand and product relaunch, it can easily last over a year with a small team.

Below are some of the early iterations of our product design. As with ever large project, the moment you design one thing, you realize there are a hundred unique use cases that need specified and detailed out, (what if a user clicks this button, but isn’t logged in, and there’s a problem with their internet connection? What are we supposed to show?). By the time you’ve sufficiently thought through the magnitude of UX problems, every designer comes to resent their first couple drafts for being too inflexible and graceless. Here you go:

Redesign V.1 (not really, but let’s jump to here)

2

1,png

 

Looking back, the colors are washed out (was going for soft and warm…), the two column view in the center panel is scrunched and additional info looks terrible. The record queue errs on the side of “clean” so much that it looks empty. Also, hate the font.

So, went back to the drawing board, talked to some users… and that brings us to-

 

PlayOn V.2

4

3

 

Litter better here. Based on feedback, I’m keeping the strong hero imagery front and center as much as possible. It’s eye-candy and re-enforces the powerful ‘content-forward’ aspect of browsing.

Also while this design is in process, I am pushing the company away from it’s 10-year history of $40-$60 one-time pay business model towards a freemium model. Benefits being; mass exposure. If you have a great product and it’s designed with the user in mind, get it out to as many people as possible. There are great ways to reinforce upgrading, but limiting your user base will always limit your ability to grow (note: I might very well change my mind on this based on new evidence). This model appeals more towards the younger (and much more numerous) demographic, who also, it seems, are entirely against the idea of cable and traditional media consumption.

Here we go with V.3

5

 

No long tirade here- but feedback tells us the single-column center view is a major improvement. More open space = flexibility. Some content has lots of description, some has little. This let’s us accommodate. Also, starting to play with user-prompted information. Accordions for more info while browsing, filters up top. More iconography throughout the app to make it less word-heavy.

 

And let’s just jump to the final release V.4

6

10

11

7

9

8

 

With this final (for now) iteration, we are putting graphics front and center. Content in the center body is entirely fluid, stripping away lines and section breaks that box content in. We’ve also implemented the new branding in (an entire other post in-and-of-itself) which is much more mature, ‘trustworthy’ and in-line with user’s expectations of a media brand/identitiy. The UI too is still ‘soft’ without being washed out; structured without seeming too boxy or UI-forward. I’ve tried to bring in organic elements too, with header backgrounds for views and folders with no artwork, and adding in additional logic for when we can find artwork thumbnails but no high-res background artwork to fill the space. Every single view is consistent in it’s UI, but unique in it’s hero image artwork. It makes one feel like you’re heading down a familiar but every changing adventure into the world of internet television.

This doesnt even begin to touch on the intuitive features we’ve evolved; smart messaging and notifications to alert you to new content and seamless troubleshooting, support that meets you where you are and UX elements that are hidden until you need them- then magically springing to life.

Content for another post.

MOVEMENT&FAITH MAGAZINE

A site built on behalf of the Interfaith Alliance, a non-profit looking to build bridges between communities of faith and culture; Movement&Faith served as their national online magazine and journal for 3 years. Covering topics of local and international significance, the online magazine interviewed popular thinkers and activists and brought these ideas to the table for interfaith and intercultural discussions.

M-F_oAside from designing and launching the website, I focused on creating compelling marketing materials and illustration pieces for the Interfaith Alliance to use:
IMG_1080

5across: Crosswords with Friends

5across is a passion project of mine. Developed by Mike Stevens and marketed with Aaron Davidson, I was responsible for all design and creative oversight of this project (Beta out as of January 2015).

The site uses the Socket io JavaScript library, enabling realtime, bi-directional communication between web clients and server, allowing players to work on puzzles together simultaneously, either cooperatively with friends or challenging each other, and also hosts an in-game chat system for talking through puzzles. The next beta release will extend support to mobile, as well as add in-game music and even team competitions and game ranking. By why read about it- check it out at www.5across.com.

portfolio-first-page portfolio-second-page

Screen Shot 2015-01-16 at 8.46.01 AM

PLAYON.TV (2014)

Update: Article on Gigaom covering the release; https://gigaom.com/2015/01/16/playon-gets-ready-to-launch-a-desktop-app-with-ad-skipping/

Since Fall of 2013 I have worked as the lead creative and senior UX designer for PlayOn.tv; a Seattle-based company that delivers of shows and movies, as well as aggregates other popular streaming platforms like Netflix, Hulu and Amazon Instant- straight to users. At its heart, PlayOn allows users to stream, cast and record any media content that can be found on the internet, giving them the ability to record entire seasons of their favorite shows and take them with them wherever they go and watch them on any device, at any time. Similar to Pandora or Spotify, users can subscribe to PlayOn on a yearly basis and never need to pay for cable again.

playon2

January, 2015; PlayOn’s desktop app as premiered at CES in Las Vegas. Displays robust visual content and intuitive browsing algorithms on the ‘Featured’ home screen.

When I came on in 2013, PlayOn had already been around for nearly a decade, with several million downloads of their desktop app and mobile app counterpart. Yet despite genuine growth, the company was looking to take it suite of applications to the next level. They had worked with a number of groups, design firms and agencies, but their current interface was, by all standards, bland and non-engaging. Worse, their dynamic feature set was displayed in a extremely discordant manner, making the product seem unfriendly, unintuitive and overly complex. Things needed simplified.

PlayOn's desktop application circa 2013; overwhelmingly complex at times and at other times empty and un-engaging.

PlayOn’s desktop application circa 2013; overwhelmingly complex at times and at other times empty and un-engaging.

I began by identifying the needs of the user as well as the current problems faced by the existing UI. I sent out a survey to all existing PlayOn users, of which some 7,000 people replied. The 30 question survey for the most part ignored the current application UI- the PlayOn team had been very vocal about coming up with a new approach and were looking for fresh insights. Questions began with user’s daily TV watching habits; did they watch mostly movies or television shows? Live news, sports or series? When they came home after work, did they want to passively browse and get recommendations or did they already have a show or series in mind that they wanted to continue? I also took some time to get feedback on ideas that did not exist yet; subscriptions that could auto download your favorite shows for you and queue them to watch, dynamic folder management, integrated support features, ease of management for videos in your record queue, quickly be able to throw shows on your iPad, etc. Other questions tried to build an understanding of the “ideal user’s” TV environment; did they watch shows in their living room? If so, what color were their walls? What was the lighting level? How large was the average TV display? Did they watch in bed? How often would they want to watch multiple episodes, one after the other…

After I got back the thousands of responses, many users even took time to write me lengthy messages detailing their viewing habits, I was able to better understand our audience. Younger/middle-aged men and women, professionals who wanted the family room-TV experience, but who watched most of their television and movies via streaming platforms instead of cable. They didn’t want to be as tethered to the PC app, more mobile friendly. Better casting and intuitive browsing like other platforms were offering (people love vegging out and being fed content). The new UI we began to develop didn’t just think through how to make the experience more ‘beautiful’ and user-friendly, but even began to evolve the product in terms of what it offered.

 

playon2

The new UI brings organization front and center, but disguises it with beautiful hero images; showing off all the content that PlayOn can bring to users. Large hero images display current series and episodes for channels as users browse, but now with intuitive browsing paths and a dashboard to quickly jump back and forth from their recordings to browsing. Subscriptions, too, now allow users to find a show they love and “subscribe” to it. Whenever a new week’s episode becomes available online (i.e. an episode of New Girl that airs on Tuesday will be available online Wednesday morning on Fox’s website and Hulu) the subscription agent will automatically download the show and queue it up to watch whenever the user wants.

playon4
The biggest design challenge was integrating all the PlayOn features in one desktop app. As of 2013 all the unique features; recording, casting, streaming, etc, were done through their unique programs. Most users had to download and install license keys for multiple products (PlayOn, PlayLater, etc) to use all the features. We decided that it made sense and made the product a thousand times more appealing to have everything under one roof. The challenge was, however, how to combine several applications into one, seamless experience. A large part of the answer came in context-based menus and awareness of connected devices; only showing the user what he or she is able to do and not confusing them with hundreds of options that they cant interact with. This took months of UX research and development iterations.

playon2-body2

The robust desktop application alone brought with it innumerable design and development decisions. Consistently displaying varying context menus and browse levels was an every changing puzzle as the application evolved through its many iterations, while always keeping the interface clean, clear and never overwhelming for users. Add to that this application needs to play nice with a diverse set of casting partners such as Roku and Chromecast, PS4 and XBox, not to mention other PlayOn partner devices like the PlayOn app for users’ smartphones.

Screen Shot 2014-01-05 at 12.48.23 PM

A second major design challenge as well was the release of Google’s Chromecast stick, which came out after we had already started development on the revised desktop app. An exciting new opportunity for PlayOn, Chromecast opened up a whole new audience of streamers who could use the PlayOn desktop and mobile app; allowing them to cast any video on the internet to a nearby TV and even saving it to watch later. This required a more serious build out of the cast control features within both the desktop and mobile app; not just allowing users to connect to a streaming device and control it, but also bounce between different casting devices and in different locations and even take over a cast video and interrupt it.

All in all, it has been an ongoing challenge, exciting nonetheless, designing across such a diverse range of platforms and devices, ranging from 10-foot displays (televisions) to desktop and mobile. Even as I write this we are planning out the next stages of development that make everything described here seem outdated and mundane; a prospect that keeps me ever energized as there is always something new to create.

PlayOn Television UX/UI

Native television UX/UI. Early prototype of TV-based streaming platform being launched sometime~ 2015. Features custom curated gallery of images and video from hundreds of the most popular television shows and channels. Allows users to instantly play any show on their TV. (Creative Direction, UX/UI)

playontv