UX Case Study —Motivate the Users of Campaign.com with Gamification Feature

Elisa Oktaviani
6 min readNov 27, 2021

--

Hello, my name is Elisa Oktaviani. On this occasion, I redesigned the campaign.com application and did a User Experience research.

Disclaimer*

This project is part of the UI/UX training program implemented by Skilvul, for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Campaign.com is the Challenge Partner. I am not working for nor contracted professionally by Campaign.com.

About the company

Campaign.com is a company founded in 2015 by William Gondokusumo. Campaign.com is a social action platform built with the goal of delivering change and social impact. Campaign.com connects Organizers, Supporters and Sponsors who care about social issues.

Introduction

Inviting users to complete the challenge by taking some action for several days is not easy, with various challenges available and too many actions that need to be done make users feel bored and made them feel unmotivated.

In this project, we set a goal to offer new features, especially the Gamification feature, which aims to increase the users’ motivation to complete the challenge and see the ease of the idea we have created.

Role in Team

as UX Designer collaborating with Muhammad Fadli & Muhammad Zulfarhan. In our team, my responsibility are:

  1. Designing a UI Styleguide in the form of Color Primary, Theme Challenge, Header, Input Field, Button Day, Status Bar, and Home Indicator
  2. Designing UI on userflow Join Challenge, Claim donations & Points
  3. Prepare User Research stimulus documents
  4. and do User Research with respondents

Design Process

https://confiespace.com/temukan-ide-brilian-dengan-design-thinking/

In this case, we choose to use Design Thinking as our design process approach. Because with Design Thinking it is very useful in solving very complicated or unknown problems, by rearranging the problem from a human point of view, and creating lots of ideas in brainstorming sessions, and adopting a hands-on approach in making initial designs and do testing.

Define —

Pain Points

At this stage, we collect information and describe the problems faced by users when using the Campaign.com application. so we can determine what ideas we will make from some pain points

Pain Point

Then the next stage is How Might We, I determine what I can conclude from some of the Pain Points above. Then we describe the conclusions that can be drawn as follows:

Because Fadli points get the most votes, we make “Making users take more challenges by building gamification features” as a Solution Idea

Ideate —

In the next stage, I am here to contribute to pouring my ideas as shown below:

Solution Ideas

After that we explained the ideas that we had created, we explained the ideas we made, we went to the next stage, namely the Affinity Diagram. In the Affinity Diagram we group the ideas that we pour into several groups as shown below:

Affinity Diagrams

after grouping the ideas, we decide what things will be included in the yes do it now, do next, do last, and later categories.

next in the Crazy 8’s session, we drew into an A4 size HVS and folded it into 8 parts. While doing the process, I often have trouble with ideas what to make. After drawing, we presented the results and the purpose of the drawing of each frame.

Crazy 8's

Prototyping —

In the next stage, we create a prototyping starting from Userflow. The userflow in the application design that will be made is as follows:

after creating a userflow, we design a wireframe where the wireframe layout function will make it easier for us to create a User Interface.

Wireframe

on the prototyping step, we set the UI into a process flow that matches the Solution Idea and Userflow that have been created.

UI Styleguide

color palette
Typography
Button

The prototype below will be used during testing sessions with respondents

Testing —

At this step I do In-Depth Interview & Usability Testing, because UT is very useful to test whether the application that has been made is easy to understand by the user. Our User Criteria are:

  • 16–24 Years Old
  • Profession as a Student
  • Domiciled throughout Indonesia
  • Have good Indonesian and English skills
  • Have an interest in social media, technology, and e-commerce
  • Have an interest in the field of social activities
  • Have an interest in meeting new people
  • Have a good level of understanding of technology
  • Is preparing himself to enter the world of work

Then I do interview with respondents online using the zoom platform, during the interview session, according to the respondents, the application we made was quite good, starting from the flow home stage to the avatar. However, the respondents I interviewed this time felt that they were lacking in the Challenge Details page, because the Challenge Description button could not be clicked. So after an interview with the respondent I decided to add a design to the page, with the purpose that users can see a description of the challenge they want to follow

Detail Challenge & Description Challenge page

Furthermore, on the game PopUp page. Another respondent gave 2 UI feedbacks that must be changed, such as on the game PopUp page it is better to use a Button instead of a close button, with the purpose Buttons were added to make the design consistent and emphasize the actions that the user must take

PopUp Game page

on the Challenge Completed page it is better if the user doesn’t want to play the game then he is given two options, the Play or Finish button. So we redesign, Bonus Round/Mini Games are optional so users can end the challenge without participating in the bonus round.

Challenge Completed page

Furthermore we also redesign the Donation Success page, Claim Rewards page, and Avatar page.

On the Donation Success, buttons were added to make the design consistent and emphasize the actions that the user must take

Challenge Friend page

on the Claim reward page, we added a variety of rewards that allow users to be more motivated to take on more challenges.

Reward page

and the last one on the avatar page, we added an icon that serves to assist users in using the feature properly. Also added “Avatar Name” so that users can name the avatar with the name they want.

Avatar page

Closing —

Thankyou for Mas Hafidz Noor Fauzi who has provided useful knowledge while studying at Skilvul. Thanks to my Mentor, Kak Alvian Teddy Cahya Putra for every direction and input while working on this project, and also thanks to Fadli and Farhan. Without them this project would not have been completed.

Thank you for visiting, all the processes I wrote are correct. You can give me feedback so I can develop better

--

--

Elisa Oktaviani
Elisa Oktaviani

Written by Elisa Oktaviani

an Information System student who like learn something new

No responses yet