Multimedia Design Portfolio - Mid 2021

DESIGN PORTFOLIO

Design Process | Artwork Samples | Commentary & Thoughts

Curated on May 2021

Table of content [4-5]

Curriculum Vitae

[6-65] UI/UX Projects 6 28 34 38 42 46 48 52

MA’LAM HE/RO MY UMN SNOONU Web Prototype CLEAR: Ayo Indonesia Bisa BMW x Tokopedia WN Hub TMN WEB PROTOTYPE

56 Luna 58 Sangkuriang

Origins 60 Toska 62 Portfolio Web Prototype

[66-77] Social Media & Other digital platforms 66 68 69 70 72 76

AXE Indonesia Rinso Indonesia Fair and Lovely MullenLowe Group Indonesia Target Media Nusantara Other social media posts

[78]

Logo Design

[80]

Short Animation & Motion Graphic

2

[81]

3D modelling

To View my video format designs

[82-87] Print Media Layouts 82 Report Book 83 Infographic 84 Brochure 86 X-banner, CD mockup, name card 87 Posters

[88-97] Illustration

88 Illustration - Digital 92 Illustration -Traditional Colored 94 Illustration - Sketches

[98-99]

Experimental Design

| Design Portfolio 2021

3

Hello, Nice to Meet You! Basic information Nationality

Education Title

Indonesian

Place | Date of Birth

Semarang, central java | 2 July 1998 Current address

Tiong Paragon, room B11 Tiong 2A, RT.8/RW.6, Kuningan, Karet Kuningan, Setiabudi, South jakarta, DKI Jakarta 12940 My name is

Julia Kimberly Djatmiko But you can call me

Julia/juli/kim/

I identify as

Spoken language

Indonesian (native), English (fluent, toeic certified 990/990 score) Mandarin (basic written & spoken)

multimedia designer,

ui/ux designer, growth designer, visual designer, problem solver, storyteller, morning Owl, tea-person,

and many More To put it shortly,

I will help you solve problems with a sustainable, design oriented solutions

Design Skills • • • • • • • • •

Bachelor of design (B. Ds/S.ds) Subjects of Interest:

Interaction Design digital Media sustainability environment gamification Arts, & culture psychology Hobbies

Reading, painting, solving puzzles, Experimenting on the kitchen, yoga

UX research (quantitative/qualitatitve) UI/UX design (design thinking/design sprint/agile) Game Design (digital/analog) Digital & Print Layout Animation/Motion Graphic/Video Editing Digital/Traditional Illustration Icon/Logo Design Basic 3D Modelling (hard/organic surface) Basic Photography

Others: Basic Programming (Python, HTML, Action Script), Creative/Academic/Document Writing

Top 5 mastered tools . juliakimberly.designer @gmail.com

www. linkedin.com/in/ julia-kimberly-11a79b17b +62-813-2960-7058

Adobe Photoshop

Adobe Illustrator

Adobe XD

Adobe After Effects

Adobe InDesign

Others: Figma, InVision, Marvel, Adobe Animate, Adobe Premiere, Unity Game Engine, 3Ds Max, Zbrush, MS Word/Excel/Powerpoint), Google Docs/ Slide/Sheet)

Education & Career 2013 | 2016

2013 | 2016

2020 feb

| may

2021 Jan

| may 2021 Feb

| Ongoing

Karangturi Senior High School, Semarang • Science Study Track (IPA) • 100 Marks National Exam (Mathematics) • 2nd Place Integrated Science Olympiad UNSOED • School Magazine Illustrator (K-Magz 2014-2015) Multimedia Nusantara University (UMN), Tangerang • Faculty of Art & Design, Visual Communication Design Study Programme, Interaction Design focus • GPA: 3.71 • Enrolled with 100% Academic Scholarship • Final Project Thesis: UI/UX Design for Mobile Game about Light Pollution (completed in English) • IMDES Presenter & Contributor • ADADA Presenter & Contributor • Graduated 20 November 2020 MullenLowe Group Indonesia, South Jakarta • Business Sector: Media & Advertising • Job Title: Visual Designer Intern (Supervised Under Creative Group Head) • Division: Creative (Digital Campaign Unit) • Position: Paid Internship • Brands handled: AXE, BMW, Fair & Lovely, Pizza Hut, Rinso, Lifebuoy, MullenLowe Life Cycle Indonesia, West Jakarta • Business Sector: Sustainability Consultant • Job Title: Visual Designer • Division: Creative • Position: Paid Internship & Outsource designer • Brands handled: Japfa Ltd, Siloam Hospital Target Media Nusantara, South Jakarta • Business Sector: Media & Advertising • Division: Marketing • Position: Visual Designer (under marketing division)

