Friendslenge
A fun little competition with your friends helps you achieve something you want to do better.
A fun little competition with your friends helps you achieve something you want to do better.
There is always something that you want to do better. Reading more books to be knowledgeable about several different topics, working out daily to keep your body fit, or even trying something that you’ve been too scared to try. However, you always lack a little motivation to start or keep doing them. The Friendslenge turns those things into fun group challenges. You can send challenge invites to your friends, track your progress, and instantly interact with friends. You are partners but also competitors to encourage each other. With this app, anything you want to try and achieve will become an interesting social experience with friends, making it easier to stay motivated.
Project Overview
This was a three-week long independent project. I used this project to learn how to design a mobile app. I began with zero experience, but became more knowledgeable about mobile UI design.
Context
There was a story that triggered the initial idea of “21-day challenge.” At the beginning of graduate school, my friend and I realized that our one year program would slip by far too quickly if we don’t try something new. So we decided to give each other a challenge that we could both learn from. I challenged her to join a singing competition, and she challenged me to ask three questions a week in class because I was just about to adapt myself to a whole English environment. The challenges were terrifying but we both still completed them. The experience was very fun and encouraging. We checked up on each other. We felt the need to impress each other by doing the tasks. And it was ironically fun to share with each other how scared we were when we tried doing these tasks. So, that led to this project - an app that people can use to enjoy fun little competitions while helping their friends and themselves do something better.
Skills
Product Concept , Interaction, Interface, Visual Design, User Research, Usability Test, Digital Prototyping
Timeline March 2016
Inspired by my own experience while challenging my friend, I looked on the app store for an app that offered the flexibility of making arbitrary challenges while providing the needed social motivation to continue the drive.I found that very few used social motivation as the main approach to motivate users. Most apps only focus on individual self-tracking. Even if some apps incorporate group competitions, either the users can only compete through healthy activities, or the social motivation is too indirect. Habitica, for example, attempts to generate social motivation by creating a shared RPG campaign in which each person completes tasks to play the game. However, the focus is not on a mutually shared challenge but rather an indirect game, weakening that real-life bond to propel each other forward.
I extracted four key design principles to unlock the potential of social motivations. My design tweaked the goal to be a challenge between friends. I set 21 days to be the timeframe for challenges, since there is a common saying that it takes a minimum of 21 days to form a new habit. The timeframe is short enough to be inspiring, but long enough to be challenging
Storyboarding helped me illustrate a scenario and give context to main functions and task flow of the app.
I diverged different possible functions grounded around design principles. After prioritizing and organizing all possible features, I developed the final refined version of the functional map to guide the following UI design.
I first created a simple flow between screens, providing an overall content list for UI screens.
Building upon that and the functional map, I defined the content for each screen, showing the actions users would take (buttons) and the information users would need to see.
I ran a usability test with five participants and learned the main takeaways to inform my second version of wireframes.
In the first version of my design, list-views were intended to provide users with a quick overview of more challenges. Once users click into a challenge, they will see a card which mimics a tangible invitation from a friend in the real-world. However, the frequent switching between lists and cards really confused users. I also found that the ability for users to take quick actions on ‘’Inbox challenges’’ and ‘’ progress tracking’’ is more important than seeing a lot of challenges. Cards naturally supports actions better than list views. With this in mind, I changed list-views into cards to both maintain consistency and allow users to quickly take actions.
Based on the feedback from the first round of usability testing, I improved the overall UI flow and screens .
In the second round testings, my goal was to verify the ease of use and draw attention to the desirability and flexibility of the product. In general, the second version of the UI wireframes allowed participants to perform tasks much faster with less confusion. The main takeaways as described below, I further tuned some features to make the user experience more delightful.
The UI elements and visual style I used are intended to mimic real-world cards, making the interaction of accepting or initiating a challenge to be a little bit more formal and fun, rather than the normal messages that individuals receive from their friends. I also chose to use cards in my design because cards lend themselves well to displaying content composed of different elements, like elements whose size or supported actions vary.
The dashboard provides quick access to add a new challenge. Users can customize their own challenge or choose one from the suggestions provided. I designed an optional feature for setting up rewards. Users can see it as an incentive to join the challenge, and those who complete the challenge can win it as a prize.
The challenges users send to their friends will appear in their friends’ inboxes. When a user accepts a challenge, this challenge is moved to the ‘’ Upcoming’’ category. Users can view an overview of a challenge, or quickly take action upon received, pending and upcoming challenges. This is intended to help users easily manage all challenges.
The dashboard allows users to do daily self-tracking intuitively. When the user long presses the circle to mark the task completed, the circular progress indicator moves forward and the circle becomes filled. By glancing at the dashboard, users can quickly figure out which tasks have been completed today, as well as track how much progress they’ve made towards completing the challengeResearch has repeatedly found that when behavior is tracked and evaluated, it improves drastically. By double tapping a challenge, users can go to their journal to make an entry. When people track something, they become aware of it. The journal feature enables users to interact with each other by opening a window to peer to each others experiences, fostering even more social motivation during a challenge.
On the progress screen, I designed the like/poke feature to create lively interactions. If users want to show off their current progress or encourage their friends to make more progress on their challenges, they can poke other users. The participant that has been poked will get a notification immediately if he/she turns this feature on under “Settings”. This adds a feeling of competition and fun to the challenge.
Once a challenge has been completed, the user will receive a trophy that will appear on their “Profile”. Users also have the option to post the trophy on social media to broadcast their achievement.
