UI/UX Portfolio - Prabudewa Sebayang

9:41

UI/UX

POR TFO LIO

of -2021 0 2 0 ct 2 Proje d e t c Sele yang Seba a w ude Prab

Start

Curriculum Vitae

Hi, i’m Prabudewa Sebayang, an UI/UX design enthusiast & architecture graduate. I’m always craving for design something and the process behind it. The switching world will be the food to my curiosity, on how to make a design relatable to the society.

Jakarta, Indonesia +62 878 8220 4801 praboedewa@gmail.com

@praboedewa @boesantara /praboedewa

SKILL

EDUCATION

Tools

august 2015 - october 2019

Figma Ad. Photoshop Ad. Illustrator Sketchup

BANDUNG INSTITUTE OF TECHNOLOGY (ITB)

UI/UX

UI/UX Design UX Öesearch Prototyping Usability Testing

Bachelor of Architecture - B.Arch School of Architecture, Planning and Policy Development (SAPPD) october 2020 - february 2021

PURWADHIKA DIGITAL TECHNOLOGY SCHOOL UI/UX Design Full Time Course

Languages

English Indonesia

INTEREST Digital Design Photo Manipulation Urban Sketching Watercolor

WORK EXPERIENCE Internship june 2019 - august 2019

PT WIJAYA KARYA BANGUNAN GEDUNG TBK as Staff Assistant in Engineering, Production and Quality Control Division

Transpark Cibubur Project, Depok Internship november 2019 - february 2020

PT SUMMARECON AGUNG TBK - SMKG As Facility Coordinator in Building Management and maintaining the quality of Summarecon Mall

Kelapa Gading, Jakarta

01

0=

UI/UX Case Study

UI/UX "!ploration

Godistance

Cleverbook for Minecraft Revamp

Cont

Selected project 2020-2021

03

0L

UI/UX Exploration

UI/UX "!ploration

BCA Mobile Revamp

tent

1 of Prabudewa Sebayang

Instagram Revamp

01 UI/UX Case Study

Godistance

UI/UX Ca

GOJEK FI

Gojek is a mul best sub-apps era that solves them anymore distance trave important occ limitations tha

I made a Case limitations, as Solutions of pe

Role

UI&UX D

Duration Tools

1m

Figma

ase Study

IRST LONG DISTANCE TRAVEL SERVICE

lti-service platforms, with 29.2 millions active users in Indonesia. Two of their s, Goride and Gocar, are The on-demand transportation service in this modern s people needs on every short trips. We can’t even imagine our life without e. Along with the fast development and needs of improving accesibility, Long el is the new normal for everyone, especially those who work in the city or do cassion. But, Goride and Gocar themself still have maximum distance at prevent them to be used for a long distance travel.

e Study with Godistance : Gojek long distance travel service with no maximum s part of my 2urwadhika Startup and Coding School Jinal 2roject, to be The eople’s need of travel.

Designer

month

a

00

Background Contex

What are the existing features of Gojek?

TRANSPORT AND LOGISTICS

9:41 9+

Promo

Home

Chat

Your Favorites Order the best

GoRide

1

Edit

nas or in town...

GoDistance

GoFood

GoCar

GoRide

GoMart

GoBluebird

Goýend

GoTransit

GoBox

gopay

Rp1.250.000 Other Services Tap for History

Pay

Top Up

Top picks for you GoRide Goöar GoDistance All

COVID-19

Donation

Food

Transport

Explore

GoBluebird Life

J3K

Goýend

GoTransit

GoBox

GoFood

Goýhop

GoMall

GoMart

GoMed

GoFitness

GoTix

GoPlay

GoNews

Logistics

For transportation services, Goride (bike) and Gocar (car) are the main features here. They are already well-known services among the indonesian people, especially in the city.

Safety with Gojek!

Get complete route information here, so you don’t awdwad wadwadwd wdwdaaaa wdw GoGive GoTagihan GoGames GoNearby

GoPulsa

Goýure

Based on our quantitative research in gform with 80 participants of gojek users, Gobluebird is the least used feature. So we didn’t include it on our case study.

GoInvestasi

58 (72,5 %)

Goride

65 (81,3 %)

Gocar

25 (31,3 %)

Gobluebird

0

20

40

60

80

xts

What’s up with Gojek and long distance?

Our Findings about long distance travel MAXIMUM DISTANCE LIMITATIONS We found out that Gojek set 30 km maximum distance for Goride and ¬00 km maximum distance for Gocar. Users can’t order trip beyond it and will be directed to change location.

There must be some reasons on why Gojek give limitation on their features. We also have to find a way to break those limits.

DEFINE LONG DISTANCE TRAVEL Based on US ãational áousehold Travel Survey (ãáTS), LongÏdistance trips are defined as trips of Õ0 miles ÆÅ Ð0 kmå or more Ìrom ½ome to t½e Ìart½est destination traveled. This includes both the portion of the trip to reach the farthest destination, as well as the return trip home and any overnight stops made along the way or stops to change transportation modes.

WHAT IS THE RULES HERE IN INDONESIA? There are no clear rules that define long distance travel. So, we’re gonna find out from user based on their experiences.

01

Emphatize Research

We created a plan to do a research based on our findings to get more insights.

Objectives Find out user long distance travel experience

KEY QUESTIONS

and their behaviour on its related services.

Methods

Online Survey

Remote Interview

Quantitative Research

Qualitative Research

using gform,

80 participants

using zoom,

1Z participants

Criteria 18-45 yo likes to go long distance travel Goride or/and Gocar active users

What is user definition of long distance travel?

What is user long distance travel experience from using private vehicle?

What is user opinion if there is a Go ek sub-app similar to Goride and Gocar that will provide long distance travel service?

What is user recent long distance travel service apps?

Survey Usually, what is your purpose to do a long distance travel while using...

Work

23 (28.7%)

Study/College

15 (18.8%)

...car?

79 (98.9%) Vacation

0

20

40

Work

60

80

43 (53 7%)

Study/College

35 (43 7%)

Vacation

...bike?

23 (28 7%)

0

20

40

60

80

The purpose of long distance travel using car is mainly for recreational/ vacation.

However, for bike, the purpose is quite balance between work, study, and vacation with the most votes goes to work matters.

01

Emphatize Research

We created a plan to do a research based on our findings to get more insights.

Survey Based on your experience, What is your furthest distance using...