Freelance Employers: Mirtha Creative EO, Gloriamus Music School, Snoonu, Piyama Izany, GKI Stadion (volunteer), GKY BSD (volunteer)

Published Papers • Analyzing Interface Design Implementation for Informative Mobile Game MA’LAM (2020) • UI design development for informative mobile game about light pollution (2020)

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

Workshops & Trainings • Tamkang University Summer School, Taiwan (OCAC) Chinese Language & Culture Immersion Program (2014) • 3DSense College Winter Bootcamp, Singapore • Digital Media Design Basic Training (2017) • Fundamentals of UX by Jenius, UMN (2019) • Data Science Online Certification 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 | Social Designee (volunteer) • 2016-2017 | UNITY 1 English Competition Committee - division member • 2017-2018 | UNITY 2 English Competition Committee - coordinator • 2017-2018 | Himpunan Mahasiswa Desain Komunikasi Visual UMNSecretary • 2018 | Yodha Rasmi Student Orientation, UMN - Secretary • 2018 | Artdrenaline 5.0, UMN - Secretary • 2019 | Kurawal: Decipher - Secretary • 2020 | UMN BIPA (Bahasa Indonesia Bagi Penutur Asing) - Teacher Assistant (Volunteer)

20 19 MA’LAM Keywords | Informative Mobile Game, game UI/UX design, environmental Awareness Campaign, Design Thinking From researching about light pollution and its impacts, undergoing Design Thinking process in a detailed manner, and producing a playable, high fidelity prototype that can be played by collaborating with other aspiring game designers, MA’LAM was my final project from my college which gave me my Bachelor of Design title and in turn held a special place in my mind and heart

[Project Background] Being Indonesia’s capital and most densely populated city, Jakarta struggles with light pollution. Unfortunately, Jakarta citizens have little to nonexistent awareness about the danger of light pollution, which may affect human health, energy waste, and other negative environmental impacts.

To raise awareness, MA’LAM’s design team encourages young Jakarta citizens to be more aware of Light Pollution by introducing the issue through an adventure mobile game

Project Profile

Type: Informative Mobile Game My Role: UI/UX Designer & Researcher Design Process: Design Thinking (Stanford d.

School method) Objective: To Inform facts and raise awareness about the cause & effects of Light Pollution in general and in Jakarta Media Output: Android Mobile Game (2D side-scrolling, stealth, adventure)

6

UI/UX Design | Design Portfolio 2021

7

20 19 MA’LAM

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

8

[Gameplay Overview] Ma’LAM is a 2D side-scrolling platformer game with a sci-fi story genre and retro interface.

Follow the Journey of Mu, a stranded alien captain whose mission is to explore Jakarta city and find his missing crew and spaceship.

Players must avoid contact with the bipedal Earth inhabitants by disabling or avoiding excess illumination on Mu’s surrounding area.

Stages are cleared by finding the best route to find a missing crew. The game starts with a tutorial stage and gradually progresses to a more difficult level with a total of 6 different game stages, each complemented with a puzzle or quiz mini-game. Throughout the gameplay, players can also collect information about artificial light sources, light pollution impacts, and characters affected by light pollution which are available to view on the collection menu.

UI/UX Design | Design Portfolio 2021

9

20 19 MA’LAM

[Loading game] While waiting for the game to load, players get to read facts about light pollution. The displayed visual hints at the sci-fi nature of the game as well as its relation with the condition of a polluted night sky. unlocking the next level.

[Cutscenes] After the game loads, players are introduced to the game’s background story. Stories are told through comic chapters. 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.

10

[Level Menu] MA’LAM has six different game stages. Each represents a location from different Jakarta districts with different cases and impacts of light pollution.

With each cleared stage, the sky color on the game’s menu will change from murky brown to dark blue studded with stars, as the displayed city skyline also turns darker.

[Information Panel for 6 Different Game Stages]

UI/UX Design | Design Portfolio 2021

11

20 19 MA’LAM

Game interface basics

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

