Binar

My experience with Binar app surfaced pain points early on, I immediately identified several pain points that prompted a broader question: what friction are other students experiencing? So, my primary focus centers on engagement strategies that sustain reading completion, particularly given that Gen Z's attention span presents a significant challenge to traditional learning formats.

GROUP PROJECT

CLASS ASSIGNMENT

MOBILE

VIEW PROTOTYPE

VIEW FILE

My role

Lead and managed product design team of 4.

User research, User Interface Design, Prototyping.

Discovery & Research

Baseline Binar

Version 6.10.0

Product design landing page

Academic material explorer

Reading material

Quiz

Completion

Brewing interview questions

First we define our goal of research involves clarifying user pain points and needs. Brew questions into broad stuff and see from zoomed out perspective.

Interview synthesis

7

User persona

Based on our interview findings, we identified 1 primary user persona: a young Indonesian student at Binar Academy learning pre-class academic reading asynchronously.

Asking the right question

A recent 2024 study[1-2] by Snapcart TASC online survey with 591 Indonesian young adult (Gen Z & Millennials age 28-30 years old) discovered that 88% have interest in reading, with their preferences such as:

  1. ​

60% Gen Z prefer reading online contents like e-book, online short stories or comics. Meanwhile only 45% of Millennials share this preference.

  1. ​

34% Gen Z and 49% of Millennials enjoy offline reading materials.

  1. ​

6% Gen Z and 5% of Millennials using audiobooks making this format less popular.

In this study, respondents also said their habit in reading are as follows:

​

  1. Afternoons or Nights (38%): Most young Indonesians prefer reading after school or work, usually in the comfort of their homes.
  2. During Work or School Breaks (23%): A significant portion utilizes breaks for reading.
  3. While Commuting (15%): Public transportation provides a convenient time for some to catch up on reading.
  4. Weekends (13%) and Holidays (10%): Some prefer reading during their leisure time on weekends or vacations.

​

With favorite fiction genres:

​

  1. Romance leads among Gen Z (41%) and Millennials (24%).
  2. Comedy appeals more to Millennials (22%) than Gen Z (16%).
  3. Fantasy more preferred by Gen Z (13%) and Millennials (18%).

​

However, this high interest of reading does not translate to strong reading comprehension abilities, especially in educational and professional contexts. Meaning referring to the conscious, deliberate techniques readers use to understand and process complex texts deeply, not just passively reading words but, actively managing understanding while reading.

​

The claim is backed by study[3] in 2024 examined metacognitive awareness among 1.412 Indonesian university students engaged in online reading, showing differences in reading strategies based on:

​

  1. Gender.
  2. Reading media preferences.
  3. English proficiency levels.

​

The research highlights that while young adults are reading more (especially online), they may not have developed the strategic comprehension skills needed for academic and professional success.

​

Another study[4] published in 2020, examined the reading comprehension habits of 307 Indonesian students at Atma Jaya Catholic University in Jakarta. The findings provide further insight for our team understanding. The data collected from this study can be summarised as follows:

  1. ​

38% tend to be lazy to read.

  1. ​

33% lack motivation to read.

  1. ​

3% visit the library for reading purposes, while 70% of them go to the library for learning and discussion instead of reading.

For reading intensity they commit 1-2 hours daily, but for reading volume as in book completed for the past 2 months:

  1. ​

43% read only one book.

  1. ​

27% read none at all.

  1. ​

21% read 2 books.

  1. ​

9% read >2 books.

Averaging 1 book per 2 months, and then spend 61% more time on gadgets than reading. While they spend 61% more time on gadgets, this time is primarily used for entertainment purposes. Only 20% of this time is dedicated to comprehension for assignments.

​

The time they spend on gadget are around 5-14 hours a day to use them on:

​

  1. Download novels and e-books.
  2. Access online resources.
  3. Watch YouTube and films.
  4. Use social media.

​

With 91% reading location of them read at home where they likely access both digital and physical books.

References:

  1. ​

Snapcart research part 1

  1. ​

Snapcart research part 2

  1. ​

Research on MARS

  1. ​

IRACOS

Knowing the fact that statistically young Indonesian has low reading comprehension, even though the literacy is high.

​

With the goal in mind to enhance retention and completion rates while ensuring the process remains enjoyable, we throw open-ended questions into the team to frame the problem better to spark ideation and explore multiple creative solutions.

​

We used design thinking of How Might We (HMW) to frame the problems.

​

  1. How might we enhance retention rate without making user feeling like a duty?

​

  1. How might we used young Indonesians existing interest in romance, comedy, and entertainment as a leverage to build comprehension skills?

​

  1. How might we reframe reading as an enjoyable social activity rather than a solitary academic task?