...car?

30%

0-50 Kilometer 50-70 Kilometer

43.7% 6.3%

70-100 Kilometer ≥100 Kilometer

The distance that user took by car is around 70-100 km and it’s a usual thing to make it above 100 km.

20%

31.2%

...bike?

0-15 Kilometer

32.5%

15-25 Kilometer ≥25 Kilometer

For bike, User use it for a smaller

distance. It’s possible to took around 15-25 km and even higher than 25 km

36.3%

There are definition gap between long distance travel by car and bike. Based on user experience and combine it with Gojek maximum distance limitations, it’s clear that 100 km is equitable as minimum point for long distance travel by car. But, for bike, it

must be proved more to set the minimum bar of its long distance travel.

Interview After qualitative research with 12 participants, here’s some of their stories & insights :

MELISA ASTRINA, 24

TOP STORIES

She really enjoy do a long trip by car.

Her furthest trip was from Bekasi to Medan in 3 days using Toyota Avanza.

She can stop by at any moment for a break, or eat, or anything, without pressure.

INSIGHTS

If i want to use a private vehicle long trip service, i’ll compare the price between a trip and rent first. If the trip is more expensive, she’ll choose rent.

ARIES FADLI PRAYOGA, 24

TOP STORIES

He rides bike in his daily life rather than car because of its flexibility and the ability to slip between vehicles.

INSIGHTS

The biggest obstacle of riding a bike is fatique factor. If you want to make a long distance travel service by bike, it must have its flexibility to stop and catch a break.

01

Emphatize Research

Comparative Analysis

We also did an analysis with competitor that related to long distance travel service.

Ability of long distance travel

Vehicle variants

Car

Car Z Rental car

Plane

Rental Car

Plane

Bike

Bike

Train

Train

Bus Z Minibus

Bus Z Minibus

Rental car

No distance limitation

Max. 100 km for car Max. 0 km for bike

Booking feature

Traveloka and Pegipegi have the similar type of trip ticketing service. But, the difference is on Traveloka car rent feature that Pegipegi haven×t had

.

Movic are the online rental service that just focus on rental, which is similar to traveloka car rent feature

.

Grab is one of biggest competitor that gives similar service like Gojek. Beside of their ride feature, they also have rent feature for car & booking features

.

All of them have no distance limitation, but for rent, it depends on its duration.

Feature Comparison

We took traveloka car rent and Grab as two of the biggest competitor that gojek had.

Detailed rent features Can do rent with or without driver Connect to rental corporation Attractive UI

Can×t rent immedietly, must schedule it first Complex rent flow Different corporation, different rules

Ride and rent features has no maximum distance limitation

Simple rent flow, can rent at any moment

-

Attractive and user friendly UI

Less urgency on long distance, cost calculation is same as the short one

Less rent details Maximum rent time is only 12 hours

02

Define

Synthetize

We organized all of the pain points to get more consistent problems.

Affinity Maps BENEFIT OF USING CAR

BENEFIT OF USING BIKE

Flexible / Can Comfortable

stop by whereve r

Flexible in

or whenever the

various road

Fast

like

Cheap

Can brin g

Can slip

Quality tim e

Luggages

between

inside the car

a vehicle

The biggest benefit of using car is its high co fort level that passenger get. o ever+ the biggest one of using bike is its flexibility to ards every kind of road obstacles.

T E POSSIBILITY OF GOCAR SURPASSES| ITS 100 KM DISTANCE LIMITATION

T E POSSIBILITY GORIDE SURPASSE ITS 0 KM DISTANCE LIMITATION lfexibility to catch

my car trip can do

possible, if driver

more than that

agree possible, but

possible, if driver maintain the

think about the

hygiene and car

driver and

booking feature possible, if driver

condition possible, if

the price is not

know area

like regular

(perkilo)

must

a break or drink possible, if driver

so driver will be is agree, everyone optimal

improve/check condition of bike

has their own purpose

no more bike that

possible, it really

different from

helps through

the app

greater jakarta

area trafifc

bike kit when

travel, paperwork, rain coat & extra carriage bag

The surpassing distance limitation must be followed with some

z

optimi ation li e driver agreement, optimal vehicle condition, affordable prices and the fle ibilit to catch a brea for bi e&

LONG DISTANCE TRAVEL BY BIKE

GODISTANCE AS A LONG DISTANCE TRAVEL SERVICE PROVIDER

Never surpass

when using it for

30 km but above

30 minutes to

will use it when

20 km is start

1 hour

to get long

If the price is

to drive

more expensive Round-trip

Butt sore

than gocar,

please give rental

urgent, i feel la礀

sometimes interesting, i like

i rather rent to travel with girls

with the cheaper

and book later

interesting, i dont

features

need to transit or change vehicle when travel

price than the regular ones When people feel butt sore, do a

30 minutes riding, or surpassing 20 km, they already feel to have a long distance travel experience by bike

Godistance will be in demand if the price is cheaper than goride and gocar+ have rental and boo ing features.

How Mi t We / HMW We sHGGarizes the pro<leGs into risB o6 go4ls and cre4te sol0tionsP GOALS

Introducing Gojek zirst \ong ]istance Xravel _ervices with no maximum limitations

RISKS

Long distance travel

Expensive price

Uncertain vehicle

by bi e will be

for long distance

conditions that

uncomfortable for

travel 礀

may be

some people

car and 礀i e

unqualified for long distance

There are

travel

possibilities when driver can’t take long distance travel order immediately

SOLUTIONS

How to create a

How to redefine

How to verify

medium o#

price and

driver ve,ic e

agreement between

distance

conditions ?

driver and

standard for long

passengers ?

distance tra el ?

03

Ideate Let’s create ideas

I created ideas to elaborate every solution needs and organize them.

Redefining price an d

Create Ride or Rent Feature

distance standard

Medium of agreemen t

Driver & Passengers

distance travel by bike & car

e

Driver & vehicl

Set minimum distance for long

Create failed location reminder

Verification

for not surpassing minimum distance limitation

Create comple Create Scheduling

Create Reorder foo from history

payment methods Create choose

Create check

/ Booking

available vehicle &

vehicle section

Features

driver features for

Create drivej rating section

rental

Action Plan High impact

Low Effort, High Impact

Create failed location reminder Create check for not surpassing vehicle section minimum distance limitation Set minimum distance for long distance travel by bike & car

Create

