Case Study — GenteelBuying Apps

Tiara Shen
9 min readFeb 28, 2023

This project is worked on during the mini boot camp of IT-CAMP X FOWTEDU 2023 from UPN Veteran Jawa Timur.

Introduction

GenteelBuying is an online shopping site of the customer-to-customer type that focuses on virtual product transactions such as items, accounts, streaming apps, voucher codes, video game currency, and various vouchers. In transactions, GenteelBuying users generally utilize the transaction features in the game. GenteelBuying acts as a third party, or escrow, responsible for accommodating funds from the buyer until the seller finishes sending the order.

Goals

As the most extensive digital product marketplace, digital entertainment is necessary. Therefore, transaction security, complicated payments, and high prices should not hinder enjoying your favorite video games, music, movies, or series.
Therefore, GenteelBuying is here as a solution for digital entertainment lovers that guarantees security, convenience, and affordable prices. All of this is to realize our vision: Digital entertainment for everyone.

1st Week

Introduction to UI/UX — Mini Bootcamp
Introduction to UI/UX — Mini Bootcamp of IT-CAMP X FOWTEDU 2023

I used the Design Thinking method in this case study as a design process framework. This method consists of 5 phases: Empathize, Define, Ideate, Prototype, and Test. In this project, I took the role of Full Stack Designer because I did all the processes by myself (due to limited time & resources), and there was no cooperation from other team members.

  • UX Researcher: create a research plan, develop survey questions, distribute them, conduct interviews, conduct benchmarking, analyze data & findings, conduct Usability Testing, etc.
  • UX Designer: categorize problems, create personas, ideation, prioritization, create task flow, and create wireframes.
  • UI Designer: explore inspiration, build a style guide, design Hi-Fidelity, and create a prototype.

The Design process used in this case study

Design Thinking Process

Empathize

Empathy allowed me to be open to the experiences of people from different backgrounds and see things from their perspectives. It is an essential part of user experience that requires me to immerse myself in the user’s experience and thoughts to uncover deep needs and insights. I started my research by checking through a lot of articles, books, and videos to learn everything I needed to know about blockchain technology and UX issues faced by users in this industry.

Research Plan

The research plan was created as a guide and focus for the research to be carried out.

Research Goals

  1. Identify users’ daily activities, behaviours, views, challenges, needs, goals, and motivations in buying items, accounts, streaming apps, voucher codes, video game currency, and various vouchers.
  2. Understand the complete process of users buying items, accounts, streaming apps, voucher codes, video game currency, and various vouchers.

Research Methods

  1. Qualitative: In-Depth-Interview (5 participants): to get the pain and gain of people who have purchased items through similar apps.
  2. Quantitative: Online Survey (google form): to validate users’ desired features.

Research Participant

  1. Male/female (17 y.o — 50 y.o).
  2. Ever have purchased items, accounts, streaming apps, voucher codes, video game currency, and various vouchers.
    Indonesia domicile.
  3. Domisili Indonesia.

Qualitative Research : In-Depth-Interview

I used Google Meet to conduct the interviews. I asked them about their perceptions and concerns about their experience of how they top up and transfer. Here are the 2 roles :

  • The person who topped up the money.
  • The person who transfers money.

Participant Demography

  • Total participants: 10 people.
  • The age range of participants: is 20–57 years old (20, 21, 22, 24, 24; 27, 43, 51, 57).
  • Location : Surabaya, Tuban, Cikarang, Bandung.
  • Business : college, work, housewife, business.
  • Frequently used applications : Itemku, Bukalapak, Tokopedia.
  • Reference applications to make transactions : Itemku, Bukalapak, Tokopedia.

In-Depth-Interview Script

  • In-Depth-Interview Script for the top-up feature.
  • In-Depth-Interview Script for transfer feature.

Research Summary and Insight from Quantitative Research : Online Survey

From the survey, we obtained data from 98 users, the majority of whom are millennials with an age range of 16–25 years and are still in high school, college, or working.

However, out of 98 users, only 63% have ever made top-up and money transfer transactions through an application platform intermediary. More precisely, only 62 users said yes, and 26 others did not.

Of the total 62 participants, they rarely make top-up and money transfer transactions through online platforms. Participants also mostly make top-up and money transfer transactions to family and closest friends (with total votes for the family: 47 and most relative friends: 54).

Participants prefer to make top-up and money transfer transactions only to those closest to them, supported by the fact that 63 (76%) participants chose to agree and strongly agree. Participants also prefer to make top-up and money transfer transactions through messenger applications (78%).

Participants are unhappy with making top-up and money transfer transactions through public social media. Participants also do not mind if someone makes top-up and money transfer transactions through this method.

Benchmarking