​

  1. How might we design reading experiences that feel like play or discovery rather than work or studying?

​

  1. How might we break reading material into chunks to make it feel achievable in a single sitting versus overwhelming them?

​

  1. How might we design to train metacognitive awareness as an environment to help young adults to notice when they don't understand?

​

  1. How might we use interactive elements (visuals, audio, animation, and vibration) to deepen comprehension without distraction?

Path finding into insight

Summary of the 1-on-1 interview was narrowed down using affinity mapping which led to the identification of 3 key features to develop. We then explore moodboard to anchor our vision prototype and work from there, our team utilize the Crazy 8s method to generate and explore ideas through sketches.

Live code

Live code standby

Wrong answer

Correct answer

Moodboard reference

W3Schools

Taking concept for live code on how to put different type of question together with code in line and keep them interactive.

Multiple choice

Fill the gap

Write and live

Stack Overflow

Taking reference for forum discussion about Q&A in a forum and the mechanism behind which answer to push.

Asking question

Answer question

YouTube

Taking reference for academic video on template and icon placements.

Horizontal fullscreen video

Apple Note

Taking reference from Apple note on how to display text format.

Apple photo markup

Taking reference from Apple photo feature when using markup on how feature is displayed and interact, then to implement based on what we need.

Duolingo

Level explorer

Section complete

Loading content

Multiple options

Correct answer

Wrong answer

Lesson complete

Login streak

Daily quest

Multiple daily quest

Leaderboard post lesson complete

Leaderboard

Drawing inspiration from Duolingo’s user engagement strategies, we can enhance user attention within its experience.

​

This includes maintaining the simplicity of the Duolingo landing page to encourage exploration, ensuring students feel intrigued rather than overwhelmed as they scroll deeper.

​

An engaging interactive quiz to enhance learning experiences.

​

Displaying user progress upon task completion and offering words of encouragement can boost users’ confidence in their achievements.

​

Implementing an experience points (EXP) system that rewards users for their progress investment, along with a leaderboard to appreciate those who dedicate more time to academic reading pre-class can stimulate users’ ambition through recognition.

Information architecture

The final challenge in our study is to enhance the entire academic reading experience in Binar's pre-class setting. We recognize that users may require new features as we dive deeper into our research.

Our team is focused on developing a new approach to allow users to enjoy study asynchronously. This means completely transforming the previous user interface for accessing academic materials, while still keeping the information architecture similarly intact.

We seamlessly integrate new features into the existing information structure.

Live code

Live code standby

Wrong answer

Correct answer

Live code standby

Wrong answer

Correct answer

Feedback hunting

To dismantle our team’s echo chamber, we hunt for feedback not only on the three main features (Live code, Forum discussion, Academic video) we need to develop but also on the entire reading experience, quiz, schedule, leaderboard, and we welcome peripheral ideas from the interviewees.

Summary

8

High fidelity

As feedback hunting finished and clock is ticking, we used priority matrix on all feedback to meet MVP (minimum viable product) into 4 category:

Important

Not important

Urgent

Important

&

Urgent

Not important

&

Urgent

Not urgent

Important

&

Not urgent

Not important

&

Not urgent

With the low-fidelity foundation in place, our team moved forward to craft high-fidelity prototype. Replacing placeholders with real visual elements including colors, typography, and interactive components. Producing a prototype that closely represents the final product experience.

Live code

Live code standby

Wrong answer

Correct answer

Print(“Hello world!”)

Typing code goes here

Check

​

Aa

Next

9:41

Live code standby

10

Print(“Hello world!”)

Print”(Hello world!)”

Check

​

Aa

Next

Incorrect

Ulangi

9:41

Wrong answer

Print(“Hello world!”)

Print(“Hello world!”)

Hello world!

Check

​

Aa

Next

Correct

Next

9:41

Correct answer

UT & SUS

After Usability Testing (UT) using tool called Maze with guided path to gain insight on user struggle, confusion, and failure on this fresh baked prototype, we perform System Usability Scale (SUS) to measure how useable it is numerically.

Anggar

Disagree

Agree

Was text on question, code example, and terminal in the live code easy to understand?

1

2

3

4

5

6

7

8

9

10

Was it easy to find live code’s button?

1

2

3

4

5

6

7

8

9

10

Was instruction in live code easy to understood?

1

2

3

4

5

6

7

8

9

10

Was highlighting the text as clue on the wrong part when writing in live code easy to spot and understand?

1

2

3

4

5

6

7

8

9

10

Was the color theme pleasant to see on live code?

1

2

3

4

5

6

7

8

9

10

Was live code with a mobile app comfortable to use to write basic programming?

1

2

3