Create choose

Scheduling

available vehicle &

/ Booking

driver features for

Features

rental

Create Ride or

Create drivej

Rent Feature

rating section

Low Effort

Create comple payment methods

Create Reorder

High Effort

foo from history

Low impact

I sorted them based on how much effort will i take and impact will it cause. fhen, i prioritized The low effort & high impact area for optimal solutions.

After got a clear problem statement, i set a persona to know my audience better.

ANNISA MAHARANI HR Department Staff, 25 yo Workaholic, likes to travel

User Persona

Motivation

likes to do a long distance travelling for work matters or vacation on some occasion.

Problem

doesn’t have any personal vehicle to ride with and bothered for using public transportation.

Desire

will find an apps that provides a long distance travel services using private vehicles.

03

Ideate Let’s create userflow

Userflow

I created userflow for the better visualization of the app.

Gojek Landing

Onboarding

page

page

Landing page

Location page

Departure time page

CONTENT

CONTENT

CONTENT

Choose vehicle

Ride/Rent navbar

Ride/Rent navbar

Promo

Search location

Re8a <o8ation

Learn more

Now or Later

Switch to Rent

Switch to Ride

Area page

Rent time page

CONTENT

CONTENT

Ride/Rent navbar

Ride/Rent navbar

Search area

Re8a area Now or Later

Detail vehicle page CONTENT Vehicle details Driver details Driver ratiHás » revie s

Ride

Booking page

w page

Revie

Order page

CONTENT

CONTENT

CONTENT

Ride/Rent navbar

Ride/Rent navbar

Order status

Re8a <o8ation

Location details

Call or chat driver

Set date & hour

Departure time details

Order details

Payment methods

Need help

Payment summary

Rating page CONTENT Rating

Order details

Booking page

Duration page

Available vehicle page

CONTENT

CONTENT

CONTENT

Ride/Rent navbar

Set hourly for less than a day

Recap area

Re8a area

Set s8hedule for a day or Dore

Recap reHb biDe

Set rent start time & hour

Show available vehicle

Set duration

w page

Revie

y

Order page

Additional pa ment

CONTENT

CONTENT

CONTENT

Vehicle details

Order status

Time countdown

Driver details

Call or chat driver

Payment summary

Area & location details

Order details

Additional payment details

Need help

Payment met>ods

k

Pac ages Payment methods Recent Payment summary

Rent

04

Prototype

Sketch & Wireframe

Sketches

Choose vehicle page

Set locatioU page

Pickup time page

Set date

Choose vehicle type page

Detail vehicle type page

Summary page

Order page

Wireframes 9:41

9:41

9:41 Ride

Rent

9:41 Ride

Rent

Ride

Mau kemana?

Rent

Lokasi penjemputan

Edit

Lokasi tujuan Pilih lokasi tujuan

MÆP Pilih kendaraanmu

Lokasi 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa dignissim sapien ultrices elit quam nulla commodo.

Sub lokasi 1

Mau kemana?

GoDistance Ride

Lokasi 1

Pilih lokasi tujuan

GoDistance ar

MÆP

Sub lokasi 1

Detail Lokasi

Lokasi 1 Sub lokasi 1 Sub lokasi 1

When will you go?

Lokasi 1

Now

Later

Detail Lokasi

9:41

9:41 Ride

Ride

Rent

Lokasi penjemputan Lokasi tujuan

9:41

Edit

Rent

Lokasi penjemputan Lokasi tujuan

MÆP

Edit

MÆP

MÆP

GoRide Distance 1 person

When will you go?

RpXX.000

Waktu

Now

Your order has been processed Please wait

We got yo o e Driver Plat

Departure Date Departure Time

9:41

Vehicle type

Pay with Select a payment method

Order GoRide Disûance

Vehicle’s checked. Ready for long trip.

R^__\]]] Check Vehicle

Trip details / 26.3 ص De¶a¹tº¹e location

FK Main Lobby, University of Indonesia Destination location

Sarwin Residence

GoPay

XX.000

04

Prototype #1

As a first time user, they will be guided to onboarding page, as an introduction about Godist orrientation to make it more appealing.

Intro #$

Intro #,

Intro #1

Onboardi

tance and the perks of using it. I mixed the info with some illustrations and different font

ing page

Intro #4

Intro #>

Intro #D

04

Prototype

#2

Welcome to the Godistance Homepage. I create a simple and on point CTA to increase the m or Godistance Car. There’s also a learn more button to go back to introductions, History butt promo that can be applied.

Promo banner carousel

9:41

Learn more button to repeat the Godistance Introductions Welcome to Godistance!

Gojek long distance travel service.

Skip

Landing

Welcome to

mobility of user. The main CTA in this homepage is to choose the vehicle, Godistance Bike ton to track our latest trip with Godistance and Promo banner carousel that show the latest

History button

GoDistance KiJe

GoDistance Car

Min. Dist \0 km

Min. Dist 100 km

added some minimum distance details again, to remind the user.

g Page

Godistance

04 Prototype

#3

Now, user enter the Ride page. I tried to make a similar set location design, like Goride & Goc departure time & set the date & hour if they choose later.

Set destination location

Input location

Rid

Set Location & D

car, to make a common experience as a Gojek Users. After the location set, user choose

de

Departure Date

February 2021 Mo

Tu

We

T

Fr

Sa

Su

1

2

3

4

5

6

7

8

9

1w

11

12

13

14

15

16

17

18

19 2w

21

22

23

24

25 26 27

28

1

2

3

4

5

7

Set

Departure Time

WIB 1w 11 1u 13 1q 1o 16

:

2 2} 29 30 31 32 33

Set

Choose departure time

Departure Time

Later - Input date & hour

6

04 Prototype

#4

Then, users will review their order on review page, where it shows the chosen vehicle, locatio before order. Once user tap order button, the order will be processed and wait for available d

Review Page

Loading pa

Rid

Review & O

on, departure time, & payment methods that they have to choose. It still can be edited driver.

age #1

de

Order time

Loading page #F

04

Prototype #5

User can switch between ride and rent features using the Ride & Rent Navbar. Once they tap

similar set location design, like Goride & Gocar, to make a common experience as a Gojek U

Set destination area #1

Re

Set A

p the rent button, they will be guided to Set Area Page. Same like ride, i tried to make a

Users. The difference is user has to set their destinated area for renting.

ent

Area

