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.

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.

I started by working on the signup & onboarding flow. It had to be simple enough that users can quickly start using Jiffy.

User flow — Jiffy

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.

New user onboarding for social sign-in

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.

Jiffy — Home Feed (news feed) concepts

Notifications

Every notification informs the user about:

  1. what kind of action it is—comment, share, etc.
  2. who has taken action—which user(s)
  3. when did it happen
  4. which GIF it is
Breakdown of a notification UI item

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.

A trophy is a singular achievement, while a Badge indicates attaining a set of (similar) trophies.

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

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.


Styleguide

Available on InVision


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.

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


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store