header

HIVE, A CHECK IN APP


PERSONAL PROJECT (2017) • VIEW DEMO

I’ve always been an avid adopter of Swarm, the checkin app by Foursquare. However, while many of the users on the platform used it as a social media application, I always found it most rewarding as a “travel journal” for myself. I kept wanting to answer these questions and not having an easy way of doing so:

Where did I go while I was in Japan? 

What was that delicious tapas place I went to last month? 

Who did I go to the De Young with last year? 

These questions spured my desire to design and develop (along side with my partner-in-crime, Austin) a web app where I could search and filter through all my previous checkins.

swarm-app

The Swarm app focused on the social aspect, but didn’t have a strong sense of searching through your own individual profile.

YOU CHECK IN HIVE

main-page

Our web app focused on allowing you to search through your old checkins.

Some early concept sketches explored having a robust user profile that displayed some checkin metrics, like most frequent locations visited or top categories visited. While we liked the idea of providing interesting insights to the user, we decided to scrape a strong sense of profile for the first version of this app. I didn’t want the insights to take attention away from the main goal of the page—allowing users to look up past checkins—and it wasn’t clear what kind of checkin metrics would even be beneficial.

sketches

Some rough sketches focused on layouts

The final design centered around being able to search through and explore past check-ins. Based on the questions we often asked ourselves regarding our own checkins, we knew that we wanted the user to be able to sort their checkins via time, location types, and friends. We also wanted to include a search bar in case the user wanted to drill down and find something specific.

time

When (Time)

where

Where (Location)

who

Who (Friends)

Filtering

All filtering functionality is kept in a sticky header at the top, so the user would always be able to play around with their filters while still being able to access a list of their checkins below.

time-filter

For filtering via location types, we decided to use the top level categories that Foursquare utilizes (like food, arts & entertainment, residences, etc.) to keep the list from becoming unwiedly. We figured that the search bar could be used to for specific searches (like looking up “japanese restaurants” instead of just all food related locations).

location-types
location-filter
friends-filter

The List

Each list item has the name of the location, when you checked in there, and who you were with. I also decided to add an icon that further specified the location type to help the user quickly scan through the list and add a little bit of visual pop to make each location stand out.

list-anatomy

Each location is also mapped out to help further visualize where the check ins are. Users can also use the map to visually find past checkins by city or country. Using the Google Maps API, we were able to customize the visual design of the map to reduce the number of map labels and desaturate the colors to make each check in pin stand out even more.

map

VISUAL DESIGN

hive-logo

Logo and Brand Colors

I saw the Hive app as a complement to the Swarm app and I wanted its brand to extend that metaphor. Therefore, I designed the logo around hive imagery (the Swarm logo is a bee) as I saw our app the “home” for all our Swarm checkins.

In terms of brand colors, I chose a cool purple because I knew that I wanted the color of the app to really be powered by the checkins themselves. I wanted a color that could feel cohesive with all the bright, checkin colors while still feeling neutral.

brand-colors

Vectoring

I had the most fun designing the location category icons. To make each icon feel apart of a set, I made sure to the same grid, line widths, and similar shapes. There were over 200 icons to design in total, here are just a small sample of some of my favorites:

icons

Note: As of Sep 18, 2017, Swarm just released a new profile that features search and filtering capabilities. It’s flattering to know that our product thinking was on the right track as they actually released some of our functionality!

dribbble
linkedin
instagram
email

© copyright 2017