Set destination area #C

04 Prototype

#6

Then user has to choose & set the rent time. If they choose now, user only can access hourly

Choose Rent Time

Set Rent Start Time

Re

Set Ren

y option and if they choose later, user can access hourly & schedule options.

ent

nt Time

Set Rent @nd TimD Schedule

Set Rent @nd TimD Hourly

04

Prototype

#7

After set the destinated area and rent time, user can choose available vehicle. Here’s a prot recap that can be edited. Once user select the vehicle, the details of vehicle will be showed.

Choose Available Vehicle

Re

Choose Avail

totype from available Godistance bike. On the upper area, i added location and rent time It contains driver and vehicle details & some reviews on the driver.

Vehicle details

ent

lable Vehicle

Driver details

04 Prototype

#8

Once all of the requirements selected, user will be guided to review order page, where it sho where it includes all of the rent additional payments.

Reviw Order #1

Re

Review

ows selected driver & vehicle, location, and Rent time. It also offers all in one packages

e

w Order

Reviw Order #6

04

Prototype

#9

When the order set, Driver will confirm it. I create order status notification on the upper area contact button to call or chat driver. On the very bottom, There’s also help button for precau REVU RIDE

Order Status

Order page Confirmation #1

Ongoing

with the updated map. When user scroll to below area, they will see order details and utions if something goes wrong.

g Order

CalljTegt driver

Checked vehicle’s }eceipt

If something goes wrong, user can contact Gojek officials

Order page Confirmation #F

04

Prototype

#10

The order status will be updated as the time goes by. I divided the order status into 3 part : C one of the status, i designed it to be the only colored icon for the set one and greyscaled for

Order Page Today’s trip

Order Page Driver is coming

Ongoing

Confirmation of Order, Reminder for today’s trip, and Ongoing trip. When the order set into the rest.

g Order

Order Page Driver is near

Order Page Going to destination

04

Prototype

#11

I also designed the ongoing order section for the Gojek Homepage to simplify the users to ch and 3. CTA for contact drivers.

RENT RENT

See you on February 14th - 6 days left Driver confirmed your order FK Main Lobby, Univ..

Bandung

Ongoing Order Confirmation

Ongoing order

heck the order status. The ongoing order section contains : 1. Name of Product, 2. Status,

RENT RENT

Ready for today trip? - 05:30:24 left Today is The Day FK Main Lobby, Univ..

Ongoing Order Today’s trip

r - Homepage

Bandung

04 Prototype

#12

Finally, after arrived at destination, The order is complete. The rating page is shown automa guided to additional payment page first to pay their additional payment from th recent rent

Rating #1

Rating #2

Additional Paym

atically where user can rate their trips. For Rent, before entering the rating page, They will be t. It got the the details, countdown, and payment methods.

Additional Payment Page #1

ment & Rating

Additional Payment Page #2

05

Usability Testing

i created a plan to do a usability testing to get insights & feedbacks.

Goal of study

KEY QUESTIONS

- Understand the reaction from a Godistance first time user - Aind the insights and feedbacks that related to Godistance featuresH

Methods Moderated Usability Testing Using zoom and maze, 3 participants 30-50 minutes

Criteria 18-45 yo likes to go long distance travel Goride or/and Gocar active users

UT P

Plan

Tasks 1. Access Godistance Homepage as a first time user 2. Plan your first RIDE scheduled trip with Godistance Bike 3. Keep up with your RIDE order (before D-Day) 4. Keep up with your RIDE order (D-Day) 5. Plan your first RENT scheduled trip with Godistance Bike 6. Keep up with your RE´§ order (before D-Day) 7. Keep up with your RE´§ order (D-Day)

8. Keep up with your RE´§ order (After trip)

Tasks Co+-letio% 3&ore Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Task 7

Task 8

Teste÷ 1

3

3

2

3

3

3

3

2

Teste÷ 2

3

3

3

3

2

3

3

2

Teste÷ 3

3

3

3

3

2

3

3

2

Succes s Rate %

100

83,3

83,3

100

66,7

100

100

50

Average Success Rate : 68,3%

1 = Failed

2 = Indirect Ùuccess

3 = Ùucceed

05

Usability Testing

Findings #1 Ride & Rent Navbar As a first time user, they are not aware of this navbar existence.

Cause: 1. The design is not very prominent yet 2. The majority of focus that user have are on the lower area 3. If they dont look up, they probably won’t see it either.

Before

Findi

ings

After

05

Usability Testing Findings #2 Departure Time CTA They have a little struggle when they try to schedule.

Cause: 1. Not aware of “later” word 2. Unfriendly CTA

Findi

ings

Before

After

05

Usability Testing Findings #3 Order Status & Driver Location They are less focus to read the order status.

Cause: 1. The Body is more informative than the title 2. The Title size and font is thicker than the body

Findi

ings

Before

After

05

Usability Testing

Findings #4 Ongoing Order Status They couldn’t tell a difference between RIDE and RENT. Cause: 1. There is no text detail to point it

Before

Findi

ings

After

05

Usability Testing

Findings #5 RENT with driver info They are clueless about the including driver when use RENT. Cause: 1. No information about that on the on boarding page 2. No reminder when using RENT feature

Before

Findi

ings

After

02 UI/UX Exploration - Revamp

Cleverbook for Minecraft

UI/UX Ex

Clev for I WANNA

Cleverbook for related to min time. The com The needs of In some sort of G

I got a task fro and find the p of its lack of se

Role UI&UX D

Duration 1 da

Tools Figma

xploration - Revamp

verbook

KNOW HOW TO FIND THIS ITEM ON MINECRAFT

r Minecraft is one of the famous supporting apps that gives information that necraft. As years past by, Minecraft is becaming one of the popular game of all mmunity itself grows bigger and bigger, and the lore got deeper and deeper. n-game information is massive, so apps like Cleverbook for Minecraft is born, Gaming Wikipedia.

om Purwadhika Startup and Coding School to explore one of my favorites app problems that we struggle with from using the app. I choose this app because ensitivity to the user behaviour and disappointing UI.

Designer

ay

a

01

Emphatize Cleverbook for Minecraft

Minecraft and Cleverbook for Minecraft

Minecraft is one of the most popular game of all time. This multi-platforms game is known with its blocky and vast environment. Creatures, Spell, Weapon, Cosmetics, Riding animals, and even farming, are the some of the things that you can do in minecraft. In other words, you can do anything in minecraft.