I conducted benchmarking from a competitor, Itemku. The aspects I analyzed from the benchmark included accessibility, interaction and features. Itemku is a safe and trusted online virtual game item-buying and selling site. Itemku’s product specifications are game top-ups, credit purchases, streaming app purchases, and voucher codes.

Define

In this stage, I put together the information I created and gathered during the Empathize stage. This is where I analyzed and broke down my research insights and observations into chunks in order to define the core problems. I defined my problems and whom I’m solving problems for.

Affinity Diagram

Affinity Diagrams are used to organize information and are the output of Affinity Mapping. Affinity Diagrams help organize information into groups of similar items. Affinity diagrams help analyze qualitative data or observations. The first step I did was to group the captured information based on similarity.

Affinity Diagram

After grouping, I repeated the process of looking for patterns in the observations that were related and grouped, creating groups for each way and giving names to each course. I finally found the final design and stated what was found in each pattern.

User Persona

User Persona

Journey Map

Customer Journey Map

Competitor Analysis

Competitor Analysis

2nd Week

User Flow — Mini Bootcamp of IT-CAMP X FOWTEDU 2023

Summary

User flow is the flow or stages of using a feature. A good flow is a flow that can guide users in using the product.

Wireframe is a framework used to design a page or application such as arranging various components. Used to organize the initial layout in a design. Wireframes can be in the form of drawings using markers or using software.

Ideate

In this phase, I had already understood the user’s needs, analyzed the research insights and observations and I was ready to start generating ideas. The ideation stage required a lot of thinking, I had to brainstorm and identify possible solutions to the problem.

User Flow

User Flow

After getting all the information and data from the users and identifying the problem, I can draw user flow and wireframes to ensure that I am taking care of users’ pain points with the current transaction process. Below is some initial rough user flow to give a more user-centered prototype.

3rd Week

Style Guide — Mini Bootcamp of IT-CAMP X FOWTEDU 2023

Summary

Style Guides contain standards, principles, and rules that help designers stay visually consistent and work more efficiently. UI Design is the product's appearance that will be shown to the user. Prototyping is made to help UI/UX designers create visualizations, elements, and interactions of a desired design representation.

Wireframing

Wireframe is a framework for organizing an item in the application. This wireframe creation is done before prototyping. This is a wireframe for each flow of the GenteelBuying application features.

Low Fidelity

Low Fidelity

Colors and Typography

Colors and Typography

High Fidelity

Sign Up / Sign In

The goal Sign In flow is to verify information about the user and create a security code. It required a simple and quick process so the user doesn’t get discouraged and turn off the app.

Sign Up & Sign In

Home

Home

Transfer

Transfer

Top Up

Top Up

Account, Balance, and Transaction History

Account, Balance, and Transaction History

Prototype

Prototype of GenteelBuying

Test

To test the accessibility of the product, I conducted Usability Testing on 3 participants using the Unmoderated Remote Usability Testing methodology. The tool I used was Maze.

In this Usability Test, the features that will be tested are Sign In / Sign Up, Top Up, and Transfer. With a total of 4 tasks:

  1. Sign Up
  2. Sign In
  3. Top Up
  4. Transfer

Usability Metrics to measure Effectiveness (Effectiveness)

Efficiency can be represented as a percentage using the equation :

Measurement Results

The results of measuring the effectiveness of 5 tasks tested on 3 users are shown in the following graph with a description of the percentage calculation scale. The results of the test show that all users can complete all tasks.

Effectiveness

Usability Metrics to measure Efficiency (Efficiency)

Efficiency can be represented as a percentage using the equation :

The Efficiency measurement results on 4 tasks tested on 3 users are shown in the following graph with a description of the calculation scale: goals/minute. The lowest results were in the Register task test. This also affects the number of screens or tasks the user must complete. The user must fill in personal and onboarding information at the sign-up stage. The sign-in task obtains the highest result because it only needs to enter username and password information. They were then followed by top-up and transfer features.

Time-Based Efficiency

Outcome & Lesson Learned

Based on this case study, I have learned much about applying UX methods and principles in design thinking. Starting from researching, analyzing data, creating flowcharts, designing UI, conducting usability testing, and presenting the results.

Although I have learned and implemented many things, I still face many difficulties and shortcomings that need improvement, such as pain points and scenarios that have not been thoroughly thought out, interview data, and usability tests that may not be representative. Gen Z still dominates demographics, and usability testing needs to be done in more depth. Still unable to feel the impressions and expressions of users, etc.

Here are some key points that I can provide based on my experience doing this UX case study :

  • The first solution we come up with is not necessarily the best.
  • In creating a design, we need to consider many important aspects, including the business, technology efforts, and external stakeholders (in this case, the internet provider), and also not forget to consider existing competitors.
  • Don’t be a feature creep. I realized that adding features would add unnecessary complexity for users or designers. So, focus on the essential to-do tasks.

--

--