UI/UX Design
Portfolio Fachrian Nabil Fauzi Selected Projects 2018 - 2020
Hello My Name is Rian!
Welcome to My Portfolio
Nice to Meet You!
Personal Information
Fachrian Nabil Fauzi Born Sacramento, CA. 28 September 1997 Male/Indonesian
Home Address Jln Masjid Nurul Yaqin no 58A, Kebayoran Lama, Jakarta Selatan DKI Jakarta
Contacts 087878527548 rianabil@gmail.com Fachrian Nabil Fauzi
UI/UX Portfolio
Fachrian Nabil Fauzi
Selected Work 2018-2020
Curriculum Vitae
Education 2015
SMAI Al Azhar 1 Jakarta
2019
Universitas Indonesia
Senior High School
Bachelor Degree of Architecture
Experience 2018
Ekskursi Arsitektur UI
2019
Symbiotic Urbanism
2019 2020
Head of Logistics - Departemen Arsitektur UI
On Field User Surveyor - DRPM UI dan Departemen Arsitektur UI
Baran Energy (Current Job)
Graphic Design - PT Aldebaran Rekayasa Cipta
Product Management Masterclass Teknologi.id Workshop+ - Participant
Expertise Architectural Design, Graphic Design, UI/UX Design, Company Branding
Proficiency Language OS Visual Graphics Rendering Tools
UI/UX Portfolio
Fachrian Nabil Fauzi
Indonesian, English, Arabic Mac, Windows Photoshop, Illustrator, Premiere, Lightroom SketchUp, AutoCad , Rhinoceros, Vray
Selected Work 2018-2020
Selected Projects
2018 - 2020
Campus Competitions Design Sprints Company Website Design
Table of Content
01 Guide.Me App 13 Delanas Mobile App 23 Baran Energy Website
GuideMe! Travel Guide Service Application LEARN
UI Design UX Design Business Development
Portfolio
02
Hey! Can You Guide.Me GUIDE.ME is an application that offers Cultural Tourism to foreign tourists who want to Explore Indonesia in more detailed settings, at the same time based on comfort and assurance of each personal need. Team of 4 Role : Target Analysis, Market Research, UI/UX Design UI/UX Portfolio
Fachrian Nabil Fauzi
Guide.Me App 2018
Portfolio
03
Only 3 locations that have become famous to tourists in Indonesia. This is due to the lack of knowledge and access to other locations. Arief Yahya
Tourism Minister
From Locals’ perpective, there is a lack of awareness of business potential due to negligence in popular majority. On the other hand, foreign tourist still doubt comfort and assurance in asian countries I B Surakusuma Tourist Observer
UI/UX Portfolio
Fachrian Nabil Fauzi
Guide.Me App 2018
Portfolio
04
IDEATION User Persona 2
User Persona 1
EN
IN Indonesian
English
Cultural
Explore
Resource
Interact
No Indonesian
English
Local Culture
Communal Heritage
People with Ease
Abundance of People
Lack
Local Business Access
Potential
Foreign Tourist
Knowledge
Comfort
Assurance
How to Remove Cultural Boundaries?
Application Platform Educate
Connect
Promote
Cultural
Locals’
Small
Potential
Tourist
Destinations
Enlightment
Daily Life
Business
Tourism Site
Necessities
UI/UX Portfolio
Fachrian Nabil Fauzi
Guide.Me App 2018
Portfolio
05
Tourist App Flow App Work Flow Splash Screen
Home Screen
Search Bar Result Page
Booking Detail
Catagories For You Popular Guide’s Choice
Account
Side Bar
Log In Inbox Notification Dream list Guide with Us
Member’s Only
Guide App
Contact Us Logout UI/UX Portfolio
Fachrian Nabil Fauzi
Guide.Me App 2018
Portfolio
06
Tourist App Flow Booking Workflow Booking Screen
Search Bar Filter Experience Tab Image Trip Details Guide Info Booking Trip Details
Location Itinierary Perks Price
Guide Details Book Me
Check Out
Dream List Saved Account UI/UX Portfolio
Fachrian Nabil Fauzi
Member’s Only
Guide.Me App 2018
Portfolio
07
Guide App Flow Splash Screen
Log In Easy Sign In Fill Details Home Customer Alert Trip Title Cust Detail Confirm Cust
Booking Detail
Pending Inbox Chat Customer
Performance Account
UI/UX Portfolio
Fachrian Nabil Fauzi
Guide.Me App 2018
Portfolio
08
Wireframing Home Screen Ideas
Side Bar
Search Page
UI/UX Portfolio
Fachrian Nabil Fauzi
Guide.Me App 2018
Portfolio
09
UI Elements Color Palette The colors are selected based on Guide.Me identity colors
#cc5928
#f6944f
#fbc78a
#f1f2f2
#3e8699
#544741
Typography
Stylish Button
Main Text
Hunters
Roboto Black
Londrina Solid
Roboto Light
Enhance The Joyfulness & Feeling Happy During Traveling Experience
Roboto Regular
To Ensure Readability
Usable Icons
+ UI/UX Portfolio
Fachrian Nabil Fauzi
Guide.Me App 2018
Portfolio
10
Low Fidelity Tourist App Connect | Educate | Experience
Guide
GuideMe! GuideMe!
Guide name - x.x Location
Trip Review
Trip Title Description
You aren’t Signed In Yet
Log In
We’ll see this!
Time Meeting Point Guide Details
See all
Booking b ut ton
Trip Title Description
or
Time Meeting Point
Guide Me!
Guide Details
Booking b ut ton
Trip Title
Sign Up
Let’s Go!
e!
Trip Title
Hi There!
Sign Up
Guide
e!
Time
Description
Your Expenses
$X.XX
Review Points Review Quantity
Description Meeting Point
What you get!
Let’s Go!
Time Meeting Point
Guide With Us
Guide Details
Booking b ut ton
Explore Indonesia Don’t Know Where to Go? Language
Home Page - Search Bar
Help
Trip Title C ha t B ut t o n
Description
Contact Us
Sign In Page - Side Bar
Results Page
Book Me!
Add to My Dream
Guide Detail
Guide App Connect | Potential | Business
Guide
GuideMe! with
Tourist Name online status
A L E RT !
Hi There!
Trip Title
You aren’t Signed In Yet
Sign Up
e!
Duration
Log In
Details
or Tourist Name
Sign Up or Log In
Origin - Language
Sign Up
Co n f i r m Guide With Us Explore Indonesia Don’t Know Where to Go? Language
Home Page
UI/UX Portfolio
Fachrian Nabil Fauzi
Help
Contact Us
Sign In Page
Start typing ... Home
Pending
Inbox
Performance
Account
Guide Home
Chat Page
Guide.Me App 2018
DelaNas Delivery Service on A National Scale
LEARN
Product Management UX Research UI Design
Portfolio
14
Delanas
Design Sprint DELANAS is an application that offers assurance and safety to people that have sent packages or waiting for one. At the same time being able to track it with ease and accuracy. Team of 4 Role: Team Lead, UI/UX Design
UI/UX Portfolio
Fachrian Nabil Fauzi
Delanas App 2020
Portfolio
15
I like to buy stuff online and ship them to my house or office, but sometimes I lose track of my packages and ending up panicing Eka Duta
E-commerce Customer
I get really anxious when i don’t know where & when my package is arriving, because sometimes I purchase large amounts of good for my offline store Mar Anion
Offline Store Owner
UI/UX Portfolio
Fachrian Nabil Fauzi
Delanas App 2020
Portfolio
16
Ideation of Application Problem
Package Location Unknown
How Might We Locate The User’s Package Solution
Tracking Application
Real Time Tracking
Courier Chat
User Story
User Story
My order Status
Package Check Points
Order List
Order Detail
Order Detail
Order Detail
Location Point on Map
Chat Platform (Text Only)
Order Status
Intergration Fleet Management System
I want to see
UI/UX Portfolio
Fachrian Nabil Fauzi
I want to see
User Story
I want to talk/text
live with the Driver/Courier
Delanas App 2020
Portfolio
17
Application Wire Framing
User/Courier Profile
Shipping Status Page
Detailed Status Page
Live Tracking Page
UI/UX Portfolio
Fachrian Nabil Fauzi
Delanas App 2020
Portfolio
18
Application Flow Splash Screen
Home Screen
Invoice Search Status Page Detailed Page
Recepient Detail Receipt Number Checkpoints Live Location
Account
Side Bar
Log In Chat Invoice Notification
Member’s Only
Contact Us Logout UI/UX Portfolio
Fachrian Nabil Fauzi
Delanas App 2020
Portfolio
19
Application Wire Framing
Halo!
Anda belum terdaftar
Sign Up
Log In
or Email Password
L a c a k Pa ke t
Sign Up Language
Home Page
Help
Contact Us
Side Bar
Package Image
Andrew Johnson No Resi 123A50 D eta ils
Suhaimin S DS 3245 DDA - Kurir Detai ls
Tiba :+_ 167 menit
Bl o k n o . 2 B A , A p a r t m e n L o re m , J a l a n I p s u m , S o l o m , Do l o r, A m e t - 0 6 4 0 6 0
Lacak Langsung
Detailed Status Page UI/UX Portfolio
Fachrian Nabil Fauzi
Live Tracking Page Delanas App 2020
Portfolio
20
UI Elements Color Palette The colors are selected based on DelaNas identity colors
#d4ebf8
#9fc9e4
#4d7f97
#002a41
#f05052
Typography
Stylish Button
Main Text
Coolvetica
Roboto Black
Coolvetica Regular
Roboto Regular
To Convey Assurance of Brand Image
To Ensure Readability
Roboto Light
Usable Icons
UI/UX Portfolio
Fachrian Nabil Fauzi
Delanas App 2020
baran energy Redesigning Company Website
LEARN
UI/UX Design Website Design Precedent Study
Portfolio
24
Company Website Redesigning Project BARAN ENERGY is a renewable energy company developing lithium ion batteries for every day use. The redesigning of the website is to update their designs and enhance user’s experience while on it. Team of 3 Role: Head Designer, Precedent Study
UI/UX Portfolio
Fachrian Nabil Fauzi
Baran Energy Website 2020
Portfolio
25
Website Precedent Study This precedent study is conducted on websites of prominent renewable energy companies, to understand user flow and how to convey their message to their consumers 1. Tesla Energy
Innovative | Minimalist | Modern
Portrait implements the usage of product
2. Cypress Creek Renewables
Informative | Portrait | Story Based
The image gives a sense of what they do
3. Next Era Energy
Reality | Simple | Data Based UI/UX Portfolio
Fachrian Nabil Fauzi
Words are used to convey their message
Baran Energy Website 2020
Portfolio
26
Website Requirements We want to ensure users that come to our site immediately understand what we do and easily navigate our website
Website Keywords Informative
Portrait
Modern
Simple
Story Based
Innovative
Overall Website Flow Home Page
Main Page
Sub Page
Main Pages Home Property
About Us
Power
Electric Vehicle
Opportunity
Event
News
Sub Pages Power
Electric Vehicle
Opportunity
Power Wall
Kujira
Membership
Power Pack
Conversion
Enrollment
Power Cube
UI/UX Portfolio
Fachrian Nabil Fauzi
Baran Energy Website 2020
Portfolio
27
Website Flow Home Page
Home Screen
Main Product About Us PowerWall PowerPack PowerCube Learn More
Side Bar
Story
Sub Pages Opportunity
Power Events EV News Property Contact UI/UX Portfolio
Fachrian Nabil Fauzi
Baran Energy Website 2020
Portfolio
28
Main Product Sub Pages Flow Baran Power
Home Screen
PowerWall Detailed Page
Product Details Estimated Expense Payment Mechanism
Check Out PowerPack PowerCube Detailed Page Product Description
Inquiry
Baran EV
Home Screen
Coming Soon
Baran Property
Home Screen
Product Description
Inquiry
UI/UX Portfolio
Fachrian Nabil Fauzi
Baran Energy Website 2020
Portfolio
29
Baran Opportunity Sub Page Flow Baran
Opportunity
Home Screen
Baran Member Landing Page
Brief Explanation Perks of Membership
Installation of Product
Membership Fee FAQ Membership Form
Click & Share Detailed Page Product Description
Form Links
Fast Track Detailed Page Product Description
Form Links UI/UX Portfolio
Fachrian Nabil Fauzi
Baran Energy Website 2020
Portfolio
30
Website Wireframing Landing Page
Landing Page
Estimated Expenses About Us
Check Out Data Form
Overview
Product Page
Home Page
Product Page
Landing Page Contact Page
Contact Us Descriptions
Check Out OfďŹ ce Contacts
Google Maps
Descriptions
About Us Page UI/UX Portfolio
Fachrian Nabil Fauzi
Contact Page Baran Energy Website 2020
Portfolio
31
UI Elements Color Palette The colors are selected based on Baran Energy Company Identity
#04acd4
#82c8ee
#2ba2b2
#064060
#1f2942
Typography
Stylish Button
Main Text
Space age SPACE AGE
Roboto Black
To Convey Modernism & Innovative of Company
To Ensure Readability
Roboto Regular Roboto Light
Usable Icons 24
UI/UX Portfolio
Fachrian Nabil Fauzi
7
Baran Energy Website 2020
Portfolio
32
Home Page Mock Up
UI/UX Portfolio
Fachrian Nabil Fauzi
Baran Energy Website 2020
Portfolio
33
Baran Power Sub Page Mock Up
UI/UX Portfolio
Fachrian Nabil Fauzi
Baran Energy Website 2020
Portfolio
34
Baran Member Sub Page Mock Up
UI/UX Portfolio
Fachrian Nabil Fauzi
Baran Energy Website 2020
Looking forward to work with You
Thank You
087878527548 rianabil@gmail.com Fachrian Nabil Fauzi