12

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 also two types of minigames; puzzle and quiz within the gameplay. Throughout the gameplay, players may also collect different characters & objects.

Stage location panel

Mission panel

Character collection panel

Character dialogue panel

Stage Hint Mode

Health Point (HP) decreased

Game Over screen

Stage Cleared screen

Minigame version 1 (puzzle)

Minigame version 2 (quiz)

[Asset Design] The assets for MA’LAM were designed with Aseprite, a software specialized for painting and producing pixelated visuals. The produced assets were then assembled in Adobe Photoshop for creating mockups an exported to Unity game engine to produce a mobile game app for Android.

The holographic sci-fi visual style for producing the assets is inspired by sci-fi pop culture in the ‘90s and early 2000s through literature and existing media research.

UI/UX Design | Design Portfolio 2021

13

20 19 MA’LAM

Object collection menu

Character collection menu - character appearance

Character collection menu - character information

Story collection menu

Story collection menu - locked story

14

Game storyline excerpts - Prologue

Setting & information menu ingerfaces

UI/UX Design | Design Portfolio 2021

15

20 19 MA’LAM

Design Process [Background Problem Research] 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.

[Design Thinking as Framework] Design Thinking incorporates holistic, human-centered problem solving for human-centric problems apparent on the project background (lack of public awareness, adapting to light pollution, etc).

[Research] Our design team consulted a light pollution expert on Jakarta Planetarium and conducted field observation in Jakarta Metropolitan areas.

16

[Step 1: Empathise] 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.

[Method] 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 in their natural environment which is Jakarta’s Metropolitan Area.

The secondary method of collecting data is surveying by distributing a digital questionnaire. The content of the questionnaire is users’ playing preference, users’ stances in perceiving information through gameplay, and users’ habit of playing games.

UI/UX Design | Design Portfolio 2021

17

20 19 MA’LAM

18

Design Process

Istar

Stella

Chandra

education: college Economy: Middle

education: High School Economy: Upper-Middle

education: college Economy: Middle

21 Y.O, Jakarta

16 Y.O, Jakarta

“ I Know that light pollution disturbs stargazing activity, I never heard that it is bad for our health!”

16 Y.O, Jakarta

“ I think I’ve hear about light pollution in school but i’m not so sure...is it a real issue though?”

“Huh I couldn’t sleep because of light pollution, for real?”

Central Jakarta. patterns ever since moving out

doesn’t know light pollution’s consequence outside astronomy activity.

passingly at school

pollution in Jakarta

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.

between light pollution and normal night environment

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 towards light pollution’s negative impacts.

Overview: Chandra has just moved to Jakarta to study design. Recently he experienced some problem with sleeping. His dormitory room is located right next to a brightly lit road even some blinds couldn’t help.

Think/Feel:

[Step 2:Define]

Hear

See

from science teacher

night everyday.

related to waste of energy,

once when she was little on a family vacation, can’t remember much though.

relevance with her lifestyle.

Say/Do

Pain

Gain choices related to light pollution

issues due to comfortable lifestyle light pollution and other environmental issues action against environmental issues in Jakarta

To underline problems that needed to be addressed on the project’s process and outcome, as well as to generate keywords as the basis of design ideation phase.

relevant bit of information to her daily life

[Method] Data from the Empathise phase were sorted and paraphrased in the form of mind maps and stakeholder maps. Our design team then conducted brainstorming sessions and sort different problem-solution perspectives on card-sorting sessions. Other deliverables include User Personas, Empathy Maps, User Journey document, and game design documentation on Game Design Document (GDD).

UI/UX Design | Design Portfolio 2021

19

20 19 MA’LAM

20

Design Process

[Step 3:Ideate] To explore solutions & determine the best strategy to deliver design for the intended users. The ideation process addresses issues from the Define phase in the form of design strategies.

[Method] The ideation process encompasses activities such as literature and existing media studies on selected mobile game references. The UI/ UX aspect of the game design ideation process includes the creation of user flow diagrams, game/ app wireframes, proposed player interaction forms in Game Design Document, and development of Moodboards as well as other reference boards.

UI/UX Design | Design Portfolio 2021

21

20 19 MA’LAM

22

Design Process

UI/UX Design | Design Portfolio 2021

23

20 19 MA’LAM

Design Process

[Step 4:Prototype] To deliver design from genrated ideas. There are several iteration cycles to find the right equilibrium between what users need and want.