with almost 131 million users in 2020 (based on polygon), minecraft creates one of the biggest gaming community.

From the community, the supporting apps is born. One of the famous android minecraft supporting app is Cleverbook for minecraft.

M2 stor2

i am a gamer

As a gamer, i can play minecraft for hours and i need a suick lore info when idm playing. Idm using cleverbook for minecraft from my phone to search it.

i wanna know how to make golden apple !

What’s wrong?

At first, i didndt feel disturbed by the I and the flow because all i need is just the info. As the time goes by, i open this app fresuently and i felt lazy and tired, my mood went drop because of the ui that doesndt bring joy, but boredness.

02

Define & Ideate

Let’s cre

Current User Journey

j

quent user.

I tried to create my own user ourney as a fre

Stage

Home

Menu

Info list

Details

Action

Try to find lore info

Choose category

Find the info you are

Read the info details

looking for

Touch Points

menu/search bar

Category utton

Iteh utton

Unfriendly Layout

Away fromæ

List/grid button

the touch area

isn’t prominent

Item page

Emotions

Pain points

v

Less Centere

d

layout

Unattracti e Color Pallete

How Might We

z

I summari e the risks and create solutions

GOALS

v

v

Re amp the Cle erbook for Minecraft

K

OLUTIONS

RIS S

S

- Unfriendly layout structure for frequent user.

- How to make a friendly layout structure for a better user journey?

- Unattractive color pallete for a

- How to create an attractive gaming theme color pallete?

game supporting apps

eate !

Gaming Environment

,

v

v

.

As a minecraft supporting apps Cle erbook must ha e the nuance of minecraft itself

,

then i combined it with

xbox ui to create more gaming and adaptive environment.

CoBor =aBBete

Focus Area

I changed the primary

I create a right oriented

color from brown to

v

green to gi e more

RECE

NT COLOR PALLETE

fresh and gaming

x

e perience similar to

xbox ui.

ODIFIED COLOR PALLETE

Primary Secondary

x

& comfort to a frequent users. fle ibility

9:41

Primary Secondary

M

v

layout to gi e more

03

Prototype

#1

Menu button & search bar are too far from thumbs area The digits are not suitable with the bar News banner is not interesting enough

Favorites and server are not the essentials in the comfort area

BEFORE

Home

epage

I created more eye-catchy News banner carrousel I moved the search bar to the center area for user mobility I created it green to ma_e it more prominent

I moved the interaction needs to the comfort area I ta_e minecraft chest design as a menu button to create more minecraft nuance

AFTER

03

Prototype

#2

The left oriented menu is uncomfortable

They listed the essential info from top to bottom,

The unselected ones are quite bold

BEFORE

Open

The right oriented menu

Unselected button will be in grey and green for the selected one

The menu is listed from bottom to top for user mobility

When the menu button is tapped, the chest is open

AFTER

Menu

03

Prototype

#3

List/Grid button is far right up

Filter button should be near the search bar

BEFORE

Block & Ite

tems - Grid

Filter button is moved to the side of search bar

List/ Grid button is moved to bottom right area

AFTER

03

Prototype

#4

List/Grid button is far right up

Filter button should be near the search bar

BEFORE

Block & It

tems - List

Filter button is moved to the side of search bar

List/ Grid button is moved to bottom right area

AFTER

03

Prototype

#5

The title and main picture isn’t centered

BEFORE

Block & Item

ms - Details

Centered Title and main picture

AFTER

03 UI/UX Exploration - Revamp

BCA Mobile

01

Emphatize My BCA Mobile story

BCA Mobile and its old school design

BCA Mobile is one of the BCA mobile apps product that can be accessed by customer, anywhere & anytime. -his app really a lifesaver , especially in pandemic. We able to transfer fast from home at any moment when we need it.

BCA Mobile is pretty big deal in Indonesia. As a biggest private bank in Indonesia and we are facing a digitaliRe era, Almost ts its customer using BCA Mobile to do a payment online.

with the amount people of using it, BCA Mobile UI is still kinda look old-schooled and less modern and it’s never change until now.

My story

In today’s pandemic, All i can do is buy everything remotely. BCA Mobile really saves me everyday when i dont have any cash or i need to buy something on the online marketplace or when i Tust felt laRy to go out. It’s really easy and comfortable to use it, but somehow i still bothered with the UI.

What’s wrong

It’s a fact that BCA Mobile has an old-schooled design, but as a user, -he UÃ are pretty simple but has a long flow to do a transfer. i’m wondering if i can create a modern UI with a simple flow

02

Define & Ideate

User Behaviour I tried to transfer some money to my friend Login

Home

m-Transfer

Daftar Antar Rekening

Transfer Antar Rekening

And uhen i tried to copied my card numberd Login

Home

m-Transfer

Akun Saya

Cek & Copy Nomor

Pain points I converted my eÀperience into some pain points LOGIN The button design is tacky Old-schooled

TRANSÕÜR ØÜNU Too many buttons Daftar rekening and transfer rekenin are on different sections

HOØÜ Home doesn¢t give enoug personal info Useless Activity Indicator

Let’s cre

eate !

How Might We I summariîe the risks and create solutions GOALS Revamp BCA Øobile RISKS

SOLUTIONS

- Old-schooled & Tacky design

- Hou to create a modern & coo l UI design?

- Too many buttons

- Hou to optimiîe the amount of buttons?

03

Prototype

#1

Far right info button

Big and tacky buttons

Different kind of button, but still in same color

Welcome word, but in the below area

BEFORE

Log

gin

Welcoming banner in the upper area

Make a contrast between the main buttons and the side one

Info button on the lower area

AFTER

03

Prototype

#2

Unnecessary Activity Indicator

Big and tacky buttons

Different kind of button, but still in same color

BEFORE

Home

epage

Change to setting button

Card with its number that can be coWied

Latest Transactions

Menu buttons, blue on white

AFTER

03

Prototype

#1

Too many listed button

Can’t make a difference between the main and side buttons

BEFORE

m-Tra

ansfer

I adjust it into 3 main transfer buttons. Simple and clear

AFTER

04 UI/UX Exploration - Revamp

Instagram

1

l ela

ol

r me

aa ka um M i aela S goo d

Mi m Su

1

me

21 Po

k

n rso

at

g a,

Co

a da

6

oo

30

Fo

