Partying. Gamified.
Design concept for “Cheers!”, an app for inviting friends to party within a few seconds.
Introduction
Around the end of the August, things were going great for me, especially since I was about to join the awesome guys at STRV, the mobile app development agency. Up until now I’ve mainly been a web designer, without much experience in the mobile field, but stepping outside my comfort zone has meant a whole new world of possibilities.
I’d made a few apps before but I wasn’t completely confident about my skills and methods. Like almost every creative person out there, I have a secret list of app ideas or projects I want to do one day. This was one of them. I wanted go beyond the redesigning that was the focus of my earlier projects and try something different — to make an entire iPhone app from scratch and improve my skills in designing for iOS. This would also be good preparation for joining the STRV team.
Why Cheers?
I thought about the idea all summer. I looked really hard but couldn’t find an existing app for inviting specific people instantly to some place or event. Maybe I could create something that could engage people going out to party, for a beer or just to hangout. The functionality could be simplified into a few steps like “select friends”, “place” and “time” and “send” invites. Nothing else. Once everybody had agreed and met up, badges and points would be yours (similar to the way Foursquare used to award points for check-ins and rankings) and you could challenge your friends to be the best party animal in the city. This could work!
Shaping the idea
When I compared my idea to apps I knew, it fell somewhere between Swarm and Facebook Events.
Cheers creates spontaneous or short-term events with people around you.
Facebook Events is OK for future planning, but Cheers is all about inviting friends right in the moment – today or tomorrow. Swarm’s “nearby plans” don’t let you select people individually. There is no gamification about inviting – it’s basically like shouting out of the window.
Cheers is much faster than typing into your regular messaging app, and it doesn’t start a long conversation about place or time. It’s just a question of setting up an invite and getting acceptances. Tap, tap, tap and you’re done.
Getting ready
A three-page document was all I needed to set out all my ideas and scope the functionality. I also gathered all the possible elements and features into a single table to give a sense of the project size. That helped me edit out a few things I didn’t need in a first version.
These two steps helped me to get into the project, understand what I was designing and decide what to do next. Having a list of elements, with their priority and function, made it extremely easy to set up a layout. I continued with sketches and wireframes in UXPin – a great wire-framing tool I was already using every day for websites.
Inspired by whisky
The design style was really just a lucky accident. I’m a big whisky lover (OK, at the moment I’m a novice exploring different tastes, but a glass of single malt is a great reward after a hard week).
The yellow colour was inspired by light shining through my glass of whisky while I was playing round with some ideas. The actual colour of the whisky is obviously quite subtle, but the lamp turned it yellow. I chose dark colours for the background, because the app will be used mostly in the evening or night. I was so happy with the style that I shared a photo on Instagram that very evening.
My whisky glass is a circle if you look from the top, and that inspired the circle avatars and badges. I also used circle icons at the beginning, but that seemed like overkill.
Walkthrough
Some of the first things I made were illustrations for the intro walkthrough. This shows the basic functionality and most important screens even before the user signs up. Each illustration looks exactly like the real screen layout, except that it’s made in “strokes”. I wanted to promote the simplicity of the app right from the start.
Sign up process
If both sides have the app installed, Cheers sends party invites as notifications. If they don’t, it will automatically send iMessages including the invite text and a link for download. So all you need to sign up is your phone number, full name and password.
Facebook Messenger, WhatsApp and Viber don’t allow text with a link to be sent from third party apps. But it would be possible to import contacts from these apps as long as the profiles include phone numbers, and it would only be one more screen in the sign-up process. So that’s something I may add in the near future
Main screen (friends)
Cheers is all about your friends, so the main screen lists them by distance from your location. The ones who are physically nearest are at the top and you can scroll down to view more.
There is no tab bar or sidebar menu for navigation. Apart from friends and the inviting process, the app only needs user profile and notifications, which are shown as icons in the top bar.
Inviting friends
The process of inviting is just three simple steps. Starting on the main screen, you tap on people you want to invite and their avatar turns into a stroke circle with checkmark. Once you’ve selected two or more people the Select a venue button becomes active.
The next two steps are pretty clear: Select a place you want to visit and Set a time. Then just tap Cheers! and all selected users will get an invitation via the app or iMessage (if they don’t have the app yet).
The main screen also shows waiting for replies, upcoming or ongoing events by replacing buttons in the bottom of the screen. You can tap these to go into upcoming/ongoing event detail.
Earning Badges
You can build a collection of badges such as First Shot, Triple Kill and Club Rat by visiting events you set up with your friends. Everyone has to be in the same place at the same time, but you don’t need to check-in as your location should be detected automatically in the background.
I asked my friend Tomas Snop, who is really into icons and icon sets at the moment, to design a custom collection of 9 badges just to start with. I think he did a great job!
User profile
At the moment the profile screen is just an overview of your earned badges. The dark ones are inactive/not earned yet but you can tap and hold on them to get more info. There is also a settings icon in the top right corner. Future updates on this screen may include a history of your past events or an option to hide/reveal your current location.
Notifications
Notifications are used to catch all activity around you, but you can customize some things in settings. The most important are invites, because you can accept or decline them right there. You’ll also receive replies for your invites here, so you’ll know who is going or not.
And as long as you’re in iOS 8, you can reply directly by tapping Cheers! or Nope without going into the app.
Feedback?
That’s it from my side. I’d be really pleased to hear your feedback and comments. Feel free to comment directly into this article. Find me on Dribbble, Behance, Twitter or send an email.