24

[Method] From sketches on paper, game application prototypes on adobe XD, creating stage wireframes on adobe illustrator, the initial prototyping phase was kept in a rapid and low-cost method.

After the user interface and experience of MA’LAM is within the decided value, assets and high-fidelity prototypes were produced with the help of software such as Aseprite, Photoshop, and Unity.

UI/UX Design | Design Portfolio 2021

25

20 19 MA’LAM

Design Process

[Step 5:Test] 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.

26

[Method] Two game testing sessions were conducted, the first is the Alpha test which focuses on the game’s original design prototype, and the Beta test which was focused to test the game’s design iterations. Both tests ask game volunteers to fill a questionnaire about perceived game enjoyment and technical playing experience.

Questionnaire results were then analyzed to draw conclusions and measure the project’s success.

[Conclusions] • The application of Design Thinking process results in the success of raising player’s awareness about Light Pollution • The enjoyment of gameplay affects players’ perception of information within the gameplay.

• Players could define the cause, symptoms, and effect of light pollution after playing MA’LAM

UI/UX Design | Design Portfolio 2021

27

20 19 HE/RO Keywords | UI/UX, Children Activity App, Project Development, Role Model, Gender Equality & role model themed

To study the human-computer interaction model in young children, the game/children activity app HE/RO was developed. The purpose of this project is to explore digital game’s influence on early-age children’s mental development as well as gender and role-model perception.

[Project Background] As highlighted by the 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.

28

Project Profile

Type: Children 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 restriction Media Output: Mobile Game, AR-supportied drawing sheet prototype