63 Fo

l

e low

l

i low

ng

o Tr

l me

Vie

ik

o ey

1 all

w

ng

0

uh

o 3c

me

ate

m

n me

ts

rs IG

st

he bb

41 9:

llo

Se

y

F

h a rc

Sh

TV

UI/UX Ex

op

u Yo r o

“ TAG ME IG

41 9:

S 13

+1

ts en

rc ea

8

mn ty re t

h

Sh

u Yo

r Fo

yy

mm op S ! t !! ho ro 10 s b s ce nk Ni a n Th bo n m au Br

0

ll

nn

la or

o 3c

E

op

F Y F O J ¿O N E 20 Æ R ÄT CE

ðW

SE

SH

C

IG

Se

h a rc

Fo

K

K

E ðî

Eì

IG

TV Sh

r ha

ity

Ni

x

m Ca

eo

op

eE

Riy

p hS

Ma

I got a task fro ki wi ith w and findSamthe p ry to1 s4 wonder, After r r : u Yo 9 features of ins

.H

TV

Th

rt

.H

US

ou rY

Ea

A W.

Instagram is o ‘photo & video people from in replacement. recent format.

ðö

T

IG

ôð

H UC

A W.

Bì

41 9:

TV

ac

u

le ag

S HI

s

W

EE

S K’

Bo

HI

n

GH

t dS

LIG

re

HT

S

Role

et

UI&UX D

Duration

ma

Tools

e

1 da

Figma

lau

TV

V

ir t

l ua

Co

op Fa

s

o tF

o

h dC

Wo

ng

o nn

Wo rla

rld

ng

Ex

po

41 9:

k Se

Br

ain Sa

m

th wi

wi

ki

au

mn

eb

on

xploration - Revamp

E ON INSTAGRAM PLEASE “

one of the biggest social media that ever exist. This 13 years old app has been o storage’ of people for years. We share, we communicate, we socialze with nstagram. In 2020, Instagram make a controversial updates with its button This update really budge many people because we already comfortable with n bo ke . e S Br

au

mn

om purwadhika mtartup and loding mchool to explore one of my favorites app problems that we struggle with from using the app. I choose this app because i recent updates and as a old user, i want to create the optimal solutions for stagram.

Designer

ay

a

13

B Be

m ra u

nic

+ e.

8

n

0+

1 all

1

c 03

om

ic

n me

h es

ts

S ot! k

o

tt p re

ro sb

!!

yy

y

m

1

01 M

M

S

m

e

rs

ik

o

a

n

a

e

a

la

la

S

u

, g

ta

l

m

o

o

m

g

1

2

e

o

r

o

d

a

d

a

a

6

3

a

6

o

ll

o

w

e

a

n

g e

Emphatize C

F

F

3

o

0

ll

o

w

in

g

ro T

ll

V

o

n

m

ie

n

li

e

e

1

ll

a

w

k

y

0

o

c

3

h

u

o

a

m

m

te

m

e

n

ts

Instagram latest updates

rs

IG

1

Instagram and its latest updates P

s

o

t

h

e

ll

1 :4 9

o

S

b

b

e

a

rc

h

S

h

o

T

V

p

y

F

o

r

o Y

u

Instagram is one of the biggest social media platform that serves photo & video sharing across the world. Based on Hootsuite, instagram has 1 billion users in 2020 with almost 500 millions dailly users of instagram stories.

IG

1 :4 9

S

1

3

e

a

1

1

o

o

1

0

3

n

B

ra

c

N

u

o

m

ic

m

e

n

m

s

e

h

T

o

h

ts

t!

a

S

n

k

o

s

p

b

re

ro

o

h S

o Y

r

h

o

T

V

p

u

O

Y

F

F

O J In Üune 2020, Instagram maÕe a controversial N ¿ E 0 updates to swap the placement of2activity  R button with T shop button.

n

n

rc

8

F

0

b

u

m

ik

e

lo

o

rl

tt

y

y

y

!!

E

Å

C

E

K

K

ï

î

E

ì

ï

U

C

H

E

ó

.A W

.A W

B

ó

ï

W

S

H

S

E

1 :4 9

S

e

a

rc

h

IGT

T

S

ý

h

a

ri

ty

U

r

V

N

V S

h

o

F

o

r

T

h

e

R

a

r

th

M

IG

T

a

la

h

w

ik

i

ix

C

a

m

e

s

o

p

a

i

E

yu

a

g

m

le

a

ce

u

V

s

tu ir C

F

a

st

F

o

o

d

Wo

C

n

h

a

S

W

E

E

K

S

B

V

p

TS

These updates really budged almost every users IG ’ because theI activity button was one of the feature T that always been opened after posting something.

The bottom position was user comfort §one for years and the shop swaps is irrelevant with instagram persona of personal oriented, not business one.

H

E

m

it

p

u

S

a

w

t o1 4 u : o 9 Y

S

H

o Y

.H

ry

C

IG

ï

.H

o

a

n

l

n

o

Wo rl

a

n

rl

dE

xp

o

LIG

H

H

n

d

S

tr

e

e

t

o

1 :4 9 S

g

B

in

g

S

a

m

w

it

h

w

ik

i

ra

u

m

n

e

k

e

b

o

n

My story Instagram is one of my favorite social media. It gives me ability to share my art, daily updates, information and many more. I can open instagram almost over 4 hours a day.

S

B

ra

u

m

e

k

e

b

o

:

9 41

n

n

What’s wrong From the ‘shop v activity’ button controversy, i

tried to evaluate the whole instagram experience. For these past years, and went through a lot of ab testing, i can conclude that today version of instagram is not my favorite.

1

B

B

e

n

ra

ic

u

e

+

m

1

a

8

n

0

ll

3

1

1

1

0

3

c

o

m

ic

e

m

s

e

h

n

o

ts

t!

S

k

o

s

p

b

re

ro

tt

!!

y

y

y

:

9 41

m

1

02 M

M

S

m

e

rs

ik

o

a

n

a

e

a

la

la

S

u

, g

ta

l

m

o

o

m

g

1

2

e

o

r

o

d

a

d

a

a

6

3

a

6

o

ll

o

w

e

a

n

g e

Define & Ideate C

F

F

3

o

0

ll

o

w

in

g

ro T

ll

V

o

n

m

ie

n

li

e

e

1

ll

a

w

k

y

0

o

c

3

