UX UI
it always seems impossible until its done
Nelson Mandela
Contents Foresocio
UI/UX design 2017, freelance work in Labtek Indie
Towa!
UI/UX design 2016, Academic work
Extramarks
UI/UX design 2018, freelance work in Labtek Indie
Other Works Book Layout Design Freelance Work in 2017-2018
3D Modeling Design
Self Project
2D Graphic Design Freelance Work in 2017-2018
FREELANCE WORKS AT :
Role: UI Designer Output: Mobile Apps (user) & Web (admin)
Work in: multidisciplinary team
Circa: Sept-Dec 2017 methodology & project management: SCRUM (Sprint Based)
Client :
Software/apps used :
Heal the Earth, Together.
Socio-environmental acitivity project; social media & photo sharing apps about our own socio-environmental activity.
Project Overview PROBLEM Needs of platform that focus for regularly encourage ourself and people to care, do planting tree and other environmental activity, together.
KEY POINT Regularly Encourage Care Together
Ideation K E Y P O I N T
Regularly Encourage
platform that have content about environmental activity and daily updated
Care Together
have abilities to interact with other user, and involved in other’s activities.
User Generated Content (UGC) - Platform Social Media
SOLUTION Photo sharing platform especially designed for archiving tree planting and involving other into environmental activities; We can share the photos, date, event, participant and even the location map.
Sitemaps based on keypoint elaboration, we can make the sitemaps. Sitemaps help us to see clearly how the user journey is and what features the apps need to have.
Wireframe After finished with Sitemaps, we make wireframe as low fidelity prototype to become apps’s UI framework. As seen on this side
User Interface
INTRO
LOG IN 1
LOG IN 2
MAIN PAGE/ TIMELINE
FLOATING BAR/ MENU
TAKING PHOTO
PRE-POST PHOTO
PROFILE/ PHOTO COLLECTION
PROFILE/ PHOTO LOCATION
ACTIVITY LOCATION
LIST Of EVENT (DAILY)
LIST Of EVENT/ (MONTHLY)
EVENT DETAIL
PHOTO POSTED
Main Features
Posting Photos, Share We can post our planting and other environmental activity photos, with other details information such as : event’s date, what you’ve planted and the location.
List of Events, Never Missed Any Page that inform the upcoming events date, with detail information about event’s name, duration, location and event’s capabiilty for receive donate/not.
Information Page, Anything You Need to Know
Geo Tagging, More Effective Movement
There’s a lot of information, such as the date, location, area and even the seeds you want to plant! So everyone knows when and wheere is your event and join force with you to make World Healthier!
Tag your event’s location, so everyone know where you’ve done your event and know where to do next.
Web Page (dashboard) Admin page, for taking decision about accepting/not verified-account request and event submission. Here, admin can see directly the detail of any user account and events, as consideration for accepting or not the request and submission.
Features List of Event Submission & Verified Account Request Using Deck System so that the main information displayed clearly. Easy to Manage, as it neatly displayed and Sorted by time it appears.
Event and Account Details Admin need to know thoroughly about the event and account before giving the event permission and account verification. Deck System gives you neat display of information about Event and Account details so that the Admin can study it with comfort.
Style Guide This style guide explain all the visual element that used on this apps.
Typography ROBOTO ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()_
Color Pallete
Medium Tertiary Color RGB : 105; 160; 66 CMYK : 65; 17; 100; 2 HEX : 69a042
Background Color #3 RGB : 245; 246; 248 CMYK : 3; 1; 1; 0 HEX : f5f6f8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Regular Secondary Color RGB : 138; 196; 75 CMYK : 51; 1; 93; 0 HEX : 8ac44b
Background Color #2 RGB : 249; 250; 252 CMYK : 1; 1; 0; 0 HEX : f9fafc
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Light
Secondary Color RGB : 138; 196; 75 CMYK : 51; 1; 93; 0 HEX : 8ac44b
Background Color #1 RGB : 255; 255; 255 CMYK : 0; 0; 0; 0 HEX : ffffff
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Light Italic Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Letter Display
Button Types
Date 48pt
Add
AJUKAN DIRI
Page Title
20pt
Tab Title 16pt
IKUT BERPARTISIPASI
Month 16pt Option 16pt
KIRIM
PILIH GAMBAR
BANTU BIB IT
Masuk
Daftar
Event title 14pt Event duration
12pt
Profile name
11pt
Search Fields Search
Body 11pt Last online 10pt Event location 10pt
| Pandch
Tab Bar
Cancel
Heal the Earth, Together.
ext
Towa!
ACADEMIC WORKS
Role: UI/UX Designer Output: Mobile Apps Mock up
Work in: multidisciplinary team
Circa: 2016 methodology & project management: -
Client : -
Software/apps used :
Yuk Beraspirasi!
Problem Background
Non-Neutral Media. Most of Indonesian media don’t show their neutrality when making a news.
There is no clearly way to give aspiration to government. Aspiration mechanism is still complicated for Indonesian society.
No transparency in policies making. No transparency from government to society when policies were made.
Solution An online platform that :
Non-Neutral Media.
provide information about our government and House of Representatives activities, directly from them so that society understand and know where’s the country will go
There is no clearly direct way to give aspiration to government.
help people to give their report and aspiration to the House of Representatives. so that our Representatives know what’s the right thing to do and why.
No transparency in policies making.
help people to know what is the background for every decision that government takes. this can increase people’s trust to the government and House of Representative.
Better government and society’s life
Vote
Give society’s opinion & reason to government
Learn
Give people information and knowledge
Discuss
Share our opinion and idea with others in forum
Check
Know how government respond to the opinion
Wireframe
User Interface
LOG IN 1
LOG IN 2
MAIN PAGE / TIMELINE
MY PROFILE
KAMERA
OTHER PROFILE
PRE POST PHOTO
ASPIRATION TRACKING
Main Features
Aspiration sharing & Comment section Share your thoughts! With photo, caption and geo tagging, you can give the complete information about your aspiration.
Track your aspiration in real time We can send our aspiration directly to our representatives in HoR and we can track the progress in real time until it realized, or maybe not.
Democracy cannot succeed unless those who express their choice are prepared to choose wisely. The real safeguard of democracy, therefore, is education. Franklin D.Roosevelt
Yuk Beraspirasi!
ext
Extramarks
FREELANCE WORKS AT :
Role: UI/UX Designer Output: Working Mobile Apps and Website
Work in: multidisciplinary team
Circa: 2018 methodology & project management: SCRUMBAN
Client : EXTRAMARKS
Software/apps used :
Brand Activation Event’s
Mobile Apps & Website
Project Overview EXTRAMARKS is a mobile quiz application for educational event : EXTRAMARKS SMART CHALLENGE, an playground that enhance people (participant) to learn by playing around and do the quizes. There are two application that interconnected here, Main apps and Clue Apps.
Main Apps
Clue Apps
Here is the place where user take the quiz, from the elimination to the final stage. Moreover, Users can take a trial stage first for practice before go into the elimination stage.
Clue is application that fuctioned as supporting system for main apps and contain insights (help) for any question on the main apps. Users have to move around to tower area to use this apps.
Application Features
Template Design (Wireframing)
User Interface
LOG IN
GREETINGS PAGE
QLUE NOTIFICATION PAGE
FINISH SESSION PAGE
MAIN MENU
PREPARATION PAGE
QUESTION PAGE
User Interface
MAIN MENU
QLUE UMUM/IPA 1
QUESTION LIST UMUM/IPA
QLUE UMUM/IPA 2
QUESTION LIST SMP/MTK
QUESTION LIST SMA/IPS
Features
Website There are 3 pages on the website: 1. Home page First page that shown and contain Event’s logo, date and Register button 2. About Us Contain all information about EXTRAMARKS and the event 3. Register Contain all filling bar for registration
Features Main Apps This QUIZ apps contain 3 main menu: 1. Trial Place where users can try the quiz step by step 2. Elimination Real quiz for users, just one and only chance to answer all the question and make your own record! 3. Final only best of the best users that can join in this final chapter and have a chance to win the prize!
Features Clue Apps On this apps, users can see the information/trivia about the last question that cannot be answered, so that users know what is the right answer for that question. This apps, can only be used in Clue Tower, so the users need to go to the tower for using this apps.
Project : Expedition Report “Kulat East Borneo 2016” Client : Kulat Expedition Team - WANADRI Year : 2016 Page : 38
Some contents from this books
Project : Expedition Report “Gemuruh Pemuda di Riam Celebes” Client : Salu Uro Expedition Team - WANADRI Year : 2016 Page : 141
Some contents from this books
Project : ALFORM EFFECT Book Client : PP - AYOMA Apartment Year : 2018 Page : 126
3D MODELING DESIGN
Fritz hansen RIN CHAIR-HK15 TM
3D MODELING DESIGN
Selfmade Ring 2015
GRAPHIC DESIGN
FREELANCE Works COMPILATION
These are my work with my freelance partner Viandria Athia. Most of the clients are doing their business in Bogor, West Java.
GRAPHIC DESIGN
My Lash - Packaging. 2016
BC’s Plate - 2016 (first indonesian pepper rice in Bogor)
GRAPHIC DESIGN La Cocina - Logo. 2017 (first enchiladas and other mexican dishes in Bogor)
Grey Logo
Visual Stocks
White Logo
GRAPHIC DESIGN
Color Pallete
Menu
3D Model Packaging
GRAPHIC DESIGN
Martabak Boy - Branding. 2017 Online based martabak in Bandung
Packaging Cover Logo Characters
ext
Personal Profile
PERSONAL PROFILE
CURICULUM VITAE
education
organization exp.
2012-2017 Bachelor of Product Design Faculty of Art and Design Institut Teknologi Bandung (GPA: 3,48)
2015-2016 President at INDDES-ITB
2009-2012 SMAN 3 BOGOR
skills COMPUTER SKILLS
2014-2015 External Minister at INDDES-ITB
Pr
Adobe -Photoshop -Premiere -Illustrator -After Effect -Indesign -Experience Design (XD) Rhinoceros Google Sketchup
Muhammad Pandu Prakasa Hutagalung
Keyshot
Bogor, Jawa Barat 2 february 1994
Microsoft Office
Kampung Ciparengga Jl. Roda Pembangunan No. 39, RT 03/04 Cibinong, Kabupaten Bogor
Other Skills
0811-1194-022
Team Management
pandu22hutagalung@gmail.com
Public Speaking
Leadership
Photograpy Has deep interest in Sustainbale Design, social innovation, homeliving products, fashion, IoT, public furniture and traveling.
Cinematography Modelling - Resin, Clay adn 3D
Pe 2016 Vice Chairman Operational at INDESIGNATION by ADPII
2013-2014 Second Secretary at KMSR ITB 2014-2015 Art Director at Boulevard ITB
2013-2014 Chief of Logistic Stand Division at Pasar Seni ITB 2014 2013 Mentawai Expeditor at Ekspedisi Pelita Muda
CURICULUM VITAE
work experience
ersonal PRODUCT DESIGN
UI/UX DESIGN
GRAPHIC DESIGN
Chief Designer and Product R&D GUTEN INC (full time)
Freelance UI/UX Designer at LABTEK INDIE EXTRAMARKS Apps and Websites
Freelance Layouter & Graphic Designer PP CONSTRUCTION - BOOK June 2018
May 2017 - September 2018 @guteninc
Product Design Intern CONTURE INDONESIA Jul 2017 - Aug 2017 @contureindonesia
July 2018 @labtekindie
Freelance Brand Designer BARAYA TRAVEL - REBRANDING
Freelance UI/UX Designer at LABTEK INDIE Foresocio Apps - SINARMAS
Feb 2017 - April 2017 @barayatravel
Sept 2017 - Dec 2017 @labtekindie
Freelance Graphic Designer MARTAVAK - BRANDING
rofile Freelance Product Designer LABTEK INDIE - ULTRAMIMI, INTERACTIVE WALL Jul 2017 - Aug 2017 @labtekindie
Jan 2017 - Feb 2017 @martavak
Freelance Layouter & Graphic Designer WANADRI, SALU URO TEAM EXPEDITION BOOK June 2016
Freelance Layouter & Graphic Designer WANADRI, KULAT TEAM EXPEDITION BOOK 2016
Thanks.