DESIGN PORTFOLIO Design Process | Artwork Samples | Commentary & Thoughts
Curated on January 2021
Project Name: MA’LAM (2019) Keywords: Informative Game, Awareness Campaign, Design Research, UI/UX
Why Does It Matter? Ma’LAM is my University Final Project. The project was a 3-person team effort and has been developed carefully for over six-months. While challenging, the project has taught me various hard skills and soft skills such as managing resources and team communication.
Project Profile Type : Educational Mobile Game My Role: UI/UX Designer & Researcher Design Process: Design Thinking (Stanford d. School) Objective: To Inform the cause & effects of Light Pollution in Jakarta Media Output: Android Mobile Game (2D platformer, stealth, adventure)
Project Background
As Indonesia’s Capital City, light pollution in Jakarta is inevitable. Unfortunately, Jakarta Citizens have little to nonexistent awareness about the danger of light pollution which may affect human health, energy waste, and environmental disturbances. To contribute to local and international campaigns to raise awareness, a new media to introduce light pollution is introduced to the younger generation in the form of a mobile game.
1
Game Sitemap Below is the simplified game sitemap from MA’LAM’s opening sequence to the gameplay which includes two types of minigames. Here you can observe the interconnected sites within the game application. MA’LAM’s system is designed to be open and organized with the help of tabs and sub-tabs features. The tabs are designed to organize different information that could be easily accessed from the game’s main menu.
1
7
14
17
2
6
15
18
3
4
16
5
19
8
9 1. Logo Sequence - UMN 2. Logo Sequence - Developer 3. Loading Game Page 4. Game Cutscene - Prologue 5. Landing Page 6.Information Tab - About Game 7. Information Tab - About Developer 8. Level menu 9. Tutorial Sequence 10. Gameplay 11. Stage Cutscenes 12. Minigame (stage 3.2) 13. Minigame (stage 1.1 - 3.1) 14. Setting Menu - Tutorial 15. Seting Menu - Adjustment 16. Setting Menu - Save Game 17. Collection Menu - Characters 18. Collection Menu - Objects 19. Collection Menu - Stories
11
10
12
2
13
Gameplay Overview The game is a 2D platform with a retro and sci-fi theme. Players control a stranded Alien who’s mission is to explore Jakarta and find his missing crew. Players must avoid contact with humans by disabling or avoiding excess illumination. Stages are cleared by finding the best route to escape and using the character’s special ability. The game starts with a tutorial stage and gradually progresses to more difficult stages. Through the gameplay, players can collect pictures and information about characters and artificial light sources. Within each stage, there is a mini-game for cutting electricity and unlocking the next level.
Loading game
While waiting for the game to load, players get to read facts about light pollution. The displayed visual hints the sci-fi nature of the game as well as its relation with the condition of a polluted night sky.
Cutscenes
After the game loads, players are introduced to the game’s background story. Stories are told through comic chapter.s Cutscenes will re-appear at the start and end of each game stage. Each cutscene’s chapters are collectible and can be viewed again from the story tab within the collection menu.
Landing Page
After the opening cutscenes, the display screen pans towards the skyline of Jakarta, followed by the appearance of the game title. The landing page is animated with a loop of blinking lights. From the landing page, players get to access the information page, game funding/ donation link, and the game’s main menu page.
3
INTERFACE & EXPERIENCE: MENU Level Menu
MA’LAM possesses 6 different stages, each stage represents a popular district or area in Jakarta and is proven to be some of the brightest at night based on research. As the game progresses, challenges within each stage will gradually become more difficult. A cleared stage is indicated with the change of sky color and the darkening skyline illustration within the level menu.
There are 6 choices of levels divided into different areas in Jakarta most polluted by artificial lights.
Stage 1.1
Stage 1.2
Stage 2.1
Stage 2.2
Stage 3.1
Stage 3.2
4
INTERFACE & EXPERIENCE: GAMEPLAY
1
2
3 4 5 6
7 During gameplay, players are aided with wayfinding hints, tutorials, and different status panels that indicate achievement, location, health, and possible interaction with surrounding objects. There are two types of minigames within the gameplay, with the second type only accessible at the game’s final stage. Throughout the gameplay, players get to collect characters & objects
1. Mission Panel Button 2. Character Movement Buttons 3. Pause Button 4. HP Bar 5. Jump Button 6. Interaction Button (collect, speak, shoot) 7. Navigation Hint Button
5
INTERFACE & EXPERIENCE: GAMEPLAY
Asset Design The assets intended for the gameplay and menu interface are designed with Aseprite, a software specialized for producing pixelated visual style. The produced assets underwent assembly process in adobe photoshop for producing user interface mockups. The assets and mockups were then relayed to the coding team to be assembled in Unity game engine. The holographic sci-ďŹ visual style for producing the assets are based on existing media research.
6
OTHER NOTABLE INTERFACES
Setting Menu
Game Information Menu
Character Collection Menu
Game Developer Information Menu
Object Collection Menu
Tutorial Menu
Save Game Menu
Story Collection Menu
7
[ Design Process ] Background Problem Research
Why : To determine a real problem in Indonesia which could be solved through interactive design, to validate the problem’s urgency and feasibility to be adapted into a design solution.
Expert Interview at Jakarta Planetarium
Literature Study about Light Pollution
Questionaire-Based Survey (Quantitative & Qualitative)
Design Framework: Design Thinking
Why : Design Thinking would best deliver success for the project, based on the user-centered metrics used to measure the project’s success.
8
Field Observation at Jakarta Metropolitan Area
[ Design Process ] Empathise
Why : To gain an understanding of the intended users’ stances regarding the design’s problem, & solution and to gather information about users’ understanding of light pollution.
On-Siite Design Target/User interview
Acquring Data The data gathered from empathizing with users. were acquired digitally. The main focus of this phase is to collect qualitative data that are completed by interviewing targeted users on their natural environment which is Jakarta’s Metropolitan Area. The secondary method of collecting data is conducting a survey by distributing digital questionnaire. The content of the questionnaire is users’ playing preference, users’ stances in perceiving information through gameplay, and users’ habit of playing games.
Questionaire-Based-Survey 2 (Quantitative & Qualitative)
9
[ Design Process ] Define
Why : To underline problems that needed to be addressed within the intended solution & to plot prompts and keywords as the basis of design ideas.
Think/Feel: ◆ Thinks that Jakarta has many problems with pollutions and feels a bit curious ◆ Feels bored with learning about environmental issues at school ◆ Has no empathy with light pollution issue ◆ Feels just fine with how she live right now
See ◆ See Jakarta being lit at
from science teacher
night everyday.
◆ Hear that light pollution is related to waste of energy,
◆ See a natural dark sky once when she was little on
but couldn’t find any relevance with her lifestyle.
a family vacation, can’t remember much though.
Say/Do ◆ Plays games and watch movies with sci-fi themes ◆ Answers questions about pollution issues in a text-book manner ◆ Pulls heavy curtains at night before sleep to avoid city lights
Pain
16 Y.O, Jakarta
education: college Economy: Middle
education: High School Economy: Upper-Middle “ I think I’ve hear about light pollution in school but i’m not so sure...is it a real issue though?”
Chandra 16 Y.O, Jakarta education: college Economy: Middle “Huh I couldn’t sleep because of light pollution, for real?”
◆ Astronomy Enthusiast ◆ Loves Nature ◆ Casual game player ◆ Familiar with light pollution, doesn’t know light pollution’s consequence outside astronomy activity. ◆ Know that he is exposed to light pollution in Jakarta
◆ Lives in a high-rise apartment in Central Jakarta. ◆ Loves anything to do with science fiction ◆ Casual game player ◆ Heard about Light Pollution
Overview: Istar is a Physics Major Student in Jakarta who came from Bogor. Back in High School, he joined an Astronomy club. He is dissapointed that he won’t have much chance to Stargaze in Jakarta.
Overview: Stella is a student has lived in Jakarta ever since birth. She’s used to the brightly lit night sky in the city and doesn’t really pay attention
Overview:
towards light pollution’s negative impacts.
located right next to a brightly lit road even some blinds couldn’t help.
passingly at school ◆ Unknowingly exposed to light pollution
◆ Just moves to Jakarta ◆ Enthusiast game player ◆ Has some trouble with sleeping patterns ever since moving out ◆ Never heard about Light Pollution ◆ Has experienced the contrast between light pollution and normal night environment
Chandra has just moved to Jakarta to study design. Recently he experienced some problem with sleeping. His dormitory room is
User Personas Development
Gain
◆ Can’t really relate to the imporance of fighting against environmental issues due to comfortable lifestyle ◆ Family unknowingly wastes energy ◆ Gets C- for school project about action against environmental issues in Jakarta
Stella
21 Y.O, Jakarta
“ I Know that light pollution disturbs stargazing activity, I never heard that it is bad for our health!”
Hear ◆ Hear about light pollution
Istar
◆ Be more conscious with lifestyle’s choices related to light pollution ◆ Learn the importance of preventing light pollution and other environmental issues ◆ Gain more knowledge about a relevant bit of information to her daily life
Mindmapping
Emphaty Mapping
Digital Card Sorting Sample
10
[ Design Process ] Ideate Empathise
Why : To explore gain understanding solutions & determine of the intended the best users’ strategy stances to deliver regarding design thefor design’s the intended problem, users. The & solution ideation and process to gather addresses information issuesabout fromusers’ the define understanding phase in the about formlight of design pollution. strategies..
Literature Study
Existing Media Study
Designed Game Ideation Diagram
Moodboard Creation
11
[ Design Process ]
Gathering Design References
Visual Style Comparison
Information Architecture Diagram & User Flow Diagram Sample
12
[ Design Process ] Prototype
Why : To deliver design in accordance with visioned ideas . The produced designs undergone several iterations for the sake of ďŹ nding the right balance between what users need and want.
Menu & Gameplay Wireframe
Design Sketches
System Icon Design
13
[ Design Process ]
Interface Assets Design
Interface Layouting & Interface Iterations
Alpha & Beta Prototype production
14
[ Design Process ] Test
Why : To prove the effectiveness of design with the intended users themselves. The users’ experience when interacting with the design is analyzed in a set of metrics to measure success.
Alpha Test
Beta Test
15
Project Name: HE/RO (2019) Keywords: Children’s Development, Gender Equality, Role Model
Why Does It Matter? HE/RO was developed as part of a team for Human-Computer Interaction Course in College, the purpose of this project is to explore digital game’s influence in early-age children’s mental development as well as gender and role-model perception
Project Profile Type : Casual Mobile Game My Role: UI/UX Designer Design Process: Design Thinking Objective: To create a game that encourages children to explore their ideal type of heroes regardless of gender Media Output: Mobile Game, AR exploration
Project Background As highlighted by UN’s Sustainable Development Goals (SDG) for 2030, gender inequality is one of the world’s current issues, especially in Indonesia where there’s still prominent segregation between gender roles and expectations. The segregation is observable in the upbringing methods of children where boys are given strong and assertive role models while girls are given nurturing and graceful role models. While all the aforementioned qualities are equally positive, children should have the right to choose role models that best fit their traits and personalities regardless of gender stereotypes. With HE/RO, children are encouraged to do activities by themselves or with adult supervision to explore the type of heroes they admire and/or aspire to be. By reflecting on different positive traits of heroes, it is expected that children may grow up without the burden of fitting into a specific set of gender expectations and focusing on their own set of qualities instead.
16
INTERFACE & EXPERIENCE General Overview HE/RO is a hybrid media between a mobile game and a coloring activity book. Children are encouraged to color and add features in a set of scannable drawings which could be saved digitally within the game application as playable characters. Younger children may be aided by adult figures while operating the scanning feature.
Main Menu / Landing Menu
When opening the game application, players are greeted with a default playable character. Within the main menu, players get to access the AR camera, setting menu, character collection menu, and HE/RO selection feature to be played within the game. Players could also change the background to day or night mode.
Picture Book & Scanning Feature Players color and draw on a special coloring book with a set of AR markers. There are different options of characters and objects to color, all of them are scannable to be used as main characters or obstacles within gameplay. Players tap the camera button on the main menu to open the app’s camera which would automatically save the drawings within the app.
Collection Menu The scanned objects from the drawing books will be organized within the collection menu as “Hero”, “Enemy”, or “Others”. The capacity to save objects are limited so players may delete drawing that they no longer use. The characters in the hero collection page will automatically appear on the main menu for character selection. Players may see the achievement badges of their characters within the collection menu. Enemies and Objects may appear randomly within gameplay if players activate the “use” button within the collection menu.
17
INTERFACE & EXPERIENCE
Stage Selection Menu
Players start on Earth as the easiest stage within the game. Players will unlock new planets when they successfully cleared stages. As the stage progresses, the obstacles will get more challenging in regards to quantity and speed.
Gameplay
Players control the hero that they previously created. They get a set of health points at the start of each stage. As the stage progresses, the health point capacity may increase. Players lose a health point when their characters made contact with an obstacle. Players control movements by dragging the character with one hand and making tapping gesture on the screen with the other hand for shooting beams. With each hit to obstacles, players get to increase points.
Stage Clearance
Players clear the stage when they pass the end of the stage without losing all of their health points. When they clear all obstacles on certain planets, they will get a special achievement badge. After clearing the stages, players get to choose between quitting gameplay, replaying the stage, or going to the next stage. If players lose all their health points in the middle of the game, the game over panel will appear, and the next stage will remain unlocked.
18
OTHER NOTABLE INTERFACES
Paused Gameplay
Setting Menu Pop Up
Pre-Iterated Game Interface
19
[ Design Process ]
Literature & Media Study for Design Problem Research
User Persona Development
Mind Mapping Information about Gender Role and Children
20
[ Design Process ]
Color Palette, Moodboard, & Design Reference Exploration
User Flow Diagram Development
Peer-Testing Survey
User interface Sketches
21
Project Name: My UMN (2019) Keywords: Digital Student Center, Mobile Application Development
Why Does It Matter? The team project is given as part of an assessment for Interface Design Course in college. This is the first full-length project that preserves the documentation process of Design Thinking from empathy to prototyping stage by utilizing different design development methods.
Project Profile Type : Mobile Application My Role: UI/UX Designer & Researcher Design Process: Design Thinking Objective: To adapt Multimedia Nusantara University’s student center website into a mobile version. Media Output: Digital Mobile Interface Prototype
Design Excerpt
Log In
Log In Page Users Input student ID and password to enter and use the application.
Home Page Consists of personalized student information display and campus / university events.
Hamburger Button To access other pages aside from pages displayed by the hot buttons at the bottom.
Quick Schedule Displays information about daily schedule. Users may search for a specific date to display.
Student Attendance Displays attendance records for each course within a semester. Past records are accessible.
Student Information Displays student data & access to data editing settings. Some data is automatically updated.
Restricted Page Pages that are restricted for usage due to maintenance or unmet student requirements.
SKKM Summary Displays accumulated points of student extra credits from four different categories.
SKKM List Displays records of student engagement with campus activities for extra credits.
SKKM Details Displays extra credits records by category. The page is accessible from SKKM Summary.
22
[ Design Process ]
XŞ̒ XZ ij³ĐÔ̒AÔØĐĿôĿŞ NńĈô³̒PôĎÍØijĈŞ XØĈôķķ³̒>³ĎŦ³ñ Zôķ³̒yńijĐ³Ď³̒N˝
ˀˀˀˀˀˀˁ˅ˇ˃˂ ˀˀˀˀˀˀˁ˄ˁˆ˅ ˀˀˀˀˀˀˁ˄ˇˆˉ
ij³ĐÔ̒Z³ĎØ̒ Ř³ijØĐØķķ Ɣ Ɣ Ɣ Ɣ Ɣ
0DKDVLVZD 801 VXGDK VDQJDW DZDUH GHQJDQ 0\ 801 $ZDUHQHVV GLNDUHQDNDQ PDKDVLVZD ZDMLE PHQJJXQDNDQ 0\ 801 XQWXN DNVHV NHEXWXKDQ NXOLDK .56 FHN SUHVHQVL PHOLKDW QLODL GVE
$ZDUHQHVV GLPXODL VHMDN SHUWDPD NDOL PDVXN NXOLDK EHUNDW XVDKD VRVLDOLVDVL GDUL NDPSXV -DVD OD\DQDQ \DQJ GLWDZDUNDQ GLNHQDO VHFDUD XPXP VHFDUD VSHVLõN MDVD NXUDQJ GLNHQDO ,QIRUPDVL PHQJHQDL EUDQG GLUDQJNXP GL EXNX SDQGXDQ QDPXQ MDUDQJ GLDNVHV PDKDVLVZD DZDUHQHVV WLPEXO GDUL 7ULDO DQG (UURU
yØijÎØôŗØÔ̒{ń³ĈôĿŞ Ɣ Ɣ
Ɣ
Ɣ
0DKDVLVZD PHQJDQJJDS NXDOLWDV 0\ 801 PDVLK EXUXN %XUXNQ\D SHUVHSVL NXDOLWDV GLDNLEDWNDQ õUVW LPSUHVVLRQ \DQJ NXUDQJ EDLN GLOLKDW GDUL YLVXDO ZHEVLWH LQIRUPDWLRQ DUFKLWHFWXUH \DQJ NXUDQJ RSWLPDO
3HUVHSVL NXDOLWDV 0\ 801 \DQJ EXUXN GLSHUNXDW GHQJDQ SHQJDODPDQ 0DKDVLVZD GDODP PHQJDNVHV õWXU NXUDQJ PHPXDVNDQ PLVDOQ\D VDDW .56 7LPH RXW ELQJXQJ PHQFDUL LQIRUPDVL GRVHQ SHPELPELQJ GVE
%HQFKPDUN GDUL 3HUFHLYHG TXDOLW\ GLOLKDW GDUL VLWXV UHVPL NDPSXV ODLQ \DQJ OHELK EDLN ( OHDUQLQJ JDSXUD GVE
Brand Identity Analysis
Primary User & Secondary User Interview
Quantitative & Qualitative Digital Survey
23
[ Design Process ]
Primary User Persona Development Ibu Susie (64) Orangtua Murid
Secondary User Persona Development
Scenario
Goals
Expectation
Ingin cek nilai anak, apakah harus mengulang mata kuliah jadi bisa menyiapkan uang pembayaran kuliah semester depan
Tahu nilai anak. Tahu apa ada mata kuliah yang harus diulang. Tahu berapa jumlah uang yang harus dibayar semester depan.
Mudah melihat nilai anak. Mudah tahu apakah anak harus mengulang mata kuliah. Informasi soal pembayaran uang semester jelas.
Log in ke My UMN
Lihat Nilai
2. Cari Link student information 3. Cari link view student grades 4. Cari term semester yang dituju
1. Input email dan password anak ke halaman log in
Cek Saldo Uang Semester
Melakukan transaksi pembayaran
7.Cari link view student finance 8. Cek saldo di tab tuition account
9. Menghitung berapa uang yang harus dibayar 10. Melakukan pembayaran 11. Cek apakah transaksi berhasil
Verifikasi Nilai
5. View Detail nilai 6. Tanya soal batas kelulusan
gimana cara cek jumlah SKS dan harganya? (cek buku panduan dan attachment panduan pembayaran di finance notice) masi agak bingung, canggung mencari info
1 Tidak tahu email/password anak, anak susah dicontact, tunggu lama sampai anak kasih tahu password dan emal
2
3
Link cukup mudah dicari tapi tulisan kecil kecil tidak nyaman
Make it foolproof /intuitive! gunakan bahasa yang simpel dan mudah dimengerti Beri keterangan tambahan yang mudah diakses (dihover mouse, dsb)
Mudah cari view student grades karena opsi sedikit
Perbaiki interface supaya lebih nyaman dilihat dan diakses
4 Bingung harus lihat daftar semester yang mana, tidak terlalu paham soal hitung semester
5
Detail nilai kenapa 6 cuma baik, cukup baik, Telpon sangat buruk, anak, anak juga tidak dsb? paham Telpon student service informasi berputar putar, akhirnya dipandu download buku panduan akademik
Sediakan nomor hotline untuk mendapat info secara cepat
9
Mengikuti panduan dari attachment panduan pembayaran ke bank yang dituju 10
7
8
Kenapa Saldo Link sepertinya tidak student akurat dengan finance yang sudah cukup dibayar? kenapa mudah detail transaksi dicari dari membingungkan? student apakah info information sudah diupdate pihak UMN??
Buat halaman informasi khusus mengenai standar kelulusan kelas dan cara menghitung biaya semester
11 Kenapa setelah bayar tidak ada update info yang jela di my UMN? padahal di bank jelas jelas katanya transaksi berhasil Telpon BAUK untuk konfirmasi
Sediakan invoice digital yang dapat diakses di MY UMN
Sediakan kolom FAQ
NOTE: PASTIKAN ADA KOORDINASI ANTARA UX DESIGNER DENGAN PIHAK ADMIN / MAINTENANCE MY UMN / DAN PR UMN
User Journey Development
24
Segera update informasi di MY UMN, jka tidak bisa segera update, beri batas waktu untuk cek update kembali supaya user tidak cemas menunggu
[ Design Process ]
Design Moodboard Exploration
Color Exploration
Site-Map Development Gathering Design References
25
[ Design Process ]
Sketching & Paper Prototyping
Low Fidelity Prototyping
26
Other Notable Projects
Fun Litter Bin (2019) Keywords: Park Development, Anti-Littering Campaign, Design Proposal
Why Does It Matter? The opportunity to develop this project for my college course is memorable both in design and learning experience because my design team gets to explore interaction design outside the usual digital media, and second, because I get to work on a project topic I am passionate about which is nature / environment.
Project Profile Type : Project Proposal & Desin Research My Role: Design Researcher Design Process: On-Site Exploration, Design Exploration Objective: Develop interactive activity to reduce littering on a park in Tangerang, Indonesia. Media Output: Design Paper
Project Activities: ◆ On-Site Observation ◆ Targeted User Observation ◆ Literature Study ◆ Group Brain Storming Session ◆ Idea Development ◆ Making Personas & Design Sketches
Project Background Taman Kota is a city-owned park & popular recreational space in Tangerang City. But due to its popularity, the park is littered by non-degradable materials, bought upon by visitors and street vendors. Despite the park’s effort to stop people from littering, such as providing numerous litter bins and posting anti-littering signs around the park, litters can still be found in almost every park area, especially the picnic grounds. The issue is made worse by the park’s solution to dispose of the litter quickly, which is to burn them on the ground.
27
Overview
IV. PERSONAS
park with anorganic trash as well as being bothered by the personas is to create a user-targeted design which would help
Jati Gender: Male Age: 21 Occupation: College Student Education: Undergraduate Living Location: Karawaci, Tangerang
Jati is an architercure major college student undergoing his final thesis. He is a free spirit and a sensitive person who loves to explore and find inspiration through nature. Currently he feels burnt-out by college projects, therefore he needs to take a break and relax with his girlfriend somewhere out of the hustle-bustle of the city. It’s been a long time since his last visit to taman kota almost 4 years ago and he wants to experience a bit nostalgic
Think
“Wow, I haven’t feel this good since weeks. I think I’ll bring my girlfriend here more often.”
See
Park Layout, Greeneries, Park visitors
Feel
Relaxed, A bit melancholic
Do
Laying in picnic blanket, relaxing with girlfriend, Taking a smoke, People Watching
Overview
Poppy Gender: Female Age: 25 Occupation: Waitress Education: High School Living Location: Jakarta Barat, Jakarta
Overview
Poppy has planned a mini-reunion with her highschool friends and is quite excited about her long-awaited weekend excursion. They choose to meet up in Taman Kota 2 before continuing to hang out in a nearby mall. Poppy is a cheerful and confident person by nature and won’t waste her vacation time by not taking fun-spontanous photos of herself and her old friends. She thought that aside from the scattered litters, Taman Kota is quite a cool place to show-off on her Instagram Updates.
Think
“Jeez another cigarette butts, another food trash, I’ll just edit them out from my pictures later”
See
Mawar Gender: Female Age: 30 Occupation: Home Industry Owner Education: Business Diploma Living Location: BSD, Tangerang
Photo spots, the hanging bridge, flowers, Park facilities.
Feel
Content, Joyful, Playful
Do
Taking cool pictures, having a snack, exploring park
Page 5
28
Mawar’s son and daughter is nagging her to go some place fun one sunday morning. Her family is a frequent visitor to the park. Usually they go with her husband, but he is currently out of town. Mawar rather stayed home with her kids as they are quite chaotic when her husband is not around, but the kids won’t accept staying at home on a sunny sunday morning. So Mawar called her sister-in-law to help her watch the kids in the park. She thinks having little walk in the park wont hurt to
Think
“Oh God why do I agree to this, DON’T THROW THE FOOD AROUND, KIDS!”
See
Game stalls, Food stalls, her kids playing around. Pssing cyclists and joggers.
Feel
Overwhelmed, agitated.
Do
Watching her kids, taking a walk, have a mini-picnic
Parts
Mechanism
Flower display
1. Go to bag dispenser, take bag as needed. Dispenser scattered throughout the park
stepping mechanism
Materials: flower display: PVC Pedestal: wooden planks additional materials: screws, hinges, nails, alumunium / steel sticks
Hidden hole
2. Carry bag. Mobile disposal! Steps hidden chamber
Hidden mechanism
Alternative:
4. Find disposal area. Regular trash bin will also do, or carry litter until getting out of park area
III. SKETCHES
3. Gather litter, may share bag with other people
5. After finding disposal area, step on the puley system, flower bud will open to reveal hidden trash bin
dispenser material: acrylic/ pvc box, pvc standee.
Alternative shape: butterfly. Simpler, less grand, separated waste system (oranic / anorganic), double stepping area. Lid shaped like buttefly wing
Disposal installation: (rafflesia flower = unpleasant smell). Bud-shaped when inactive. Sepals open when mechanism is triggered. Mechanism mimics common trash-bin (lidded with stepping puley system)
Litter Bag Dispenser
provide steps for children
Hole at the center of flower
Push here
bag come out from below
elevated from ground for display
steps
Most common litter : plastic foodwares / food wraps. cigarettes
step here when capacity limit is reached: flower bud won’t open
Litter Bag Material must be degradable (Cassava-based plastic is relatively cheap and eco-friendly). Alternative is paper bag: cheaper but not as durable (may rot due to dampness / cause unpleasant smell.
Back view: double door for taking out waste.
29
Other Notable Projects
Snoonu Web Prototype(2020) Keywords: Web Development, Delivery Service, Freelance Group Project
Why Does It Matter? While the project is a brief one, I am grateful for this opportunity to design a web-based interface prototype for a professional-client. The project starts right before my internship, so I view it as a perfect learning opportunity to develop a design outside the academic realm.
Project Profile Type : Website Prototype My Role: UI Designer Design Process: Rapid Prototyping Objective: Deliver different parts of user interface to project manager on a weekly basis for a set period of time. Media Output: Adobe XD prototype
Project Activities: ◆ Competitor Review ◆ Heat Mapping ◆ Group Brain Storming Session ◆ Design Prototyping
Project Background Snoonu is a delivery service from UAE that was looking for an opportunity to branch it’s service from a mobile-based app to a web-based one. Through an acquaintance, I get to fill a position in his freelance team as a UI designer. My job is to help develop the web interface, as well as help analyze the web competitors.
Heat Map Samples
30
User Interface Sketches
User Interface Sample 1
31
User Interface Sample 2
User Interface Sample 3
32
Other Notable Projects
Clear: Ayo Indonesia Bisa (2020) Keywords: Web Development, Online Class Interface, Advertising Campaign
Why Does It Matter? When interning at MullenLowe Group Indonesia as a visual designer, I was entrusted with this project by the Creative Group Head. This is also the first UI/UX project in which I am entrusted to explore and develop. I use this opportunity to discuss different ideas with senior designers.
Project Profile Type : Website Prototype My Role: UI/UX Designer Design Process: Rapid Prototyping Objective: Design user interface prototype to be pitched to client as part of a digital advertising campaign Media Output: Adobe XD prototype samples
Project Activities: ◆ Group Discussion & Brainstorming ◆ User Flow Development ◆ Wireframing ◆ Design Prototyping
Project Background During the Covid-19 Pandemy in Indonesia, the Unilever-owned brand, Clear, is looking for an opportunity to boost brand presence to it’s targeted users. Therefore, MullenLowe Group Indonesia offers a digital campaign strategy to create a particular online class sponsored and organized by Clear dubbed “Ayo Indonesia Bisa”. The purpose of this campaign is to encourage young Indonesians to fill their time productively despite the challenging times.
User Flow Diagram
33
Wireframe Sample
User Interface Prototype Sample 1 & 2
34
User Interface Prototype Sample 3
35
User Interface Prototype Sample 4
36
Other Notable Projects
BMW x Tokopedia (2020) Keywords: Web Development, E-Commerce Official Store, Car Dealership
Project Activities: ◆ Group Discussion & Brainstorming ◆ Design Guidelines Review ◆ Low-Fidelity Prototyping ◆ High -Fidelity Prototyping
Project Profile Type : Website Prototype My Role: UI Designer Design Process: Rapid Prototyping Objective: Design user interface prototype to be pitched to client as part of a digital advertising campaign Media Output: Adobe XD prototype samples, UI Asset pack
37
Other Notable Projects
WN Hub UI Redesign (2020) Keywords: Web UI, Registration Feature, Partial Redesign
Project Activities: ◆ Interview Users ◆ Analyze original site ◆ Create user personas ◆ Produce user flow diagram ◆ Produce redesign sketches ◆ Create UI prototype
Project Profile Type : Website Prototype My Role: UI Designer, User Researcher Design Process: Design Sprint Objective: Locate User’s Pain-Point from WN Hub website and making a redesign accordingly Media Output: Figma prototype
User Research Documentation
User Personas
38
Target User’s Problem Mind Map
User Flow Diagram for Registration, Originall (Left) and improved (Right)
39
Registration Page Redesign Sketches
Redesigned Home Page
40
Redesigned Registration Page
Redesigned Registration Page, Picked Events
41
Other Notable Projects
Covid-19 Allert Mobile App (2020) Keywords: App Design, UI Design, Neomorphism
Project Activities: ◆ Reference study ◆ UI asset design ◆ Asset layouting ◆ Rapid Prototyping
Project Profile Type : Mobile Application My Role: UI Designer Design Process: Rapid Prototyping Objective: Design user interface prototype with neomorphism visual style for practice Media Output: Figma prototype
42
Other Notable Projects
Luna (2017) Keywords: Idle Game, Experimental, Casual Interaction
Project Activities: ◆ Exploring Ideas & References ◆ Asset Listing & Develop User Flow ◆ Animating & Prototyping ◆ Coding (Action Script 3)
Project Profile Type : Idle Game My Role: UI/UX designer Objective: Design an idle game for showcasing different interactions between players and character Media Output: Adobe Flash Game (Keyboard controlled)
43
Other Notable Projects
Sangkuriang Origins (2017) Keywords: Digital Storybook, Folk Tales, Mixed Media
Project Activities: ◆ Brainstorm & develop with team ◆ Produce assets manually & digitallly ◆ Compile assets in adobe animate ◆ Coding (Action Script 3)
Project Profile Type : Children Interactive storybook My Role: UI/UX Designer, Set Illustrator, Programmer Objective: Adapt one of Indonesia’s folk tales into an interactive storybook for Interactive Media Design Course Media Output: Adobe Flash Game (Keyboard & mouse controlled)
44
Other Notable Projects
Toska (2018) Keywords: Interactive Comic, Mental Health Awareness, Story Development, Child Abuse
Project Activities: ◆ Literature research ◆ Develop script & storyboard ◆ Design UI assets & VFX ◆ Compile & code all assets in Animate
Project Profile Type : Interactive Comic (Genre: Thriller, Suspense) My Role: UI/UX designer, Programmer, Storyboard Artist Objective: Complete 3 chapters of interactive comic to raise awareness about Schizophrenia as a 4-person-team Media Output: Android Mobile Application
Synopsis: Cyan and Aqua are Twins who live in an old house that their wealthy father left. Aqua starts to notice that his sister Cyan is seeing a shadowy presence around their house. Unfortunately, Cyan’s condition made their mother, Ruby, act more violent towards her.
Storyboard Excerpt
45
Other Notable Projects
Kidul (2019) Keywords: PC Mini-Game, Hidden Objects, Visual Programming
Project Activities: ◆ Group brain storming session ◆ Develop story & game mechanism ◆ Produce assets & made concep art ◆ Supervise art & creative direction
Project Profile Type : Hidden Object / Stealth Mini-Game My Role: UX Designer, Asset Designer Objective: Complete 3 chapters of interactive comic to raise awareness about Schizophrenia as a 4-person-team Media Output: PC Mini-Game
46
Other Notable Projects
Portfolio Prototype (2020) Keywords: Personal Project, Website UI, Nature-Themed
Project Activities: ◆ Research references ◆ Plan sitemap and User Flow ◆ Create Sketches ◆ Design Prototype
Project Profile Type : Website Prototype My Role: Web Designer Objective: Plan and design a website prototype for displaying personal portolio Media Output: Adobe XD Prototype
47
48
49
Anything Else I Can Offer You as a Designer
50
Motion Graphic
Spider - Motion Graphic Reel Excerpt (2018)
Sudtana Digital Ads (2020)
Dogo - Motion Graphic Storytelling (2018)
Fair And Lovely Instagram Editorial Content (2020)
51
Motion Graphic
AXE Break The Ice Mini-Game Demo Video (2020)
AXE IG AR Minigame(2020)
Rinso AR Instagram Filter Mockup (2020) Rinso ReďŹ ll Instagram Ads (2020)
SGM Festival Bunda Animated Ads (2020)
AXE IG Story Content (2020)
52
Basic 3D Modelling
3D set modelling - European Town Square (2017)
Product Packaging Design - 3D Digital Mockup (2017)
3D Interior Modelling (2017)
Game Asset Modelling - Prince of Persia Dagger (2017)
Handgun Modelling (2017)
53
Hand-Drawn Illustration
Indonesia’s Famous People Illustration Book - Susi Pudjuastuti’s Story Excerpt (2017)
Children Short Story Illustration - Sunny the Fairy (2017)
untitled (2018)
54
Hand-Drawn Illustration
Disney Character illustration (201 5)
Untitled (2018)
24/7 (201 5)
Bora (2016)
Untitled (201 5)
Untitled (201 5)
55
Untitled (201 5)
Hand-Drawn Illustration
Untitled (201 6)
Drawing Principle Anatomy Study (201 6)
Untitled (201 6)
Untitled (201 6)
Untitled (201 6)
Audrey Hepburn (201 5)
56
Digital Illustration
Digital Publishing Project (201 7)
One Park Apartment Children Halloween Party Stage & Photobooth Design (201 8)
57
Digital Illustration
2D Game Asset Design (2018) Nusantara-Insipired Visual Novel Backgrounds(201 7)
Character Design (Villain) - Tale of Lamalera (2018)
Character Design (Sister) - Tale of Lamalera (2018)
58
Print Media Design & Layout Lawrel Lemon Fiber Drink adalah minuman anti oksidan tinggi dari ekstrak lemon yang dapat membantu membakar lemak dan melangsingkan tubuh karena mengandung ekstrak green coffee, juga membantu menurunkan kolesterol dan tekanan darah,
KOMPOSISI
7
Fruktosa, Maltodextrin, Psyllium Husk, Ekstrak Lemon (15%), Inulin, Ekstrak Kopi Hijau, Kolagen Ikan, L - Karnitin, Vitamin C, Perisa identik jeruk nipis, pengental Carboxymethyl cellulose, Pengatur Keasaman Asam Citrat, Ekstrak Kurkumin, Pemanis Alami Stevia, L - Gluthatione
membantu mengenyalkan, melembutkan, dan mencerahkan kulit, serta menjaga
4. Kolagen Ikan
Manfaat
kekebalan tubuh dari penyakit.
1. Psyllium Husk Menurunkan kolesterol dan gula darah, mengurangi tekanan darah, mengatasi masalah pencernaan.
THE RECIPE FOR YOUR LIFE
Lemon Fiber Drink
Rp 375.000 / PACK 15 SACHET x 15 g
5. Ekstrak Kurkumin Memperbaiki sistem pencernaan, anti peradangan, mengatasi asam lambung, mengurangi gas pada sistem pencernaan.
2. Ekstrak Lemon Meningkatkan daya tahan tubuh, menjaga kesehatan jantung, membantu penyerapan zat besi, mencegah batu ginjal, kaya vitamin C.
Visit us at www .khariss.co.id for more information
Contact Us
Meningkatkan regenerasi sel, menghaluskan kulit, mencegah keriput, pembentuk 30% protein yang dibutuhkan tubuh.
6. L - Karnitin Meningkatkan stamina dan energi, mengatasi nyeri otot, membantu membakar lemak.
3. Ekstrak Green Coffee / / N O W AVA I L A B L E I N I N D O N E S I A / /
Menurunkan berat badan, tinggi anti oksidan, meningkatkan metabolisme, memperbaiki kadar gula.
O H3C H3C
Cl-
CH3 O
CH3
N
CO2H
+
7. L - Gluthatione Mencerahkan dan memutihkan kulit, menangkal radikal bebas.
7 in 1 Benefits
O HOOC
N
H
NH2
N O
H
COOH
S
H
Lawrel Lemon Fiber Drink Double-Sided Brochure (2018)
White Shoes & The Couples Company Paper Album Packaging Design (2018) Other Notable Academic Projects
29 MEI - 1 JUNI 2017
FAKE SMILES ARE AS UGLY AS FAKE PRODUCTS Peringatan hari lahir Pancasila 1 Juni 1945 - 1 Juni 2017
Mix Media Poster Layout (2016)
Pekan Pancasila Poster (2018)
Pekan Pancasila Poster - Digital Publishing 3 Class (2018)
Christian Youth Fellowship Poster (2018)
59
#UMNcounterCOUNTERFEITS
UMN Anti Counterfeit Campaign - IP Rights Class (2018)
Anti-Counterfeit Campaign Poster (2018)
M -F
Print Media Design & Layout
Sabun muka dari ekstrak coklat dan walet, cocok untuk semua jenis kulit
Choco Walet
&
Coee Walet
CHOCO WALET
COFFEE WALET
Dengan Ekstrak Coklat dan Walet
Dengan Ekstrak Kopi dan Walet
Choco Walet Facial Soap adalah sabun muka yang diformulasikan untuk semua jenis kulit. Choco Walet terbuat dari bahan herbal terpilih yang direkomendasikan oleh dokter dan praktisi kesehatan.
Coffee Walet Facial Soap adalah sabun muka yang diformulasikan untuk semua jenis kulit. Coffee Walet terbuat dari bahan herbal terpilih yang direkomendasikan oleh dokter dan praktisi kesehatan.
www.khariss.co.id
Lawrel Products X-Banner (2019)
Laurel Lemon Fiber Minuman Kesehatan Rasa Lemon Lawrel Lemon Fiber Drink adalah minuman anti oksidan tinggi dari ekstrak lemon yang dapat membantu membakar lemak dan melangsingkan tubuh karena mengandungekstrak green coffee.
Lawrel X-Banner template (2019)
GKI Stadion Cooking Class (2019)
60
Lemon Fiber X-Banner (2019)
Digital Media Design & Layout Client: Rinso (Via MullenLowe Group)
Client: Fair & Lovely (Via MullenLowe Group)
61
Digital Media Design & Layout
Client: AXE (Via MullenLowe Group)
Client: AXE Indonesia (Via MullenLowe Group) 62
Digital Media Design & Layout
Client: MullenLowe Group Indonesia 63
Pattern Design
1
1
2
2
3
4
5
6
7
1
2
3
4
5
6
1
2
3
4
5
6
64
8
Pattern Design
1
1
2
1
1
3
2
2
4
3
3
2
5
4
4
6
5
5
65
7
6
6
8
7
7
9
8
8
9
9
Pattern Design
1
2
3
4
1
1
2
5
2
3
6
3
4
7
4
5
6
8
1
2
5
6
7
66
9
7
8
9
10
11
8
9
10
12
13
14
10
11
12
13
Pattern Design
fce0eb
1
2
3
4
5
1
6
2
7
3
8
4
9
5
67
10
6
11
7
12
8
13
9
14
15
Experimental Design
Mural AR Photo Spot for Kranggan Village Tourism (201 8)
Deconstructing game of Chess for Raising Awareness about Political Dynasties in Indonesia (201 9)
68
Mid-Autumn Festival Celebration Pop Up Greeting Card (201 8)