h

u

o

a

m

m

te

m

e

n

ts

IG

User behaviour s

o

t

h

b

Let’s cre

rs

1

P

b

e

ll

1 :4 9

o

S

e

a

rc

h

S

h

o

T

V

p

y

o Y

u

tried to track my daily activity when using instagram F

I

Home

hec k Stories

croll feeds

C

o

r

croll & Reloa d Search section

S

S

Reload

nd when i tried to post something

A

Home

Pos t Photo

1

3

IG

Reloa d Home

1 :4 9

S

e

a

rc

8

F

o

h S

o Y

r

h

o

E

1

1

o

o

0

3

n

B

ra

c

N

u

o

m

ic

m

e

n

m

e

n

ts p

re

tt

y

y

h

T

I

o

h

a

S

n

k

o

s

b

ro

N

y

Pain points

s

t!

V

!!

E

Å

T

R

J

2

 C

E

O

K

K

ï

Y

0

î

E

Pos t stories

C

u

n

1

T

hec k Interactions

p

Reload

0

b

u

m

ik

e

lo

o

rl

O

¿

ì

ï

U

C

H

E

F

F

ó

.A W

.A W

.H

.H

converted my experience into some pain points B

ó

ï

W

S

H

S

E

HOME

V

T

S

ý

h

a

ri

ty

U

h

F

o

r

o Y

S

h

o

r

V

N

ik

i

ix

C

a

m

e

s

o

The post focused on wh o are posting than what is the post e

IG

S O TS H G I L

H

Rare ’ to visit shop page

u

T

w

H P

p

h

m

h

t o1 4 u : o 9 Y

S

IGT c Post and Navbar Buttons r a e S are the same size (confusing)

1 :4 9

a

it

ry

C

IG

ï

w

TH

E

u iy R

a

g

m

le

IS

W

E

E

K

S

H

tr

e

e

t

Unfamiliar marketplace layout

s

B

o

n

d

S

Uncomfortable button placement

a

R H

SEAe C r

th

S

p

a

c

WER NAVBAR

Too much post in one screen E

a

M

a

la

LO

u

Unused & Limited Filter

Where’s my interaction button?

Hidden IGTV page IG

T

V

V

tu ir C

p

F

a

st

F

o

o

d

Wo

C

n

h

a

o

a

n

l

n

o

Wo rl

a

n

rl

dE

xp

o

1 :4 9 S

g

B

in

g

S

a

m

w

it

h

w

ik

i

ra

u

m

n

e

k

e

b

o

n

eate !

How Might We I

summarize the risks and create solutions

GOALS

Revamp Instagram RISKS -

-

UTIONS

SOL

Too much same-size icons in one page

-

Uncomfortable experience when using features beside of stories

-

nstagram will be boring if they don’t have stories

- I

S

B

ra

u

m

e

k

e

b

o

How to create an instagram view that more pleasing to the eye?

How to create more interesting & comfortable experience for other instagram features beside stories?

n

n

Latest trends in 2020 ne of my strategies is to follow the latest trends. TikTok and its FYP features really pleasing the user to get the content they like, automaticly based on ai research. The simplicity design and mobility to scroll is making user stays for hours.

O

nd the most important, it’s all about content.

A

1

B

B

e

n

ra

ic

u

e

+

m

1

a

8

n

0

ll

3

1

1

1

0

3

c

o

m

ic

e

m

s

e

h

n

o

ts

t!

S

k

o

s

p

b

re

ro

tt

!!

y

y

y

1

l ela

r me

Co

a da

aa ka um M i aela S goo d

03 Mi

m Su

1

me

21 Po

k

n rso

at

g a,

30

Fo

F

ol

e low

l me

ik

ng

o ey

uh

o 3c

me

ate

m

n me

ts

Prototype 6

oo

63

l

i low

ng

o Tr

ll

Vie

1 all

w

0

rs

#1

IG

st

he bb

41 9:

llo

Se

y

F

h a rc

Sh

TV

op

u Yo r o

So triggered to look at interaction position

There are buttons on above, below, left and right post

IG

41 9:

Annoying post

rc numbere a S

indicator.

It’s big, noisy 38

1

r Fo

h

Sh

u Yo

and distrupt the post itself

mn *1

ts en

ty re t

mm op S ! t !! ho ro 10 s b s ce nk Ni a n Th bo n m There au Br

0

ol

nn

la or

o 3c

yy

E

op

F Y F O J ¾O N E 20 Ç R ÄT CE

IG h a rc

Fo

K

B

IG

TV Sh

W ìñ

SE

SH

a Ch

rit

S yU

Yo

Ni

x

m Ca

i mw

thw

iki

ry to1 s4 r : u

9

eo

op

eE

Riy

p hS

Ma

.H

TV

Th

rt

.H

Sa

ou rY

Ea

A W.

ñ÷

T

IG

îñ

Eì

is no size difference

buttons

Se

K

E ñï

H UC

A W.

between navbar & post

41 9:

TV

ac

le ag

um

s

HI

S

W

EE

K’

S

Bo

HI

n

G

HL

t dS

re

IG

HT

S

et

BEFORE

a

e

lau

TV

V

ua ir t

Co

op Fa

s

Fo t

o

Ch d

W

on

g

l

o nn

W

o

rla

rld

ng

Ex

po

Hom

41 9:

k Se

Br

ain Sa

m

th wi

wi

ki

au

mn

eb

on

No more buttons above the post

No more post number indicator

k Se

Br

au

eb

on

The positioning of every

mn

buttons around post are tidier now

The interactions buttons is back to its normal positions

AFTER

13

me B Be

m ra u

nic

* e1

8

n

0*

1 all

1

c 03

om

ic

n me

h es

ts

S ot! k

o

tt p re

ro sb

!!

yy

y

1

l ela

r me

Co

a da

aa ka um M i aela S goo d

30

03 Mi

m Su

1

me

21 Po

k

n rso

at

g a,

Fo

F

ol

e low

l me

ik

ng

o ey

uh

o 3c

me

ate

m

n me

ts

6 Prototype

oo

63

l

i low

ng

o Tr

ll

Vie

1 all

w

0

rs

#2

IG

st

he bb

41 9:

llo

Se

y

F

h a rc

Sh

TV

op

u Yo r o

Cannot change the selected topic & IGTV isn’t noticeable

IG

41 9:

S

rc ea

h

Sh u

