Adding Gamification Features in Campaign Mobile App — UX Case Study
Introduction
Hello, good people! My name is Muhammad Fadli. These past days, I have been encouraging myself to be a better individual with a collection of job-ready skill sets. This project is the outcome of my internship program established by Skilvul x Kampus Merdeka. Through this project, I’m able to develop my abilities in becoming a Digital Product Designer.
Project Disclaimer: This project is part of the UI/UX internship program implemented by Skilvul, for the program Kampus Merdeka established by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Campaign is the Challenge Partner. I am not working for nor contracted professionally by Campaign.
Project Overview
Campaign is a social media platform that allows its users to donate by participating in challenges provided by multiple organizers. Campaign aims to create a safe space between its organizers to launch more campaigns and its supporters to take more actions. Found in 2015, Campaign accommodates their users with Challenge, a feature where users can take actions and unlock donations.
As of 2021, Campaign has reach a total of 343,000+ actions taken, 341 of organizers, and a whopping 1.44 billion rupiah worth of donations. In 2020, Campaign received the Google Play Award for “Best App for Good”.
Challenge
The challenge of this development is to identify user problems and discover the precise gamification features to increase user engagement.
Role in Team
I did this project alongside 2 teammates of mine, Elisa Oktaviani and Muhammad Zulfarhan. We collaborate in order to produce design solutions of the product.
My responsibility are as follows:
- Conducted research to collect user data and insights in order to identify pain points.
- Produced ideas through ideation process during define and ideate stage.
- Built task flows and wireframes based on the ideas from the previous stage.
- Designed high fidelity design and prototypes following the previously designed UI kits & design systems.
- Conducted usability testing to gain user perspective and insights.
Design Process
For this project, we were instructed to use design thinking as the framework to work through this project.
Empathy
Secondary Research
We started the empathy stage by conducting Secondary Research. Secondary research is a method of research by using an already existed data. Here, we used user testimonies towards Campaign app collected from Google Play & App Store reviews. From this method, we are able to understand that:
- App often takes too long to load.
- Users are unable to ask further questions to organizers regarding the challenges.
- Users find it difficult to find the challenges they want to participate in.
User Survey
In understand our user even more, we created a survey to get to know the bigger-picture about how their experiences using the app. Before conducting the survey, we set the research objectives & user target first.
Research Objectives
- To understand user’s experiences in using Campaign app in order to improve the user experience.
- To identify the right gamification features in order to motivate users in finishing a task and increase user engagement.
User Target
- Women, age of 16–24 years old
- Students or fresh graduates
- Have a bold interest in social issues and activities
- Loves meeting new people
- Is preparing themselves to have a job
After we specify our objectives and user target, we proceed to do the survey by using Google Forms. We did the survey in order to see how familiar our target users are with Campaign app and also gamification features. From the survey, we can conclude that:
- Users are not using the app frequently because they got so little free time and tight schedule.
- Most users only complete 0–2 challenges in their history of using Campaign.
- Users feels like the challenge is too boring because they’re only uploading pictures to take actions.
- Users has been familiar enough with gamification features such as points, badges, and leaderboard.
Define
After conducting research and collecting the data, we were able to identify the pain points users have faced when using Campaign app.
From the result of the pain points, we conclude everything with a How Might We. How Might We helped us to understand the big idea of what we were trying to solve.
We then vote on the HMW we think is the most crucial to solve and be brought to the next ideation stage. Based on the vote, we agreed on how might we make users take more challenges by developing gamification features.
Ideate
We started the ideate phase by making possible solutions ideas as many as we can. Each of us presented our ideas to the team and then voted which ideas will be brought for development.
After selecting the ideas, we then grouped the voted ideas using affinity diagram to divide these ideas into more specific categorization.
After categorizing all ideas, we proceed to measure the priority of each feature category to be developed. Through brainstorming, we were able to determined which category will be developed first and the next one.
From the chart above, we decided to put Gamification & Rewards under Yes, Do It Now and Social Feature & Notification under Do Next.
We then proceed to draw some sketches in a short amount of time based on the ideas. Each team member presented their sketches to the team and voted the sketches will be used to develop.
User Flow
Before designing interface, me and my team first brainstormed how the whole feature would work together by making user flows. We decided to make user flows of the most prioritized feature.
Wireframe
After building the user flows, we proceed by making wireframes of screens alongside the information it may contain.
Design System
To make a consistent design, my team and I created a design system to ease the process of the design and maintaining its consistency.
Prototype
UI Design
Following the guidance from the previously made wireframes and design system, we continue by making several high fidelity design. Similar from the existing app, but upgraded from the feature we add.
Finish Challenge
Challenge Friends
Leaderboard & Avatar
Rewards
Prototype
The purpose of prototyping is to display all the feature added for us to test it to users and later be develop. Below is the clickable prototype with all the features added.
Test
After building the prototype, me and my team proceed to the last phase of the design process, Test. The test is carried offline and online. The method we use for the test is Usability Testing. The purpose of this test is to have the user use the product to collect their thoughts and opinions regarding the design. Below is the full access of the testing documents & data.
We ask the respondents to do the following tasks:
- User needs to participate in a challenge, take actions, and play the mini games inside the challenge.
- User socialize with their in-app friends by challenging them to take actions.
- User opens leaderboard & checks in on their avatar.
- Imagine if the user already have enough points, so they can claim the rewards for them.
By observing user behavior & asking them the questions regarding the feature design, we are able to collect that:
- User have no idea what the avatar is for, it will be much better if there’s more information provided.
- Rewards like stickers won’t motivate user as much as other rewards such as physical rewards, vouchers, extra donations, etc.
- Does user have to take mini games? Is it mandatory?
- To make it more efficient, it would be better if buttons are provided within banners.
SEQ (Single Ease Question)
SEQ (Single Ease Question) is a form of post task questionnaire used to evaluate the usability of one product from a user experience by using only one question.
We used SEQ to ask our respondent about the usability of the eatures we have designed by asking this question:
From a scale of 1 to 7, how would you rate your experience using the features?
From the question above, we are able to receive these feedbacks from our respondent.
UI Iteration
After collecting insights from conducting usability testing, me and my team transform all the suggestions & problems into design solutions. We then implement that design solution into the prototype.
Conclusion
The prototype that we produced gained positive feedbacks from the test we have conducted. The new gamification features brings a new way for users to use the app more frequently and be involved in more campaigns. Although there’s still improvement needed, but the respondents have scored out prototype with such scores, proving they are satisfied with the new features added.
Reflection
Developing gamification features is a new thing for me. And I realize I need to do a deeper research and efforts to make a more innovative and creative gamification features. After making this case study, I realize how big the impact of our users hold, proven from the feedbacks I received from conducting usability testing. In the future, I hope I can do more testing to the fixed design to collect more user insights. This UX case study motivates me to be a better product designer.
That would be all from the writer! Thank you so much for taking the time to read this article. Feel free to reach me out through my Linkedin or my personal portfolio.