UI / UX Design Portfolio

Page 1

UI / UX Design A PORTFOLIO BY CENDIKIA LUTHFITA

In this portfolio, you will learn about the selection of works done in the past years: a work for client, an individual work, and a collaborative work. It covers a process of each work, including the thinking process and how to communicate the idea. FOR MORE DETAILS: LINKEDIN.COM/IN/CENDIKIAL/


Design for a better quality of life.

KEY EXPERTISE Design thinking / HCD HCI Figma, Adobe Illustrator Prototyping Keynote, PowerPoint Interpersonal skill English (Bilingual), Japanese (Business level), Indonesian (Native level)

Hello, I am a Tokyo-based Indonesian UI/UX designer who is currently in the third year of Ph.D. program majoring in Media Design at Keio University.

I always have a curiosity about why a problem happened and how to solve it. I often questions why people love or hate using a product. Having those attitudes have set me to understand a matter of UI and UX design in everyday life, and my career aspiration is to be a professional in UI/UX field. I believe that making a meaningful, pleasurable, and reliable product could help improve the quality of life. As a designer, my capability to communicate with people and understand them with empathy helps me in gaining insights to design a solution for better human lives.


WORK FOR CLIENT

JAIPONG

JAPAN-INDONESIA PARTNERSHIP LOUNGE (WEB) See more (ID/JP): https://www.dashboard.kbritokyo.jp/jp/home PURPOSE: To create a one-stop information hub about economic partnership between Indonesia and Japan.

TARGET: Indonesian and Japanese people, mainly businessman and investors. Target age group 20s-50s.

BRIEF: A website with a concept and story that incorporates the soul of Indonesia and Japan. A user-friendly, reliable, and memorable website.

CLIENT: Embassy of the Republic of Indonesia in Japan Bank of Indonesia in Japan

PROJECT DURATION: First brief to soft launching: Jul - Aug 2020 Maintenance: Aug 2020 - Oct 2021

ROLE IN A TEAM: UI/UX Design, Visual Design, Branding

ABOUT THE TEAM: 5 team members (including myself), all Indonesian

CHALLENGES: Designing a website within a month before launch The team that I joined did not have a designer Creating a visually pleasing website, with loads of data information needs to be shown Changing the image of government-owned websites to be more fun and user-friendly.

OVERVIEW


WORK FOR CLIENT

PROBLEM The data shown on JAIPONG is taken from the website of The Ministry of Investment of Indonesia (BKPM). Foreign investor usually referred to this website to find information about Indonesian investment. However, the website of BKPM is difficult to use, too busy, inconsistent, too heavy to load, and has too much text. This is the typical style of government-owned websites in Indonesia.

PERSONA Yoshi Takamura, 54. Japanese investor Interested in the mining sector Likes checking the news on a smartphone during commuting time Due to his bad sight, he finds it hard to read small text or read graphs He can't understand English nor Indonesian, but very interested in Indonesian culture Raka Aditama, 26. Indonesian coffee shop owner Planning to open the branch in Japan Loves art Uses PC for working, smartphone for social media

*Image is only for illustrative purposes only. **Not a real name. Image source: pexels.com

THOUGHT PROCESS

HOW MIGHT WE DESIGN AN ECONOMICRELATED GOV'T WEBSITE TO BE MORE FUN AND USER-FRIENDLY?


WORK FOR CLIENT

01

CONCEPT Brief A website with story that incorporates a soul of Indonesia and Japan. Result The home page shows the icon of both countries beautifully put together successfully WOW-ed the first-time visitor.

Mount Fuji and the rising sun symbolizes the hope and strength (Red thread) symbolizes the strong connection between two countries Cultural icons symbolizes the uniqueness and potentials

赤糸

03

COLORS I chose these colors because they represent the color of braveness (red), wealthiness (gold), neutrality (silver), and assertiveness (black). By the fact that both countries' flag has a red color, I believed this could represent the spirit of both. I also wanted to change the image of a government-owned typical website, from stiffness to be more fun .

UI DESIGN

02

COPYWRITING

"Synergy in Harmony" typed in the middle of the sun projects the hope to collaborate harmoniously in various sector, by realizing each countries' potential and uniqueness to create new values. Note Although the jargon was not given in a brief, I initiated to create one and the client was more than happy.

*a mock up view in PC version

04

LAYOUT Brief User-friendly, reliable, and memorable website. Visually pleasing yet lots of data need to be shown. Result As the visitor landed in the home page, they're pleased by how it looks. I fully understand that visual works better, hence I decided to use image as a thumbnail icon instead of text.


WORK FOR CLIENT

*a mock up view in smartphone version and PC version

USABLE, RELIABLE. Brief A target group of people in 20s-50s, mostly investors or businessmen, Indonesian or Japanese, most access through a smartphone. Process Use the big size of image thumbnail with very minimum text on the top. Whether the user sees the image first or reads the text first, their decision to click is with no doubt. Experience I believe the simple interaction can deliver the big impact towards user. For example, the white color changing to black after user clicked could give the sense of confirmation.

