Halo everyone, wherever and whenever you are, i hope you all alright.. So today i want to share about my new UIX Case Study in building gamification feature in Campaign. And big thanks to our mentor Sarah Anindya Shofi to lead us, and guide us in our project at the beginning till last.
Disclaimer
This project is part of the UI/UX training program implemented by Skilvul for Kampus Merdeka program held by Ministry of Education, Culture, Research and Technology of Republik Indonesia. Campaign is the Challenge Partner. I am not working for nor contracted professionally by Campaign.
Let’s get started..
Background
I did this project with my team and they are Fihudamien and Febileniarismapa, began this project, we met the Challenge Partner virtually in zoom meeting and they gave us what we need to do, what is Campaign and its app. In here, we asked many question before we started the project. But first, let me explain what is Campaign.
About Campaign
Campaign#for change is a social start up based in Jakarta, Indonesia.
Campaign launched a social action platform that provides a safe and dedicated space for campaign organizers to challenge their supporters in social action and unlock sponsorship donations. Each campaign challenge consists of a series of social actions aimed at educating and developing new social habits in the daily lives of campaign users. ( Qouted from Campaign Website).
Campaign are available in mobile app and website. But to do the challenge, we have to download the app. So, what’s the challenge?
Objective : Campaign wants to increase engagement and retantion.
Target user : Socially minded user & socially aware user.
How : Campaign challenged us to built a gamification feature so people more interesting in doing campaign online and get more fun in Campaign App.
Start with Design Thinking
We start the design proccess with design thinking. Might be you all began to wondering why we choose design thinking?
Design Thinking is more effective for us that newbie in learning UI/UX. Furthermore, we are student college from many major who wants to learn UI/UX for the beginning and the easiest method we choose is Design Thinking.
Duration : Almost 2 months
Tools : Figma, Google Spreadsheet, Google Docs, Zoom, Google meet, Medium, Whatsapp
Now get in to the case..
Definition
What is Design Thinking?
Design Thinking Stage
This design thinking has a proccess method.
We go to the first step of design thinking, which is…
Emphatize
There are 2 kind of research. Primary research and secondary research. The example of primary research was on my first UIX Case Study — Design Thinking-Online Education App. In here, we used secondary research as our method. Secondary research ( or called Desk Research) is one of research method that involves using existing data that we collected and analyze the data from information we found such as analytical data of article, doing competitor analyze, from journal and etc. To do this secondary research, our mentor gave us a template that we can use. We started to collect the data by doing,
- Competitor Analysis
- Finding user feedback of the similiar application from App Store/Play Store
- Making resume of AMA Session with Challenge Partner to find what the Challenge Partner want us to do and solve
- Looking for related case in Medium, IEEE, ACM and etc
- Analytical data from goverment/research institute
Tools : Google Spreadsheet
To support this data, we also use primary research to gathered the feedback directly from users. We used some of Campaign’s user criteria to do this research.
User Criteria :
- 18–25 years old
- work as a student and fresh graduate
- domiciled in Indonesia
- Ability to speak Indonesia as a native language
- Good ability in English
- Have an interest in participating in social activities both offline and online
- having good communication skills
- easy to adapt new environment and people
- have good skills in operating mobile phones
- have adequete internet quality
Coz we didn’t have much time to find user, we decided to made polling on Instagram and… it worked. We found the users. Thanks Allah…
So, we shared the form that we’ve made before and we conclude that most of user have the same problem, which are
- When they picked a challenge, they didn’t do it immediately. So, they need to be notified to finish the challenge.
- They need something new about the challenge. Something more challenging and trendy.
- And many more..
After spending 4 days to did the research, we began to wrote it down in Google Spreadsheet. Check the result here.
Define
After we collected the data, we move to the second stage of Design Thinking.
The purpose in this stage are determine the object of the problem and identify the user needs. At this stage, we define each problem from user. The result data of secondary and primary research showed us the problem that still in story form. And it is our job to make it more simple and wrote it down in pain point.
Tools : Figjam
We discussed and brainstormed the pain point based on the user problem we found. Each member wrote pain points that they found. The pain points that we found were,
- User confused when using the apps which not user friendly for him/her.
- User need to be notified when did a challenge
- Rarely user did the challenge cause many works to do.
- User felt the challenge not trendy.
- User felt bored when used the apps in 1–3 times
- Many more..
After we define the pain points, it’s time to make How Might We ( HMW). In HMW, we discussed and wrote the question based on pain points. So then, when we finished to wrote the question, we started to made a vote. We vote what kind of question that we want to solve (of course, include what Challenge Partner wanted us to solve).
According to the vote,How Might We that we choose to solve is
How to increase user motivation so that they don’t get bored in doing challenges?
Ideate
After we found the HMW we wanted to solve, the next stage was ideate. In ideate, we brainstormed the idea solution. Find the idea, even if it’s the craziest idea and you felt it is impossible to make it real, just write it down. As long as the idea can solve the problem.
The first step in Ideate stage was finding Solution Idea and write it in Figjam.
Each of us here add our best solution to solve this problem in HMW form
How to increase user motivation so that they don’t get bored in doing challenges?
Here are the solutions:
- Giving point feature when the time user finished the challenge
- Notification feature
- Adding reward feature weekly or daily
- Leaderboard feature
- Flash challenge feature
- Hunting challenge feature
- Progress tracking graphic feature
- Pick random game feature
After we brainstormed the solution idea, we gathered it and classified the idea related to their function. It’s called Affinity Diagram.
We divided it into 8 section feature, they are
- Leaderboard feature
- Gaming challenge feature
- Hunting story challenge feature
- Grab point feature
- Badge feature
- Notification feature
- Chat feature
- Tracking progress feature
After we breakdown the idea in affinity diagram, we start to prioritize which one of these idea we want to design first according to user value and effort.
This phase divided in 4 categories, which are
- Yes, do it now ( we did this section)
- Do next
- Do last
- Later
If you want to know more about these, you can check my UIX Case Study — Design Thinking-Online Education App. After we found out what kind of idea we want to design first, we decided to choose Yes, do it now category because the idea is the main solution to solve the problem. So, we create our sketch first in 8 minutes in
Tools :
- paper divided in 8 sections, 1 section for 1 page/screen,
- pencil/pen
- eraser
It called Crazy 8's.
After we drew some sketch, we voted which screen we want to transform to High Fidelity ( UI ). Before we do that, we have to create how user will through the flow of these features. So, we create User Flow.
Once we create the user flow, the idea kept coming realistic. So, in here, we created 3 user flow.
First : Flash Challenge, it coming from HOME (page) and user can see the detail of challenge and pick one they want to start.
Second : Hunting Challenge, it coming from HUB (page) and user can start to began the game by selected which theme match them. If you are in the beach, you can start pick “beach” theme. And point the camera to find the hidden challenge.
Third : Progress Tracking and Insight Point Feature, it coming from PROFILE (page) and user can see how many points did they get, and you can set the daily setting too. We also add point graphs, so it could be easier to track the progress.
Prototype
Once we finished created the user flow, we had to design the wireframe.
Before we design in High Fidelity or UI, we have to built the wireframe first. So then, we have the big sketch before design in UI. In wireframe, we listed what could be involved each feature wireframe.
After we built the wireframe, we start to make the style guide. In this style guide, we used the Campaign design system, and made some ours to fulfill our needs in design UI later.
These style guide as component helped us in build our UI.
We also add the link of prototype. You can try it. Prototype is form of animation transition before we go to develop.
Testing
After we finished the prototype, we did testing 3 users who have used the Campaign application before. In this test, there are several things that must be considered in finding a user to get appropriate feedback. Before that, we also created a user research stimulus to do usability testing. The method we use is SUS Score.
Tools we have to prepared : Google meet/zoom, Google Spreadsheet, Google Drive, Google Docs
To prepare the testing, first wrote a SUS statement and the scale to be asked. Then, prepare research scenario in Google Docs and write down the record data usability testing in Google Spreadsheets.
Click research scenario if you want to see it. After that, prepare a medium to conduct this interview and usability testing. Use Google meet or Zoom meeting. We here agree to use Google meet. In the interview process, user will be asked to test the prototype that has been prepared. There were 4 tasks/prototypes that user have to test. For each feature, user’s constraints and opinions will be asked about the feature. and after being asked, we gave a sus statement and ask the user to answer according to the circumstances. Here are our SUS ( System Usability Scale) Score statement.
After we give the statement to the user, the user will give an answer in the form of a scale from 1–5 with the information,
The user will state on what scale according to the wishes and needs of the user. Then write down and calculate the scale that has been given by each user with calculations,
- The SUS score obtained from the sum of the scores on each question will be multiplied by 2.5.
- In odd-numbered questions, each question value obtained from the user’s score will be deducted by 1.
- In even-numbered questions, the final score is obtained from the value of 5 minus the question value obtained from the user.
After calculating, the results obtained for these features is Acceptable.
Design Iteration
After testing, of course we will get some feedback and criticism from users on the features that we make. Improvements to the user is called iteration design. Here are some iterations we did,
Flash Challenge Iteration
This iteration because some users have difficulty understanding the prototype transition and are confused when looking for challenges.
Tracking Progress and View Point Iteration
We did this iteration because the user wants to know and add daily notifications/reminders, so an average time is made for the user to be able to track himself how much time has been spent when using Campaign.
Hunting Challenge Iteration
In this iteration, the user was confused when they have collected the challenge, they didn’t know where to click in order to see the challenge that has been hunted.
As you can see, I changed part of illustration into a basket/cart icon with the aim of accommodating the challenges that have been successfully obtained.
This Hunting Challenge problem is also due to using the camera feature. So for this part, I didn’t do iteration because that design was only as an example if the user travels and points the camera. The image in the design is taken as if the user is opening and point the camera at the intended place and getting a hidden challenge.
If you want to see the result of this usability testing, click here.
Conclusion
Finally we go to conclusion of this Case Study. In the process of making this gamification, we use the design thinking method. From doing research, then dissecting user problems, then solving problems by providing solution ideas. From the solution idea, then a rough sketch of each feature is made. From this sketch, it was finally developed by creating user flows, wireframes and UI designs. Testing activities carried out on the prototypes of these features have a good impact. The results of the calculation of the SUS score indicate that these features are Acceptable. Although there are still some shortcomings in this feature, hopefully in the future it can be improved for the better.
Thanks to the teammates who have provided the best ideas to solve this Gamification problem. See you in the next Case Study. Bye..
