Designing Happy Owl

Happy Owl is Hong Kong’s first drink redemption app. I joined the team as product designer to work alongside the lead software engineer and create a MVP within a one-month deadline, and then continue to improve the app experience based on our user research and feedback.

To meet the deadline, our lead software engineer decided to work with React Native for a balance between native responsiveness and time efficiency building both iOS and Android.

My goal was to design a solid flow with minimum core features that suited the users’ needs in the first week, and then create a high fidelity prototype for the next two weeks so the front-end could be implemented by the end of the month.

The users

There are two types of users for the Happy Owl app: our subscribers (and potential subscribers) and the staff who work at our partner venues.

The monthly subscription for Happy Owl is 199HKD (26USD) and subscribers can redeem one drink every day at any of our partner venues. After talking to potential users, we found that the most likely paying customers are 25–35 young professionals working in industries with a drinking culture.

When it comes to going out for drinks with friends and colleagues, the first decision they make is the district. Another important factor when deciding on a venue is the atmosphere, and type of drinks and food provided.

In the first version of the flow, I prioritized the district selection, map view, and venue list with clear images and description. I also added Nearby venue, a secondary flow as users tend to decide on a venue before heading out (ie. before leaving work.)

First version of wireframes showing the screens from opening the app to choosing a venue.

Other important features included a clear redemption flow for both the member and bar staff, and a filter for the opening and redeemable hours for each venue.

The drink redemption process required:

  1. Clear instructions for the member to pass their phone to the venue staff.
  2. The redeem action cannot be easily triggered by accident.
  3. The redeem action is easy enough so the staff can be trained easily (training our 40+ venues was time intensive for our operations team.)
Drink redemption wireframes

A prompt reminds the user to pass their phone to the staff. The staff views the drink selected, then slides to confirm the redemption. The slider prevents the user from accidentally triggering the redeem action. The slider is later replaced by Hold for 2 Seconds button because it was faster to develop.

Crafting the visual identity

Happy Owl’s brand represents the fun of drinking and the work-hard-play-hard attitude. Colorful photography captures the vibrant experience of discovering new venues and having fun drinking with friends.

Nocturnal habits

I can’t help noticing when people look at their phones in a dark bar or club, and they squint at the screen as if the light is burning into the back of their skulls. As a night owl, I adore night-friendly interfaces, like Reddit Enhancement Suite and Google Maps when driving through tunnels or at night. It just made sense for Happy Owl to use a dark UI, as most of the users will be using the app in a dark environment.

A dark color palette that represents the life of the night owl (and beer)

Typography

Our typographic approach makes use of geometry, boldness, and roundness to reflect the fun, friendliness and hipness of the brand.

Iconography

The round, bold icons embrace the personality of Happy Owl. I also played with the line and fill of different drinks to show the redemption state.

The icons are used as placeholders when we don’t have an image for a drink. It also serves as an indicator showing whether the drink of the day is available or not (full glass vs empty glass.)

The owl

Here are some sketches I did while exploring Happy Owl’s personality.

I decided to go with a geometric approach that shows the fun, cheeky side of Happy Owl without making it look too wasted or dumb. It sits nicely in a square shape, with the face filling the picture pane to create a visually compelling and functional logo.

The colors used in the final logo are inspired by Hong Kong nightlife and also allows the logo to work nicely in both dark and light backgrounds. The pink color resembles Asian flush and adds a bit of humor to the character.

The launch

After a month of spontaneous design, development and testing — and working/compromising with the limitations of React, we managed to launch the app on July 6, 2016 at one of our partner bars Zuma. We even got an ice luge made in the shape of the owl!

Home screen and drink redemption screen.

During the event, I noticed a few users who have already subscribed to Happy Owl and were using it at the bar. I casually hovered behind them and watched them use the app, while trying my best not to look like a creep. I made several mental notes on usability issues that I noticed.

The results

With the help of event promotions, word of mouth and media coverage, we reached over 1,000 downloads and 300 paying subscribers by the end of the month!

Happy Owl featured on the App Store and named one of four handy apps for Hong Kong drinkers: http://www.scmp.com/lifestyle/food-drink/article/2055131/four-handy-apps-hong-kongs-drinkers-and-party-people