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 :)