TV

op

F Y F O J ¾O N E 20 Ç R ÄT

8 The recomendation has no focus point Yo 13

r Fo

and just sharing it all. We must tap it

mn

0

b

ol

nn

la or

*1

10

o 3c

on a Br

Ni

m

c

n me

h es

n um

ts

S ot!

a Th

nk

o

t p re

ro sb

ty

first to make it page to page

yy

E

!!

CE

K

K

E ñï

îñ

H UC

Eì

A W.

B

W ìñ

SE

SH

A W.

.H

.H Sa

ñ÷

a Ch

rit

S yU

Yo

The Selected Search button is similar

IG

41 9:

Se

h a rc

Fo

IG

TV

Ni

to the unselected one

TV Sh

T

e Th

E

Riy

rt

p hS

Ma

IG

thw

iki

ry to1 s4 r : u

9

eo

op

ou rY

Ea

x

m Ca

i mw

ac

le ag

um

HI

s

S

W

EE

K’

S

Bo

HI

n

G

HL

t dS

re

IG

HT

S

et BEFORE

a

e

lau

TV

V

ua ir t

Co

op Fa

s

Fo t

o

Ch d

W

on

g

l

o nn

W

o

rla

rld

ng

Ex

po

Search -

41 9:

k Se

Br

ain Sa

m

th wi

wi

ki

au

mn

eb

on

Selected topic changed to filter button on the side of search bar

A

vbarÞ

clean upper na

For youÞ

k Se

Br

au

eb

on

including

Shop & IGTV sections

Post/grid button for switching

mn

between ¾ post page to grid page

Search button is filledÞ like the other selected buttons

AFTER

13

- For you B Be

m ra u

nic

* e1

8

n

0*

1 all

1

c 03

om

ic

n me

h es

ts

S ot! k

o

tt p re

ro sb

!!

yy

y

1

l ela

ol

r me

aa ka um M i aela S goo d

03 Mi

m Su

1

me

21 Po

k

n rso

at

g a,

30

Fo

F

ol

e low

l me

ik

ng

o ey

uh

o 3c

me

ate

m

n me

ts

Prototype 6

oo

63

l

i low

ng

o Tr

ll

Vie

1 all

w

0

rs

#3

IG

st

he bb

41 9:

llo

Se

y

F

h a rc

Sh

TV

op

u Yo r o

The navbar is unfamiliar

IG

41 9:

S 13

*1

ts en

ty re t

r Fo

yy

h

Sh

u Yo

E

other marketplace K K CE

h a rc

Fo

E ñï

IG

TV Sh

W ìñ

SE

SH

Eì

a Ch

rit

S yU

Yo

Ni

x

m Ca

i mw

thw

iki

ry to1 s4 r : u

9

eo

op

E

Riy

p hS

Ma

.H

TV

e Th

rt

.H

Sa

ou rY

Ea

A W.

ñ÷

T

IG

îñ

H UC

A W.

IG

Se

op

F Y F O J ¾O N E 20 Ç R ÄT

B

41 9:

TV

The layout is different from the

mm op S ! t !! ho ro 10 s b s ce nk Ni a n Th bo n m au Br o 3c

rc ea

8

mn

0

Co

a da

nn

la or

ac

le ag

um

HI

s

S

W

EE

K’

S

Bo

HI

n

G

HL

t dS

re

IG

HT

S

et BEFORE

a

e

lau

TV

V

ua ir t

Co

op Fa

s

Fo t

o

Ch d

W

on

g

l

o nn

W

o

rla

rld

ng

Ex

po

Search

41 9:

k Se

Br

ain Sa

m

th wi

wi

ki

au

mn

eb

on

Banner/ promo info

I change the navbar option into several section, and make it more ‘marketplace’ vibes

k Se

Br

au

eb

on

mn

AFTER

13

h - Shop B Be

m ra u

nic

* e1

8

n

0*

1 all

1

c 03

om

ic

n me

h es

ts

S ot! k

o

tt p re

ro sb

!!

yy

y

1

l ela

ol

r me

Co

a da

aa ka um M i aela S goo d

30

03 Mi

m Su

1

me

21 Po

k

n rso

at

g a,

Fo

F

ol

e low

ik

o ey

uh

o 3c

me

ate

m

n me

ts

l

i low

ng

o Tr

ll

Vie

1 all

w

0

rs

#4

IG

st

he bb

41 9:

llo

Se

y

F

IG

41 9:

S 13

*1

ts en

rc ea

8

mn ty re t

r Fo

h

Sh

u Yo

yy

mm op S ! t !! ho ro 10 s b s ce nk Ni a n Th bo n m au Br

0

l me

ng

6 Prototype

oo

63

nn

la or

o 3c

E

h a rc

Fo

IG

TV Sh

op

CE

K

K

E ñï

W ìñ

SE

SH

îñ

H UC

Eì

.H Sa

a Ch

rit

S yU

Yo

Ni

x

m Ca

i mw

thw

iki

ry to1 s4 r : u

9

eo

op

E

Riy

p hS

Ma

.H

TV

e Th

rt

A W.

ñ÷

T

IG

TV

ou rY

Ea

op

u Yo r o

A W.

IG

Se

Sh

F Y F O J ¾O N E 20 Ç R ÄT

B

41 9:

h a rc

TV

ac

le ag

um

HI

s

S

W

EE

K’

S

Bo

HI

n

G

HL

t dS

re

IG

HT

S

et BEFORE

a

e

lau

TV

V

ua ir t

Co

op Fa

s

Fo t

o

Ch d

W

on

g

l

o nn

W

o

rla

rld

ng

Ex

po

Search

41 9:

k Se

Br

ain Sa

m

th wi

wi

ki

au

mn

eb

on

IGTV has its specific page now, not just on the inside selected topics

k Se

Br

au

eb

on

mn

AFTER

13

h - IGTV B Be

m ra u

nic

* e1

8

n

0*

1 all

1

c 03

om

ic

n me

h es

ts

S ot! k

o

tt p re

ro sb

!!

yy

y

1 9:4

UI/

UX

POR TFO LIO Sel

ect

ed

Pro

Pra

2 t 20 jec

ew bud

021

of

aya

ng

0-2

eb a S

End

CONTACT ME

Jakarta, Indonesia

+62 878 8220 4801

praboedewa@gmail.com

@praboedewa @boesantara

/praboedewa