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
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