Jiffy
Social Networking for GIFs on iOS
--
Duration: 3 months
Role: Design & UI Development
Tools:
- Sketch
- InVision
- Xcode
Jiffy is a gamified social sharing iOS app for GIFs. This project was an exercise to become familiar and comfortable with Apple’s design principles.
Objective
To create a social networking app that that encourages users to post and feel rewarded. For this, adding a robust gamification system would motivate users allowing for richer app engagement.
Challenge
The true challenge was moving away from the familiar ecosystem of Android and designing an experience that felt native to iOS.
Approach
A social network can be complex. The underlying approach was to keep Jiffy simple— To learn from existing social networks and find ways to simplify common flows. Existing mediums must be acknowledged social media fatigue had to be avoided.
Ideation
I started by working on the signup & onboarding flow. It had to be simple enough that users can quickly start using Jiffy.
Design
iOS does not impose a design language like Material Design for Android. Hence I was free to experiment.
With Jiffy, I wanted design to be simple. The real hero in any screen is the GIF. So it was important that the GIF stands out and the design isn’t distracting.
Signup & Onboarding
The fastest way for a user to signup is to use social sign in. The GIF below demonstrates this.
Assuming you’re using social sign-in (Twitter or Facebook), the onboarding process is short and sweet. It’s broken down into 3 steps, where the last one is optional.
News Feed
Users will be spending most of their time on the news feed. Hence, it had to be designed in a way that’s easy to use.
Initially, a card-based approach was taken to each GIF post. But this felt too shadow-heavy and distracting. Moreover, unwanted padding and margins were eating up limited screen width.
Notifications
Every notification informs the user about:
- what kind of action it is—comment, share, etc.
- who has taken action—which user(s)
- when did it happen
- which GIF it is
Empty States
Perhaps the most neglected screens are ‘Empty States’. They initially don’t have anything to show, unless the user starts adding something to it. I wanted to use empty screens to my advantage, by encouraging users to take relevant action.
Gamification
Kevin Werbach taught me that Gamification if done right, can encourage users to interact with a product. In return, they’re rewarded in some form for their effort. This is a powerful cycle and habit that I wanted Jiffy to tap into.
The gamification system in Jiffy consists of Trophies and badges. Depending on various actions that users perform in the app, they are rewarded either one.
Trophies VS Badges
A trophy is a singular achievement, while a Badge indicates attaining a set of (similar) trophies.
Meaningful Rewards
Some actions give you a more tangible reward, instead of a trophy or badge. For instance, users who report enough offensive posts and comments, can become moderators. Another example would be to grant a ‘Celebrity’ status to users with millions of followers.
The intention is to recognize users and award such ‘special statuses’ to them.
Achievement List
Using with Caution
Not all achievable trophies and badges will be revealed to the user though. Having such knowledge beforehand can tempt users to use the app in unintended ways. For the Gamification system can be exploited by repeatedly posting GIFs in order to unlock a particular achievement.
Hence, while the achievement system is built to encourage interaction, it may lead to altering user’s natural usage behavior.
Learning & Outcome
Jiffy went on to be more than just a design exercise. It allowed me to get comfortable with iOS development and itsdesign principles. I also became familiar with Xcode and learnt Apple Swift programming.
Jiffy was an exciting project to work on. Although a personal one, creating a social network with gamification is an interesting challenge. The true problem lies in implementing a rewarding system that isn’t abused. Lastly, being yet another social network, it is important that it plays well with other platforms, thereby avoiding social media fatigue.
Other Screen Designs
Future
Designing Jiffy went through multiple iterations. Although it is yet to see the light as an actual app,there is still room for improvement. These include—
- Suggest a personalised list of people to follow, based on Facebook friends and Twitter followers
- Gradually unlock and introduce features to users (example: Stack Overflow)—prevents abuse
- Richer ways to interact with posts (more than just a generic ‘Like’)
References
Back to Portfolio | Twitter | LinkedIn | Dribbble