UX DESIGN

Result I created the design that is suitable for both media: pc or smartphone. Big image thumbnail is very useful as some users use one hand when operating a smartphone. Not just good for usability, it's also good for the eyes.


COLLABORATIVE WORK

TOMOii

AN APP DESIGNED FOR ADULTS TO BE MORE PLAYFUL PROBLEM: Adults spend their day with less laughs and less joy than children. (Huffpost.com, 2011)

PURPOSE: To encourage adults to approach their life more playful, to increase their joy and happiness.

TARGET: Working professionals, age group of 20s-40s.

RESULT: We received a positive feedback from Japanese employees at X company after conducting user test.

COLLABORATORS: Keio Media Design (KMD) Stanford University, d.school

MENTORS: Bill Burnett (Author, "Designing Your Life" ) - Stanford University Masa Inakage (TedX speaker, "Magical Moments with Affective Things" ) - KMD PROJECT DURATION: 2 weeks in California, US and 2 weeks in Tokyo, Japan (4 weeks in total) Feb - Mar 2019 ABOUT THE TEAM: 2 students from KMD: 1 Indonesian (me) and 1 Japanese 2 students from Stanford: 1 American and 1 Mexican

ROLE IN THE TEAM: Prototyping an app (more on UI design) Actively involved in the process from empathize phase to test phase

CHALLENGES: To find and solve the problem using design thinking process To create a working prototype and be able to test within a month

OVERVIEW


COLLABORATIVE WORK

EMPHATIZE Interviewing Japanese employees from international company and from Japanese company to gain their insights towards work-life balance and happiness at work.

DEFINE Finding the problem we want to solve based on the interview, then synthesize it, and make an action statement.

HOW MIGHT WE ENCOURAGE ADULTS TO APPROACH THEIR LIFE MORE PLAYFUL?

IDEATE

We want to create a social media app that keeps the work-life balance of an employee. The app features updated concert info, alert to exercise, and what-toeat-for-lunch recommendation

PLAYFUL DESIGN Designing for adults does not necessarily means "serious". Playful colors and character can project the value that we want to offer to the user: fun .

THOUGHT PROCESS


PROTOTYPE To check if our idea is fully translated or not and whether this is nice enough to be tested by the user. UI designed with Figma. AR developed with Vuforia.

TEST We visited again the employee that we had interviewed before, and let them to test our prototype. What we wanted to know: How How How How app

do they feel about the app do they say about the app do they think about the app would they do about the

Their feedbacks and evaluation is mapped for easier evaluation.

THOUGHT PROCESS


INDIVIDUAL WORK

MOOV

A PICTOGRAM-BASED AR WAYFINDING APP FOR NAVIGATING INSIDE AND AROUND TRAIN STATION

PROBLEM: Foreign and local tourist in Japan often get lost inside Shinjuku train station (japantimes.co.jp, 2014)

PURPOSE: To create an app that can be used by both foreign and local tourist, regardless of their language, to find their way inside train station.

TARGET: Foreign and local tourist, age group of 20s-50s.

SELLING POINT: This app is designed entirely without a text, to avoid a language barrier. Instead, I used pictograms presented in AR.

METHOD: Data-driven design SUPERVISORS: Matthew Waldman - SAMCARA Lab, Founder of NOOKA - ex President, Microsoft Japan

古川享

PROJECT DURATION: 6 months WHAT I DO: UX research UI / UX design

RESULT: We received a positive feedback from participants and successfully passed master thesis defense without revision.

OVERVIEW


INDIVIDUAL WORK

DATA-DRIVEN DESIGN Extensively done a research about foreign tourist in Japan and people who use the train as a main transportation.

HOW MIGHT WE REDESIGN THE WAYFINDING THAT IS UNDERSTANDABLE BY EVERYONE?

The design based on everyday experience. Sketching helps me to contextualize my idea and test if it is actually fit as a solution or not.


INDIVIDUAL WORK

UNIVERSAL BASED DESIGN Tourists don't have enough time to translate, to search, or to ask. Their schedule is packed and getting lost inside a train station is a waste of time.

WHY PICTOGRAMS?

Pictograms are effective to communicate the message without a text and keep the app clean and simple.

DESIGN APPLICATION


INDIVIDUAL WORK

TEST I asked 10 participants to do the test. The aim of the test is to know what should be improved, what needs to be added or eliminated, including: How How How How

do they feel about the app do they say about the app do they think about the app would they do about the app

RESULT

Based on the result, I found that using only pictograms may be good but not ideal, because it lacks of information. However, 91% of the participants believe that this app could replace the needs of using Google Maps for wayfinding.

UX DESIGN


Thank you. Contact Email: cendikia28@gmail.com Phone: +81 80 4193 2805


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.