[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.

UI/UX Design | Design Portfolio 2021

29

20 19 HE/RO

[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 on 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.

[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.

30

[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 gestures 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. 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.

UI/UX Design | Design Portfolio 2021

31

20 19 HE/RO

Design Process

Online questionaire excerpt

Interface sketches

User persona profile

32

Moodboard development

Ideation process documentation

Reference boards (color & interface)

UI/UX Design | Design Portfolio 2021

33

20 19 My umn Project Profile

Keywords | Mobile student center, UI/ UX development, website to mobile app, Design process study My UMN is an online student center service for Multimedia Nusantara University. The mobile app version on this project was adapted from the web-based version which was the only way to access the service as per 2019.

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

[Project Background]

Contrary to popular belief that adapting a web service to a mobile app only requires adapting visuals and contents, there are many different aspects to be considered during the process.

One of them is taking consideration of stakeholders. For example, the need for a student center app differs between lecturers, students, and student parents. These roles also requirers different services within the app so designers may help determine which features are to be focused upon.

Researching the stakeholder’s needs was conducted via Design Thinking Process.

Log In

[Log In Page] Users (students) input username and password to enter and use the application

34

[Home Page] Consists of personalized student information display and campus / university events

[Hamburger Button] To access different features within the My UMN app which may not be displayed on the quick-access panel

[Quick Schedule]

[Student Attendance] [Student Information]

Displays information of user’s weekly class schedule

Displays attendance records for Displays student data & each course within a semester access to data editing settings

[Restricted Page] Restriction due to unmet requirements or maintenance

[SKKM Summary] Displays users’ extra credits as requirements to graduate

[SKKM List] Displays extra credit from extraculicular activities

UI/UX Design | Design Portfolio 2021

35

20 19 My umn

36

Design Process Documentation

Ibu Susie (64) Orangtua Murid

Scenario

Goals

Expectation

Ingin cek nilai anak, apakah harus mengulang mata k uliah jadi b isa 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

V

5. View Detail nilai 6. Tanya soal batas kelulusan

2

3

8. Cek saldo di tab tuition account

gimana cara cek jumlah SKS dan harganya? (cek buku panduan dan attachment panduan pembayaran di

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. Menghitung berapa uang yang harus dibayar 10. Melakukan pembayaran 11. Cek apakah transaksi berhasil

7.Cari link view

1 Tidak tahu email/password anak, anak susah dicontact, tunggu lama sampai anak kasih tahu password dan emal

Melakukan transaksi pembayaran

masi agak bingung, canggung mencari info

9

Mengikuti panduan dari attachment panduan pembayaran ke bank yang dituju 10

7

8

Kenapa Saldo sepertinya tidak akurat dengan yang sudah cukup dibayar? kenapa mudah detail transaksi dicari dari membingungkan? student apakah info information sudah diupdate pihak UMN??

Link student

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

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

Segera update informasi di MY UMN, jka tidak bisa segera update, beri batas waktu untuk cek update kembali supaya user tidak cemas menunggu

UI/UX Design | Design Portfolio 2021

37

20 20 Snoonu Web Prototype Keywords | Web Development, Delivery Service, E-Commerce, interface prototype design One of many challenges in designing an app for a foreign region is to study and adapt the local user’s habits. For Example, when developing Snoonu’s interface, the original reading flow is from right to left, but on the interface’s international version, it is adapted left to right!

Project Profile

Type: Website Prototype My Role: UI Designer Design Process: Rapid Prototyping Objective: Deliver different web-based user interface from existing mobile application and client’s brand identitiy Media Output: Adobe XD prototype

[Project Background] Snoonu is a delivery service from UAE that was looking for an opportunity to branch its service from a mobile-based app to a web-based one. The service was focused on food delivery, although there are other available items to be delivered as well such as groceries, goods, and even flowers from a florist shop.

38

[Project Activities] • Competitor Review • Heat Mapping • Group Brain Storming Session • Design Prototyping

UI/UX Design | Design Portfolio 2021

39

20 20 Snoonu Web Prototype

40

UI/UX Design | Design Portfolio 2021

41

20 20 Clear: Ayo Indonesia Bisa Keywords | Web Development, Microsite, Online Event, Digital Advertising Campaign Plan, Limited online class event Digital product campaign is not constricted to placing ads on social media or planting banners on different websites. As demonstrated in this project, a limited online event could offer an alternative for a digital campaign strategy.

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 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.

42

[Project Activities] • User Flow Development • Wireframing • Design Prototyping

UI/UX Design | Design Portfolio 2021

43

20 20 Clear: Ayo Indonesia Bisa

44

UI/UX Design | Design Portfolio 2021

45

20 20 BMW x Tokopedia Keywords | Web Development, E-Commerce interface, Official Online Store Development, designing with brand design guideline Designing within the parameters of a guideline could be highly efficient and tricky at the same time. But designing with a well-written guideline could be an educative and even enjoyable experience. As demonstrated in this project, in which BMW’s design instruction is the perfect model to demonstrate a minimalist interface.

[Project Background] BMW Indonesia was launching its official store in Tokopedia, a popular Indonesian E-commerce site, in 2020. Mullenlowe group Indonesia, being a creative campaign partner, offers to create a design mockup for their shop interface.

Then an Adobe XD prototype was produced, complete with assets that follows BMW Indonesia’ brand guideline.

[Project Activities] • Group Discussion & Brainstorming • Design Guidelines Review • Low-Fidelity Prototyping • High -Fidelity Prototyping

46

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

UI/UX Design | Design Portfolio 2021

47

20 20 WN Hub UI Redesign Keywords | Web UI, Registration Feature, Partial Redesign Online events are booming during the pandemic in 2020. But buying tickets could be a hassle especially if you are unfamiliar with the booking system, or when you are an international user trying to understand the payment method. But language and barriers shouldn’t be a barrier as intuitiveness and secure interaction could be incorporated through interface design.

[Project Background] WN Hub is a networking community for international game industry practitioners.

But an influx of new community members from non-western countries possess a new challenge to accommodate international users.

[Project Activities] • Interview Users • Analyze original site • Create user personas • Produce user flow diagram • Produce redesign sketches • Create UI prototype

48

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

UI/UX Design | Design Portfolio 2021

49

20 20 WN Hub UI Redesign

50

UI/UX Design | Design Portfolio 2021

51

20 21 TMN Web PROTOTYPE Keywords | Web Development, Company Profile Website, simplified website, SEO optimization project

A good company website drives traffic to a business. But a good company website sometimes is not good enough, there are questions that ought tp be asked such as is it easy to find from a search engine, is the loading page makes users pull their hair out, can user view the site comfortably on different devices.

Sometimes even a good websites need a revamp to make it great.

52

Project Profile

Type: Website UI Prototype My Role: UI Designer Design Process: Design Sprint Objective: Simplify exisiting website and make a strategy to optimize loading speed as welll as planning SEO Media Output: Adobe XD prototype

[Project Background] Despite the original website operating just fine, Target Media Nusantara is considering to revamp their website in order to improve SEO, decrease load-time, and reorganize informations for better user viewing. The improvement of a website, of course could offer a neat return of investment by driving sales, archieving achiements, and more.

[Project Activities] • Researching SEO and other optimization strategies • Analizing current website • Sketching ideas • Developing mockups for web development references

UI/UX Design | Design Portfolio 2021

53

20 21 TMN Web Redesign

54

UI/UX Design | Design Portfolio 2021

55

20 17 Luna Keywords | Idle Game, Experimental, Casual Interaction, dekstop minigame, A simple purpose is a good enough purpose to experiment on a project. With the objective to create a comforting digital space, Luna was created with care, love, and curiosity to learn how to code.

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)

[Project Background] The purpose of creating Luna is to give players a “happy place”. A happy place doesn’t have to be physical, as more and more people spend their time in a digital space. Luna is created to be a highly accessible game (offline) with minimum stress. Players control an owl and help her occasionally feed on a passing mouse, or make her fly into the faraway moon. A piece of calming music from Debussy’s Clair the Lune is a cherry on top for this idle game designed by a nyctophile.

56

[Project Activities] • Exploring Ideas & References • Asset Listing & Develop User Flow • Animating & Prototyping • Coding (Action Script 3)

UI/UX Design | Design Portfolio 2021

57

20 17 Sangkuriang Origins Keywords | Digital Storybook, Storytelling Project, Digital & Traditional Mixed Media Good storytelling could improve any kind of experience, including adapting classic Indonesian folklore into a fun, children’s story/activity book. And the recipe for great storytelling? Research, experiments, and creative flair of course!

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)

[Project Background] Sangkuriang is Oedipus-Esque Indonesian folklore with curiously is one of the popular children bed-time stories. But the story itself has a great potential in teaching integrity, keeping promises, and not making promises you can’t keep. Adapting this story for a young audience was an interesting challenge both for the role of a designer and storyteller. The journey was worth it though, and the result was a prologue adaptation which is as interesting as the original main story.

58

[Project Activities] • Brainstorm & develop with team • Produce assets manually & digitallly • Compile assets in adobe animate • Coding (Action Script 3)

[Premise] Dayang Sumbi, the would-be mother of Sangkuriang, and a spoiled princess must flee to the jungle when her kingdom is under siege.

With the help of her bodyguard, a warrior from a tribe as fierce as a wild dog, she must navigate a new life in the wilderness.

UI/UX Design | Design Portfolio 2021

59

20 18 Toska Keywords | Interactive Comic, Mental Health Awareness, Story Development, Child Abuse

Some people still consider mental health as a taboo topic in Indonesia. At its worst, some people would blame mental ailments on the supernaturals instead of seeking medical health. TOSKA invites readers to be more astute with mental illness especially in a family with young children.

60

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.

[Project Activities] • Literature research • Develop script & storyboard • Design UI assets & VFX • Compile & code all assets in Animate

UI/UX Design | Design Portfolio 2021

61

20 20 Portfolio Web Prototype Keywords | Personal Project, Website UI, Nature-Themed A work in progress and a shameless promotion of my upcoming online portfolio :)

62

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

UI/UX Design | Design Portfolio 2021

63

20 20 Portfolio Prototype

64

UI/UX Design | Design Portfolio 2021

65

Social Media & Other digital platforms

Instagram Story Template for AXE Indonesia (2020)

Instagram Feed post for AXE Indonesia (2020)

Instagram Feed Carousel Post for AXE Indonesia (2020)

Instagram Feed Seampless Posts for Rinso Indonesia (2020)

66

Instagram Story catching game mockup for AXE Indonesia (2020)

Mobile tapping game mockup for AXE Indonesia (2020)

Instagram Feed Seamless Carousel Post for AXE Indonesia (2020)

Instagram Post event series for AXE Indonesia (2020)

Instagram Story Engagement activation for AXE Indonesia (2020)

UI/UX Design | Design Portfolio 2021

67

Social Media & Other digital platforms

Instagram Feed Carousel Post for Rinso Indonesia (2020)

Rinso x rtv World Clean Up Day for Rinso Indonesia (2020)

Animated Instagram feed ads for Rinso Indonesia (2020)

Instagram AR filter for Rinso Indonesia (2020)

68

Instagram Story Glowing Story Template for Fair and Lovely Indonesia (2020)

Instagram Feed Editorial for Fair and Lovely Indonesia (2020)

Pitching deck design for Fair and Lovely Indonesia (2020)

UI/UX Design | Design Portfolio 2021

69

Social Media & Other digital platforms

Instagram Story Posts for MullenLowe Group Indonesia (2020)

70

UI/UX Design | Design Portfolio 2021

71

Social Media & Other digital platforms

Animated Infographic on 1080 x 2560 screen for Target Media Nusantara (2021)

Imsak Schedule on 16:9 screen for Target Media Nusantara (2021)

72

Company Ads on 1920 x 1440 Screen for Target Media Nusantara (2021)

Animated Greetings Video for Target Media Nusantara (2021)

Company portfolio footage editing for Target Media Nusantara (2021)

Assorted Animated Logo Bumber Design for Target Media Nusantara (2021)

UI/UX Design | Design Portfolio 2021

73

Social Media & Other digital platforms

Template Design for Target Media Nusantara (2021)

Illustrated greeting post for Target Media Nusantara (2021)

Mix media (Still + video) Carousel post for Target Media Nusantara (2021)

74

1:1 Instagram feed post for Target Media Nusantara (2021)

Instagram story & feed post for Target Media Nusantara (2021)

Portrait Instagram feed post for Target Media Nusantara(2021)

UI/UX Design | Design Portfolio 2021

75

Social Media & Other digital platforms

Instagram Post for Ding Dong Cafe by 3000 Group (2021)

Social Media posts for GKI Stadion Monthly Webminars (2021)

76

Video Ads Series for Sudtana - Digital Campaign(2020)

Instagram Greetings for Pizza Hut Indonesia (2020)

Instagram Post for SGM - Event Teaser (2020)

UI/UX Design | Design Portfolio 2021

77

Logo Design

Keramas logotype for Clear Indonesia (2020)

Double Clean Fresh Technology logo for Rinso Indonesia (2020)

78

Lash Me Up (2018)

Pro-LCAS by Life Cycle Indonesia (2021)

Decipher Production Logo (2018)

My UMN Icons for App Design (2017)

Karangturi Senior High School - Enegy Conservation Campaign logo (2016)

UI/UX Design | Design Portfolio 2021

79

Short Animation & Motion Graphic

Itsy Bitsy Spider (2018)

Doggo (2018)

80

KelarBos App Demo reel (2021)

3D modelling

3D set modelling - Venice (2017)

UMN x UMKM Product Packaging Design - 3D Digital Mockup (2017)

3D Interior Modelling - Minimalist Interior (2017)

Game Asset Modelling - Dagger (2017)

3D Interior Modelling (2017)

UI/UX Design | Design Portfolio 2021

81

PRINT MEDIA Layouts

Japfa Ltd Sustainability Report - Layout & Infographics (2020)

82

Tujuan

Destination

Saluran kawasan

Saluran kota

Total

163,457

352,877

516,334

Regional channel

Municipal channel

Total

Unit:

L/RS

L/Hospital

93

90 73

Unit:

pcs/RS

pcs/Hospital

13,855

15,047

15,495

118,881

94,111

151,516

35,415

5,121

26,187

45,700

11,099 5,445

817

724

811

2020 2019 2018

APD PPE

Masker

Surgical Mask

Sarung Tangan Gloves

Suntikan Syringe

Kateter

Catheters

Kemasan Berbahaya Hazardous Packaging

Siloam Hospital Sustainability Report - Infographics (2021)

UI/UX Design | Design Portfolio 2021

83

Layouting

Folded Pamphlet - Bangka Belitung Local Tour (2017)

84

7

4. Kolagen Ikan

Manfaat

1. Psyllium Husk Menurunkan kolesterol dan gula darah, mengurangi tekanan darah, mengatasi masalah pencernaan.

Lemon Fiber Drink

Meningkatkan regenerasi sel, menghaluskan kulit, mencegah keriput, pembentuk 30% protein yang dibutuhkan tubuh.

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.

6. L - Karnitin Meningkatkan stamina dan energi, mengatasi nyeri otot, membantu membakar lemak.

3. Ekstrak Green Coffee // NOW

A VA ILABLE IN INDONESI

7 in 1 Benefit

Menurunkan berat badan, tinggi anti oksidan, meningkatkan metabolisme, memperbaiki kadar gula.

A //

O

CH3 O H3C + H3C

N

Cl-

CH3

CO2H

7. L - Gluthatione Mencerahkan dan memutihkan kulit, menangkal radikal bebas.

s

O HOOC

N

H

NH2

N O

H

COOH

S

H

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 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 kekebalan tubuh dari penyakit.

THE RECIPE FORY OUR LIFE

Rp 375.000 / PACK 15 SACHET x 15 g Visit us at www .khariss.co.id for more information

Contact Us

Folded Pamphlet - Lawrel Lemon Fiber Drink (2018)

UI/UX Design | Design Portfolio 2021

85

Layouting

Assorted X-Banner designs

Album & CD Cover Design Vakansi by White Shoes and the Couples Company

86

Name Card Design (2018)

Inspirational Quote Poster - Mix Media (2016)

Pekan Pancasila Poster (2018)

FAKE SMILES ARE AS UGLY AS FAKE PRODUCTS #UMNcounterCOUNTERFEITS

Christian Youth Fellowship Poster (2018)

Anti-Counterfeit Campaign Poster (2018)

UI/UX Design | Design Portfolio 2021

87

Illustration - Digital

New Perspective (2017)

Little Cafe in Italy (2016)

88

Indonesia’s Staple Foods (2017)

Capturing Dream (2017)

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

UI/UX Design | Design Portfolio 2021

89

Illustration - Digital

Assorted Nature Sceneries and Assets (2017-2020)

90

Assorted character designs (2017-2018)

UI/UX Design | Design Portfolio 2021

91

Illustration -Traditional Colored

Indonesia’s Famous People Illustration Book - Susi Pudjuastuti’s Story Excerpt (2017)

Children Short Story Illustration - Sunny the Fairy (2017)

92

Hello Neighbor (2017)

Disney Pixar illustrations (2015)

Witching Hours (2018)

24/7(2015)

Bora (2016)

Untitled (2015)

Untitled (2015)

UI/UX Design | Design Portfolio 2021

Untitled (2015)

93

Illustration - Sketches

Drawing Principle Anatomy Study (2016)

Mandala (2016)

94

Wild Horse (2016)

Unfinished Moose (2016)

Woodland Creatures (2016)

Audrey (2016)

UI/UX Design | Design Portfolio 2021

95

Experimental design

Prototype Mural AR Photo Spot for Kranggan Village Tourism (2018)

96

Mechanism

Parts

Materials:

Flower display

1. Go to bag dispenser, take bag as needed. Dispenser scattered throughout the park

Pedestal: wooden planks additional materials: screws, hinges, nails, alumunium / steel sticks

stepping mechanism

Hidden hole

2. Carry bag. Mobile disposal!

Steps hidden chamber

Hidden mechanism

Alternative: 3. Gather litter, may share bag with other people

4. Find disposal area.

Regular trash bin will also do, or carry litter until getting out of park area

step on the puley system, hidden trash bin

III. SKETCHES

dispenser material: acrylic/ pvc box, pvc standee.

waste system (oranic / anorganic), double stepping area. Lid

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

Push here

elevated from ground for display

steps

bag come out from below

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.

Most common litter : plastic foodwares / food wraps. cigarettes

step here when capacity limit is reached:

Back view: double door for taking out waste.

Concept Design for Anti-Littering Park Trashbin (2019)

UI/UX Design | Design Portfolio 2021

97

Experimental design

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

98

Dukuntangkanting - Boardgame Currency & Cards

UI/UX Design | Design Portfolio 2021

99

Thank you for viewing my portfolio!

[Since there are plenty of space left...]

Hi, we’ve probably never met before, but let’s play a game of This or That to get to know each other :)

THIS

THAT

Coffee

Tea

Night

Day

Beach

Mountain

Salty

Sweet

Indoor

Outdoor

Pen

Pencil

Hot

Cold

Apple

Android

Sprite

Coca-cola

Speaker

Headphone [If your answer is]

• 6-10 points the same as mine: Are we two peas in a pod? I would love to talk to you! Let’s find out if we have another things in common.

• 0-5 points the same as mine: You know what they say, opposite attracts. Differences brings diversity and that’s cool! Let chat, I want to know your thoughts.

Email me on juliakimberly.designer@gmail.com to get in touch. We can talk about design, ideas, business, or life in general :)