4

5

6

7

8

9

10

Was the interface on live code friendly and easy to understand?

1

2

3

4

5

6

7

8

9

10

Was the pop-up of correct and incorrect in live code clear to understand?

1

2

3

4

5

6

7

8

9

10

Was your experience pleasant when using live code?

1

2

3

4

5

6

7

8

9

10

Were it easy to use accessibility buttons in live code?

1

2

3

4

5

6

7

8

9

10

Was the screenshot interface in forum discussion easy to use?

1

2

3

4

5

6

7

8

9

10

Was the color theme on the forum discussion contrast-friendly with the surrounding colors?

1

2

3

4

5

6

7

8

9

10

Was the icon of forum discussion easy to find?

1

2

3

4

5

6

7

8

9

10

Was the interface on forum discussion easy to understood?

1

2

3

4

5

6

7

8

9

10

Was it easy to make question through forum discussion?

1

2

3

4

5

6

7

8

9

10

Were FAQ informations in forum discussion easy to read?

1

2

3

4

5

6

7

8

9

10

Were the master forum discussion button in forum discussion easy to find?

1

2

3

4

5

6

7

8

9

10

Was the icon master forum discussion easy to find?

1

2

3

4

5

6

7

8

9

10

Were the display on questions and replies on master forums discussions easy to understand?

1

2

3

4

5

6

7

8

9

10

Was it easy to reply in master forum discussion?

1

2

3

4

5

6

7

8

9

10

Were the buttons on academic video easy to access?

1

2

3

4

5

6

7

8

9

10

Was the timestamp on the academic video clear to see?

1

2

3

4

5

6

7

8

9

10

Was the color contrast-friendly on academic video to be seen?

1

2

3

4

5

6

7

8

9

10

Was it easy to find academic video?

1

2

3

4

5

6

7

8

9

10

Was the interface easy to understood when you watch it?

1

2

3

4

5

6

7

8

9

10

Was the icon to minimize academic video easy to spot?

1

2

3

4

5

6

7

8

9

10

Was the timestamp on academic video easy to scrub?

1

2

3

4

5

6

7

8

9

10

Did turning video orientation from portrait to landscape go smoothly?

1

2

3

4

5

6

7

8

9

10

Was interface on academic video easy to used?

1

2

3

4

5

6

7

8

9

10

Did you have a good experience when accessing academic video?

1

2

3

4

5

6

7

8

9

10

Score average

Q

Live code

Forum discussion

Academic video

1

8,62

6,75

9,37

2

9,25

6

9,12

3

9,12

8

8,87

4

9,25

8,12

9,37

5

8,75

9,37

9,62

6

8,5

9,25

9,75

7

9

9,50

9,12

8

10

8,25

9,12

9

8,62

8,75

9

10

7,75

8,87

9,25

Avg

8,89

8,29

9,26

With those feedback and scores as a mirror to tell how well the interface and experience were, we are well aware that many things still need to improve. We call it a day and close Binar app MVP revamp version 1.0.

Exhibition space

A showcase transformation of Binar app, before and after.

Reading material landing page

Previous reading material landing page

Revamped reading material landing page on bronze chapter

Continue reading on diamond chapter

Start a lesson in chapter bronze

Class schedule

Class schedule

Schedule

Forum Discussion Week 1

Zoom ID

378-109-9343

Hari ini, 12 Desember 2023

19.00 - 22.00 WIB

Join Zoom

Send link

Forum Discussion Week 2

Zoom ID

378-109-9343

Kamis, 14 Desember 2023

19.00 - 22.00 WIB

Join Zoom

Send link

Design sprint

Zoom ID

378-109-9343

Sabtu, 16 Desember 2023

16.00 - 19.00 WIB

Join Zoom

Send link

Forum Discussion Week 4

Zoom ID

378-109-9343

Selasa, 19 Desember 2023

19.00 - 22.00 WIB

Join Zoom

Send link

Forum Discussion Week 5

Zoom ID

378-109-9343

Kamis, 21 Desember 2023

19.00 - 22.00 WIB

Join Zoom

Send link

Design sprint

Zoom ID

378-109-9343

Sabtu, 23 Desember 2023

19.00 - 22.00 WIB

Join Zoom

Send link

Schedule large version

Forum Discussion Week 1

Hari ini, 12 Desember 2023

19:00 - 22:00 WIB

Forum Discussion Week 2

Kamis, 14 Desember 2023

19:00 - 22:00 WIB

Design sprint

Sabtu, 16 Desember 2023

16:00 - 19:00 WIB

Forum Discussion Week 4

Selasa, 19 Desember 2023

19:00 - 22:00 WIB

Forum Discussion Week 5

