Portfolio

UI/UX Design
portfolio
Fresh graduates who are trained in cultivating loyalty and always
hello, i’m naufal! practicing UI/UX Design skills, have an artistic sense and excellent
self-motivation to work in teams and individually.
my nickname :)
Professional Experiences
Links
areer ui/ux designer intern

Network
June 2022 - on going :)
linkedIn
behance
tutor and assitant laboratory
2017 - 2022
medium
Education
ui/ux design student

December 2021 - June 2022
UI/UX Designer
informatics engineering
2017 - 2021
Case Study
Intro
Emphatize
Define
Ideate
Improving Design on
App Protoyping
Test
Key
Insights
Overview
Intro
Emphatize
Maxim is an online motorcycle taxi company from Russia operating in Indonesia. Since
first introducing itself in 2018, Maxim's online transportation service has continued to Define
develop its services. Noted, now Maxim is present in 47 cities in Indonesia.
In the case that I raised, I will focus on the design Ideate
of the display
Protoyping
Role : UI/UX Desgine
Framework : Emphaty, Define, Ideation, Prototype, and Tes
Timeline : 4 Weeks
Test
Key
Insights
Intro
Why ?
Emphatize
Define
Because in the current Maxim display, there are

shortcomings in terms of layout or frame position, and Ideate
in terms of the use of color. This makes users have to

struggle and feel this application looks 'old fashioned'.
Protoyping
Test
Key
Insights
Intro
Research Plan
Emphatize
Objective
Define
Understanding user behavior when using
Maxim
Understanding user behavior when they want
to use services on Maxim
Ideate
Pain Point on Maxim display
Methodology : Qualitative Protoyping
In-Depth Intervie
Competitor Analysis (insert user behavior using Test
competitor analysis in interview)
Key
Insights
Intro
Sample Spesification
Emphatize
Have used Maxim's ojol service in the last 1 month (at least 2
times)
Maxim User Define
Man/ Woma
21-24 years old

Ideate
Sample Structure And i have found it ! Protoyping
5 people who fit the criteria and
Segment 21-24 Years Old ready for interview process

Test
Maxim User 5
Total Respondent 5
Key
Insights
Questions Answers Intro
Competitive
Apakah kamu pernah menggunakan
layanan dari app diluar MAXIM? Coba
“Pernah, biasanya sih pertama buat cek
harga. perbandingan harga. terus ngecek
“Saya menggunakan aplikasi
gojek dan grab untuk layanan
promo gitu. cari promo termurah. paling antar jemput dan juga
Study
tolong jelasin
ngegunain gojek dan grab kalo mua kirim membeli makanan” Emphatize
barang”
Bagaimana pengalaman kamu “Kadang tergantung ketersediaan “Merasa terbantu, tp akhir2

menggunakan layanan aplikasi drivernya, kadang lama juga gitu. ini (pas puasa) sekarang lebih
Define
tersebut? Overall baik” susah dapet driver. Ketika di
grab atau gojek susah dapet
In this case, I included five driver baru ke Maxim”
questions during interviews
regarding users using “Tampilan nya sekarang itu grab dan “Mudah dipahami, karena Ideate
Menurutmu bagaimana
competitor applications tampilan dari aplikasi gojek ngga ribet. lebih gampang untuk terbiasa make apliaksi itu
ngetag lokasi. dan di gojek terutama jadinya gampang aja.
regarding the appearance of tersebut?
kan udah punya gopay,bisa tranfser Gampang dalem memesannya,
the application sesama gopay. begitunya di grab
transfer dengan ovo nya”
dan mencari yang kita
inginkan”
Protoyping
Apakah tampilan homepage di gojek ngga ada yang bikin bingung, Ngga ngebingunin, baik-baik
dari app tersebut terus di grab juga ngga ada. karena aja
membingungkan kamu? make gojek dan grab cuman mobilitas
aja sama ngirim barang dan beli Test
makanan
Adakah tampilan lain yang Mungkin yang membuat bingung adalah Di gojek, kalo nyari
fitur goclub alamat.kadang ngga sesuai Key
membingungkan kamu selain

