CV Portfolio 2020 July Update - Julia Kimberly

2020 version

UI/UX PORTFOLIO Design Process | Artwork Samples | Commentary & Thoughts

Compiled July 2020

Updated on July 2020

juliakimberly. designer@gmail.com

Julia Kimberly Djatmiko UI/UX Designer

+62-813-2960-7058

Indonesian | 22 Y.O (2 July 1998) | Bachelor of Design (S.Ds) Julia Kimberly

Education 2013 | 2016

2016 | 2020

Competition & Awards

Karangturi Senior High School, Semarang • Natural Science Study Track (IPA) • 100 Marks National Exam (Mathematics) • 2nd Place Integrated Science Olympiad Chitin as Coagulant Research (2014) • School Magazine Illustrator (K-Magz 2014-2015) Multimedia Nusantara University (UMN), Tangerang • Faculty of Art & Design • Visual Communication Design Program • Interaction Design Track • GPA: 3.71 • Enrolled with 100% Academic Scholarship

Work Experience 2020

February | May

Current Address: Sinabung 3 No. 5, Candisari, Semarang (024-83126025)

MullenLowe Group Indonesia, South Jakarta • Media & Advertising • 4-Month Internship Program • Creative Division, Digital campaign Unit • Digital Visual Designer

Skills • UX Research (Quantitative & Qualitative Research: A/B test, FGD, Interview, QuestionaireBased Survey, Card Sorting, Field Observation)

• Finalist of J. Walter Thompson Jakarta’s DISCO, 2018 (Undergraduate Advertising Competition) • Kurawal: Resonance 2018 Student Exhibition, Featured: 3D Asset Design - Venice • Kurawal: Decipher 2019 Student Exhibition, Featured: TOSKA Interactive Comic (as UI/UX Designer)

Workshops & Trainings • Tamkang University Summer School, Taiwan (OCAC) (2014) - Chinese Language & Culture Immersion Program • 3DSense College Winter Bootcamp, Singapore (2017) - Digital Media Design Basic Training • Fundamentals of UX by Jenius, UMN (2019) • Data Science Online CerɎǣˡƬƏɎǣȒȇ Training, DQLab (2019) • How to be an Excelent Art Director by Dreambox (2019) • Storytelling Online Workshop by Pijaru - Kompas Gramedia (2020)

Organizations • 2016-2018 | UMN English Student Council (UESC) club member • 2016-2017 | UNITY 1 English Competition Committee visual division member

• Uæ (ƺɀǣǕȇ ٢Èɀƺȸ IǼȒɯً Èɀƺȸ hȒɖȸȇƺɵً ǔˡȇǣɎɵ Diagram, Empathy Map, Paper Prototyping, Digital Prototyping)

• 2017-2018 | UNITY 2 English Competition Committee -

• UI Design (Mobile / Web Layouting, Mix Media, Icon Design, Asset Design, Basic Sound Design)

• 2017-2018 | Himpunan Mahasiswa Desain Komunikasi

• Graphic Design (Digital / Print media Layout, Motion Graphic, Digital & Traditional Illustration) 2D/3D Asset design, storyboarding)

• 2018 | Yodha Rasmi Orientation week, UMN - Secretary

• Basic Programming (Python, Action Script)

• 2019 | Kurawal: Decipher - Secretary

• Collaborative (Report Writing, Presentation, Project Management, Event Planning & Organizing)

decoration division coordinator Visual (HMDKV) UMN - Secretary • 2018 | Artdrenaline 5.0, UMN - Secretary/Treasurer • 2020 | UMN BIPA (Bahasa Indonesia Bagi Penutur Asing) Teacher Assistant (Volunteer)

Mastered Tools

Language

Interests

• Design Tools: Photoshop, Illustrator, Animate,

• EnǕǼǣɀǝ ٢ˢɖƺȇɎ٣ Á 0X! !ƺȸɎǣˡƬƏɎǣȒȇ‫׎חחٖ׎חח ي‬

Reading Fiction / Non-ˡction books, Painting, DIY Art & Craft, Games (Puzzle, Trivia, Strategy)

After Effect, Unity, 3Ds Max • Prototyping tools: Figma, Invision, Marvel, XD

• Organizing: x³ ǔˡƬƺ ٢áȒȸƳً 0ɴƬƺǼً ¨ȒɯƺȸȵȒǣȇɎ٣ً

Google Suites (Docs, Slide, Sheet), Basecamp

• Indonesian (Native) • Mandarin (Basic Conversation)

Project Name: MA’LAM (2019) Keywords: Light Pollution, Informative Game, Design Research

Why Does It Matter?

Ma’LAM is my Final Project in College. The project was done as a team and has been developed carefully for over a six-months.

While challenging, the project has been impactful towards my goal as an interaction designer.

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 ]

EMPATHIZE

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 ]

DEFINE

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 ]

IDEATE & PROTOTYPE

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

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)

38

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)

39

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

40

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

41

Anything Else I Can Offer You as a Designer

42

Motion Graphic

Spider - Motion Graphic Reel Excerpt (2018)

Dogo - Motion Graphic Storytelling (2018)

Fair And Lovely Active Glow Animated Ads (2020)

Rinso ReďŹ ll Animated Ads

43

AXE Break The Ice Mini-Game Demo (2020)

SGM Festival Bunda Animated Ads (2020)

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)

44

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)

45

Hand-Drawn Illustration

Disney Character illustration (201 5)

Untitled (2018)

24/7 (201 5)

Bora (2016)

Untitled (201 5)

Untitled (201 5)

46

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)

47

Digital Illustration

Digital Publishing Project (201 7)

One Park Apartment Children Halloween Party Stage & Photobooth Design (201 8)

46

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)

49

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)

50

#UMNcounterCOUNTERFEITS

UMN Anti Counterfeit Campaign - IP Rights Class (2018)

Anti-Counterfeit Campaign Poster (2018)

M -F

Digital Media Design & Layout

Client: Rinso (Via MullenLowe Group) 51

Digital Media Design & Layout

Client: AXE (Via MullenLowe Group)

Client: AXE Indonesia (Via MullenLowe Group) 52

Digital Media Design & Layout

Client: MullenLowe Group Indonesia 53

Experimental Design

Mural AR Photo Spot for Kranggan Village Tourism (201 8)

Mid-Autumn Festival Celebration Pop Up Greeting Card (201 8)

Deconstructing game of Chess for Raising Awareness about Political Dynasties in Indonesia (201 9)

54