Kamis, 21 Desember 2023

19:00 - 22:00 WIB

Design sprint

Sabtu, 23 Desember 2023

16:00 - 19:00 WIB

Schedule

Schedule compact version

Revamped student schedule

Reading material

Reading material on topic 1

Revamped reading material interface

Quiz in reading material

Quiz

Quiz interface with darker palette

Experience points in leaderboard

Quiz

Leaderboard system to boost completion & retention

Live code as a part of reading material

A simple preview for code output

Forum discussion

Forum discussion for all student and facilitator to engage

Assets

Primary colors

Purple

723573

Blue

373571

Yellow

F7B91D

Red

A73C35

Green

31BD57

Neutral colors

Black

000000

Black 100

222222

White 500

888888

White 400

AAAAAA

White 300

CACCCF

White 200

E8E8E8

White

FFFFFF

Blue

Blue 100

000000

Blue 200

222222

Blue 300

888888

Blue 400

CACCCF

Blue 500

E8E8E8

Purple

Purple 100

310238

Purple 200

4B0457

Purple 300

8E318F

Purple 400

BD41BF

Purple 500

BB86FF

Purple 600

C98FCC

Purple 700

EED3EE

Purple 800

FEE7FF

Orange

Orange

FFA600

Orange 100

FFC800

Green

Green

15BE26

Green 100

59D345

Gradient

Red

F45A51

A63C35

Yellow

FFCB55

FFA600

Blue

2589C2

1B72A4

Effects

Button

Inner shadow

X

Y

Blur

Spread

0

-3

0

0

#000000

25%

Floating soft

Drop shadow

X

Y

Blur

Spread

0

0

3

0

#000000

40%

Floating hard

Drop shadow

X

Y

Blur

Spread

0

4

7

1

#000000

25%

Spread

Inner shadow

X

Y

Blur

Spread

0

0

4

0

#000000

70%

Blurry

Background blur

Uniform

Blur

4

Typography

Poppins

is one of the font, with no vertical trim and letter spacing 0%. Starting on Caption at <12 font size, will then letter spacing be -3%.

Open Sans

is the other font, with no vertical trim and letter spacing -3%.

Size

Sentence

24

24

24

20

20

20

16

16

16

14

14

14

13

13

13

12

12

12

10

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Weight

Sentence

Regular

SemiBold

Bold

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Components

Button

Text here

Text here

Text here

Text here

Text here

Text here

Text here

Text here

Text here

Text here

Text here

Text here

Chapter button

Topic 1

Hello world!

Topic 1

Hello world!

Stepping stone button

Medal

Icons

Accessibility button

Aa

Aa

Aa

Aa

Aa

Aa

Accessibility

icons

Aa

DD

Heart

Bookmark

Cooldown

1

3

2

4

5

Stars

Schedule info

Forum Discussion Week 1

Zoom ID

378-109-9343

Hari ini, 12 Desember 2023

19.00 - 22.00 WIB

Join Zoom

Send link

Forum Discussion Week 2

Kamis, 14 Desember 2023

19:00 - 22:00 WIB

Search box

Vote

Forum button

My post

My post

Quiz button

A

Text here

A

Text here

A

Text here

A

Text here

A

Text here

A

Text here

Impact

My redesign’s expected impact:

​

  1. Retention and completion rate increase with gamification experience.
  2. Comfortable experience with a night-friendly interface for people that study at night.
  3. Able to seek help when stuck on a dedicated forum page.
  4. Fun way to explore academic material and schedule.

​

The impact of this design hasn’t been implemented as it was a study case, but students’ responses were genuinely happy for the gamification that our team proposed for the Binar app. However the real impact on our team is growth, understanding, organizing, and finding ourselves better at teamwork than at the beginning of this revamp.

Key takeaway

Organizing human: Orchestrating a team while developing a product simultaneously proved challenging, as it demands significant brain core to multitask. Through this experience, I learned that individuals perform better when tasks are narrowly focused. Although our product manager was also a student and still learning, the absence of a role in managing team tasks has motivated me to step up and lead the team, despite my limitations in multitasking.

Organizing assets: I’ve learned that keeping track of component variations, ensuring uniformity in asset template (in terms of naming & structure) across components. A little action to organize and group them effectively contribute to a preventable disaster.

Version control: I realized that each version and each step contains a story we haven’t yet discovered. Therefore, I’ve learned to preserve each moment with a version control mechanism to call back and tell a much better story later on.

Carving canvas: Our team often sketch disproportionately for a first-hand idea. This experience taught me that to create an accurate ratio between sketch and the low-fidelity, a blank viewport template serves as a guide.

VIEW PROTOTYPE

VIEW FILE

More projects →

↑