titiknya Insights
homepage?
Findings Intro
The cause of users experiencing difficulties, most of them in terms of the interface convey less
information
Emphatize
“Di maxim, hompage teralu simple, jadi merasa kurang dari fiturnya.
Homepage “Kurang bisa dipahami dan minim informasi, Ya, pada interface homepage kurang dapat dipahami dan juga minim
informasi. Halaman pemesanan layanan (ex:pemesanan antar jemput menggunakan motor.”
Define
“Bagian peta nya kurang penjelasan nama jalannya, sehingga membingungkan.
“Karena tampilan peta nya warna item, sedangkan mobil nya juga warna item jadi bingung dan ga keliatan
mobil nya.
Search Location Ideate
“Di Maxim bagian peta itu ngebingungin, karena tampilannya agak beda. kadang sulit dipake untuk menentukan
tujuan, dan penjemputan, petanya itu beda, dan penamaan gedung2 nya itu beda. jadi harus memakai nama
jalan. untuk nentuin titik jemput dan tujuan.”
Protoyping
“Ketika memesan ojol, untuk membatalkannya ada notif untuk ‘yakin ngebatalin?’ sehingga drivernya sudah keburu
Order Page dateng.”
“Bagian pembayaran non tunainya membingungkan.

Test
Payment Method
“Fitur pembayaran non tunai, tapi ngga paham gimana cara makenya.”
Cancel Order
“Udah dicancel atau belum, ngebingungin karena bacaanya ‘telah jalan’.“ Key
Page Insights
User Persona Intro
Emphatize
Define
Ideate
Protoyping
Test
Key
Insights
Customer Journey Intro
Emphatize
Define
Ideate
Protoyping
Test
Key
Insights
Current problem
This 'order has been cancelled' display is very
ambiguous, as it doesn't indicate the order has
been cancelled
The address is still incomplete to determine
the pick-up point/destination
The balance text is too big than the destination

text
There is space that can still be used Too few payment methods
Too many confusing cancellation options

Intro
Emphatize
Take Out Define
Ideate
"The Ojek Online application would be better if it provided clear Protoyping
information, especially on the homepage and provided clear pick-up/

arrival points and provided non-cash payment options to make it
easier for users." Test
Key
Insights
Intro
Actionable Insight
Emphatize
Judging from the results found, I decided to improve in these

sections : Define
Provide clearer information on the homepage, improve the layout to make it look neat and easy to understand 1 Ideate
Provide street addresses on maps, or add Gmaps for more detail in choosing roads.2
Distinguishing the color of vehicles and roads on the map, so that it can be seen to distinguish between roads and 3 Protoyping
vehicles
Provide clear information about non-cash service features, and add cashless payment methods 4
Test
Creating an informative display whether the order has been canceled or not. 5
Key
Insights
Intro
Emphatize
Define
Ideate
Protoyping
Test
User Flow
Key
Insights
Information Architecture Intro
Emphatize
Define
Ideate
Protoyping
Test
Key
Insights
Intro
Wireframes
Emphatize
As in the image below, I have improved 6 Maxim pages:
Define
Ideate
Protoyping
Test
Search
Payment
Driver Info
Cancer Order
Cancer Order
Homepage
Location Method Page Question Page
Key
Insights
Style Guide Intro
Color Typography Icon Emphatize
Define
Ideate
Protoyping
Test
Key
Insights
Style Guide Intro
Emphatize
Define
UI Kit
Ideate
Protoyping
Test
Key
Insights
Intro
Mock Up
Emphatize
Define
Using google maps so

that the location point Ideate
is much more accurate
Make a vehicle selection

Protoyping
menu without scrolling,
so as not to bother the
user
Test
Key
Homepage Search Location Insights

Intro
Mock Up
Emphatize
Define
Ideate
Protoyping
Add options in payment
method
Test
Align the nominal and
the sentence to make
it look neat
Key
Payment Method Driver Info Page Insights

Intro
Mock Up
Emphatize
Define
Indicates that the Ideate

cancellation has been
made
Summarize the cancellation Protoyping
options to be concise and

clear
Test
Cancer Order Question Cancer Order Page Key
Insights
Intro
Prototyping
Emphatize
Define
Click Here ! Ideate
Protoyping
Test
Key
Insights
Intro
Usability Test
Emphatize
Define
Ideate
Protoyping
Test
Key
Insights
Intro
Emphatize
Timeline
Define
In-Depth Interview, UT, and Reporting took one week
Ideate
Data Collection Protoyping
Google Form, Figma

Test
Key
Insights
Task Intro
Emphatize
Scenario : start from the homepag
trying to open the location page
trying to choose a payment method Define
trying to cancel the order

Ideate
Question : what do you think about the design?

Protoyping
Goals : find out user feedback about the design on
motorcycle motorcycle ordering flow Test
Key
Insights
Task Intro
Emphatize
Scenario : start from the homepage
Define
Task Analysis
Ideate
For the first time, the user accesses the homepage to
place an ojol order
Protoyping
Test
Key
Insights
Task Intro
Emphatize
Scenario : 2. trying to open the location page
Define
Task Analysis
Ideate
The user enters the pick-up point/destination as desired
Protoyping
Test
Key
Insights
Task Intro
Emphatize
Scenario : 3. trying to choose a payment method
Define
Task Analysis
Ideate
After inputting the location, the user selects an available
payment method
Protoyping
Test
Key
Insights
Task Intro
Emphatize
Scenario : 4. trying to cancel the order
Define
Task Analysis
Ideate
the user wants to cancel the order, by selecting one of

the reasons for the cancellation
Protoyping
Test
Key
Insights
Impression Intro
Design Effectiveness Familiarity Gesture Understanding Emphatize
Homepage Define
Search Location
Ideate
Payment Method
Driver Info
Protoyping
Cancel Order Quest
Cancel Order Page Test
Key
Insights
Good Neutral Bad

Intro
Emphatize
display is going well : Users are happier when
trying new designs, with a mix of many colors Define
that are more attractive to the user's view.
UT Result
Ideate
As an online motorcycle taxi application, Maxim Protoyping
must have an attractive appearance, this makes
the user feel at home in the application and

Test
looks more colorful
Key
Insights
Intro
What i learned from this case study

Emphatize
Becoming a UI/UX Designer is not easy, because you have to go

through several stages of a long and time-consuming process.
To finish this case is not easy for me, because I have to put in time Define
and stay consistent so that this case finish well.

Ideate
Way Forward
The design that I made one day will change. So the design that I Protoyping
made is not the end of an improvement

Being a UX and UI person is very helpful to be able to understand
user needs more deeply and strengthen understanding in this field Test
again.
Key
Insights
Thank You !

Portfolio

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Portfolio

Uploaded by

Copyright:

Available Formats

UI/UX Design

areer ui/ux designer intern

ui/ux design student

In the case that I raised, I will focus on the design Ideate

Because in the current Maxim display, there are

in terms of the use of color. This makes users have to

Methodology : Qualitative Protoyping

Competitor Analysis (insert user behavior using Test

competitor analysis in interview)

21-24 years old

Sample Structure And i have found it ! Protoyping

5 people who fit the criteria and

Segment 21-24 Years Old ready for interview process

Bagaimana pengalaman kamu “Kadang tergantung ketersediaan “Merasa terbantu, tp akhir2

membingungkan kamu selain

“Bagian peta nya kurang penjelasan nama jalannya, sehingga membingungkan.

“Bagian pembayaran non tunainya membingungkan.

The address is still incomplete to determine

the pick-up point/destination

The balance text is too big than the destination

Too many confusing cancellation options

Take Out Define

"The Ojek Online application would be better if it provided clear Protoyping

information, especially on the homepage and provided clear pick-up/

Judging from the results found, I decided to improve in these

Color Typography Icon Emphatize

Using google maps so

Make a vehicle selection

Homepage Search Location Insights

Payment Method Driver Info Page Insights

Indicates that the Ideate

Summarize the cancellation Protoyping

options to be concise and

Cancer Order Question Cancer Order Page Key

Click Here ! Ideate

Data Collection Protoyping

Google Form, Figma

trying to cancel the order

Question : what do you think about the design?

Goals : find out user feedback about the design on

motorcycle motorcycle ordering flow Test

The user enters the pick-up point/destination as desired

the user wants to cancel the order, by selecting one of

Design Effectiveness Familiarity Gesture Understanding Emphatize

Cancel Order Quest

Cancel Order Page Test

Good Neutral Bad

display is going well : Users are happier when

trying new designs, with a mix of many colors Define

that are more attractive to the user's view.

As an online motorcycle taxi application, Maxim Protoyping

must have an attractive appearance, this makes

the user feel at home in the application and

looks more colorful

What i learned from this case study

Becoming a UI/UX Designer is not easy, because you have to go

and stay consistent so that this case finish well.

made is not the end of an improvement

You might also like