Diana Daniela's Portfolio 2019-2021

A sum up about me

UI/UX Projects

User Interface Design

UI/UX Portfolios Hi, Welcome to my works

Selected works of Diana Daniela

2019

2021

Kindly review this in two-page view

Design is not just what it looks like and feels like. Design is how it works.”

- Steve Jobs

Diana Daniela,

a Designer.

Currently focusing as a UI/UX Designer that loves to explore and think outside the box to create an engaging interface, provide a better experience, and bring products to life.

p.

+62 896 0736 1297

e.

dianadaniela72@gmail.com

ig.

danieladesign2015

Hi, you can call me Diana, a short story about me;

I always love to learn, especially in the design area. I'm a firm believer that the first purpose of design is to solve problems. I enjoy the process of designing, starting from scratch until reaching the final design. Design is so much more than just output, it's also about the journey and background story that makes it more valuable and beautiful. My passion brought me to create these research-driven designs into beautiful visual and fulfilling experiences.

design tools.

personal skills.

9/10 Problem Solving

9/10 Team Working

8/10 Innovating

interests. user interface

user experience

branding

craft

photography

travelling

fashion

detail works

educations.

2018

Adobe Certified Associate Credential Identification Code : 9RWD-s23V

2018

Certiplus Program Completed a series of professional training

2018

Visual Communication Design Major at Institut Teknologi Harapan Bangsa, Bandung.

Concentration: Graphic Design

Cum Laude, GPA 3.93

z

experiences.

organi ation.

2019-2022

201

6 - 2019

I

201

6 - 2018

Galler

UI/UX Designer

THB Ambassador

Aleph Labs

2019

y Division Coordinator

Student Association DKV ITHB

Graphic Designer Intern Label Ideas & Co

2018 2019

Publication and Documentation Coordinator

Jog A Thon - Charity Event

Branding Designer Little Gili Clothing

2018 2018 - 2019

vison

Decoration Di

Nol Satu - DKV ITHB’s Art Exhibition at PVJ Mall

Barista Kuro Koffee

201 2018

7

Art Director

TPB - Art

Photographer

Graphic Designer

201

7

f

User Inter ace Designer

201

7

201

7 - 2018 Event Organizer Member Uun & Friends Event Organizer

Publication and Documentation Coordinator

Outbound

v

Creation Di ision

Sandya Warna - DKV ITHB’s Art Exhibition

Graphic Designer

Open Trip (Telkom Indonesia Start Up)

Exhibition

React - Harapan Bangsa

PT. Barless Darya Aguna Barikan

2018

f Exhibition

Chie

201

6

Committee Paracosmic

Student Art Night - DKV ITHB

Fresh Look of

BCA’s Public Website In 2019, Bank Central Asia (BCA) decided to revamp its public website. As one of the biggest banks in Indonesia, it was a great step to follow the development of times and technology. BCA Public Website released in middle of 2021. It took 1 year to design and the rest was front and back end development.

As we know, Bank Central Asia (BCA) have a strong and solid identity and it became our challenge in this project. We need to improve both user interface (UI) and user experience (UX) while not losing their identity.

Project Year

2019

Category

Website Revamp

Domain

www.bca.co.id

Release on

April 2021

Tools

Sketch

Principle

Zeplin

Invision

BCA’s Public Website

Act of Design Thinking We use these 3 iterative steps. Start with understanding our users and ends with solutions for their needs.

ANALYZE

CREATE

TEST

analyze process.

Survey

We’ve done a lot of research, such as Landscsape Analysis (Local & Global), Ethnographic Studie User Persona Strategic Opportunities

Financial topics is getting more popular among the young & young adult netizen. At least 76% talk about financial in daily basis.

and also we gather together with employees from BCA to collect what they new expectation for this Public Website.

OPPORTUNITY

What if we could provide people more educative, relevant, and simpler story for our aspiring future market?

Surprisingly, it’s not just the “banking language” alone that makes people hard to understand the product but it’s too much information for them OPPORTUNITY

What if we could, not just helping them to navigate the information esily, but also understand our product easier?

Ethnographic Interview

The 71% admitted that they visit a banking website when looking for a straight information in a limited time OPPORTUNITY

What if we could provide more easiness to search an exact information in their busy activity?

2019 - 2021 Diana’s Portfolio

BCA’s Public Website

how BCA as a brand is perceived?

Biggest Private Bank Transactional Everywhere Old

Simple Trusted

key opportunity

How can we design a solution that helps them understand finance easily no matter who they are, where are they, or what they want to do

our mission

Create a delightful experience for users on BCA Website

Selected Works

BCA’s Public Website

create.

Smart Bar The menu in our Smart Bar came from what user most search and needs when they visit this website.

Product/Promo Section

Informational

(Event, News etc)

2019 - 2021 Diana’s Portfolio

BCA’s Public Website

Smart Search Like before in our research, users tend to look for straight information in a limited time, so we provide Smart Search to help the users find what they need faster.

Solution We provide solutions to answer user needs. From that, we can provide the best product/service that they need most.

Promo Section

Selected Works

BCA’s Public Website

responsive view.

2019 - 2021 Diana’s Portfolio

Selected Works

OCBC NISP

Public Website

Like No Other OCBC NISP is one of the oldest private banks in Indonesia that decided to take a big step to do digital transformation.

Problem.

OCBC NISP aims to reach youth audience while doing digital transformation, but their current public website didn't fulfill their goals

What we do.

Revamp and redesign OCBC NISP Public Website to improve overall Banking experience like no other.

Project Year

2020

Category

Website Revamp

Domain

www.ocbcnisp.com

Release on

October 2020

Tools

Sketch

Principle

Invision

OCBC’s Public Website

analyze process.

How OCBC NISP as a brand is perceived?

Quick survey to 40 peoples at the age of 25-35 years old

UKM Revolusioner Old Singapore

Red

Trusted

business focus.

In the process of Digital Transformation

Aims at millennials to get interested in credit products, one of them is KPR

Encourage financial literacy to the public and

Focus on Beyond Banking’s strategy through

offer financial services facilities for millennials

ONe Mobile App

who want to develop their businesses.

2019 - 2021 Diana’s Portfolio

OCBC’s Public Website

market sentiment.

Based on OCBC Singapore’s team research.

Youths felt that banks

Youths did not feel like

were cold, scary and too

banks cared about them

much banking jargon

because they did not

was used

have much money

Youths were confused All banks felt and looked

about finances and

the same to them

needed a peer to help lead them

So, we need to

Changing industry perception and building trust of the customer

by giving banking experience that connects tools to set and track user goals

Selected Works

OCBC’s Public Website

DESIGN

landing page.

Each bank user category (Individu/Business/Syariah) will have its own Landing page and Life Goals, and there is also a general and Nyala Landing Page as an OCBC Campaign.

2019 - 2021 Diana’s Portfolio

OCBC’s Public Website

We want to help users focus on achieving their goals.

Users are able to choose their life goals, and we will offer the best product/solution that suits their needs.

Life Goals Life goals options that users are able to choose based on their needs and plans.

Megamenu To help users easier to find specific menus they need to access.

Selected Works

OCBC’s Public Website

FEATURE

dream calculator.

One of the main features of this Public Website is Dream Calculator. User can do their financial planning and know financial steps to achieve their goals. At the end of this calculator journey, OCBC will recommend the best product that suits the users best in achieving their goals.

2019 - 2021 Diana’s Portfolio

Selected Works

OCBC’s Public Website

developing design system.

While doing this design process and user testing, I developed the Design System. It's to maintain consistency across the designs, between the designers, developers, and any future updates later.

Principle

Element

Component

Brand

Philosophy

Guidelines

Color

Iconography

Buttons

Modal

Forms

Pages

2019 - 2021 Diana’s Portfolio

Selected Works

Telkomsel Business Platform

MyEnterprise

Connect Your Business As one of the largest wireless carriers in Indonesia, Telkomsel not only provides services for Individu but also for Business. It called MyEnterprise.

problems.

Telkomsel B2B faced problem in their Business Platform. It had complicated and long journeys, so it was ineffective and inefficient for the user. what we do.

Our team rethought and redesigned Telkomsel end to end journeys for their B2B's customers to help improve efficiency, scale the growth, and uplift customer experience.

In Summary, what we have done for this project includes MyEnterprise, MyEnterprise Care, and MyEnterprise Back Office

Project Year

2020

Category

Website Revamp

Release on

2021

Tools

Figma

Zeplin

Invision

Telkomsel Business Platform

goals.

Improve proficiency and

Increase business acquisitions

Build big data for future

efficiency through better user

by providing the right solutions

services and the scalability of

experience

service design

analyze process.

We did research and analysis, such as Local & Global Landscape Analysis, UX Audit, and User Interviews to help us find out the purposes and goals of each role in this Platform. So we can develop the journeys with new features and better overall experiences.

Demographics

Key User Personas

I want to have a clear check out journey I want to easily validate docs

Customer

Account

Commercial

Manager

Manager

I want to see clear update from the order I want to view the status of SIM Card ordered and many more

We collect insights, obstacles, needs, future expectations from the users that use this EBO

TELE AM

platform on a daily basis.

2019 - 2021 Diana’s Portfolio

Telkomsel Business Platform

crafting.

We craft our design principles based on research & insights. Adding to that, Human-Centered Design Workshop helps us to analyze our persona, carry their pain points, and try to solve them with our principle to reach UI/UX Delight. We start to develop the journeys and Information Architecture.

UI/UX Delight

FAST

Experience that is simple to use and intuitive, that can speed up the overall experience and present SIMPLE

PERSONAL

information based on usage patterns for a personal experiences

Selected Works

Telkomsel Business Platform

design.

Our homepage consists of 4 main sections. Each of them is created based on user activity and behavior when accessing this website. This homepage itself focuses on guiding and convincing first-time users.

Header

Landing screen Quick action for users to navigate between products, with a USP as a title and Call To Action to go directly into the buying process.

Feature Section Introduce main features in this Public Website

2019 - 2021 Diana’s Portfolio

Telkomsel Business Platform

How to To help the users get a big picture of the transaction steps inside this Public Website. Also, to convince the users that the steps are clear and simple.

Testimonial Testimonies from companies that use MyEnterprise to get more trust and convince the users.

Footer

Selected Works

Telkomsel Business Platform

DASHBOARD

monitor usage We also revamped myEnterprise Care.

It is to monitor and manage services that B2B customers use. Here are some of the key pages that we created.

We provide a dashboard with some widgets to help users track, control, and supervise easier.

Simplifying customer

Reminder for customers to

Cross-selling banner that

experience in managing,

continue their ongoing

allows users to find the next

usage, orders, and also

process or guide them to

suitable solution for their

payment.

finish their journey

businesses

2019 - 2021 Diana’s Portfolio

Telkomsel Business Platform

SELF ORDER

buy multiple products

at one time In the order process, users found a need to order multiple products at one time. It is one of the new features we provide in myEnterprise revamp.

Also, users can compare one package to another in one category of product.

Clear Product Title and quick explanation about the product

Quick access for users to navigate between solutions (multiple solutions in one buying process)

Bandingkan Feature that allows users to find the most suitable package for them

Selected Works

Telkomsel Business Platform

developing design system.

Building a proper Design System is essential and crucial. A Design System will help the design and development process be more efficient and consistent across all platforms.

Besides contributing to User Experience and Interface in this website revamp. I also developed B2B Design System that can evolve across Telkomsel products and digital business.

What was challenging for me when developing this Design System was to combine these platforms that have different needs as one Design System.

2019 - 2021 Diana’s Portfolio

Telkomsel Business Platform

Selected Works

Open Trip

Collect your memories Open Points Section Interface Open Trip is one of the start-up agencies under Telkom Indonesia that sells traveling services through a Mobile Application named Open Trip App. Therefore, the application interface must reflect the Open Trip image. I collected references and visual styles that were liked by travelers aged 25-40 years old.

brief.

Open Trip will add a feature in its mobile app called Open Points. The goal is to maintain the users to keep using the app by giving back something to users.

Industry

Travel App

Category

Business

Tools

Adobe Illustrator

This concept of photography was chosen because

I use a simple concept with a geometric icon. A

the majority of travelers are more interested in

scroll has a down type and a vertically arranged

photography than vector or illustration elements.

dominant layout. The color usage is matched with

After all, it speaks about the existing places more.

the Open Trip brand in yellow colors and uses

In addition to layout, I research how the user’s

green highlights to emphasize the interfaces.

habits are in accordance when using a mobile application.

Selected Works

2019 - 2021 Diana’s Portfolio

Selected Works

HSBC Kids Bank

Fun way to Saving Mobile Application mock up and simulation HSBC wants to increase market share in Malaysia, by reimagining its banking solution for children & youths. They aim to adopt the younger generation and grow the relationships into adulthood.

Industry

Banking Application

Category

Simulation

Tools

Adobe Illustrator

brief.

idea.

Create a solution so that the users can start quickly, learn about money, and continuously save and use the new banking product

Create a mobile app that is understandable and user-friendly, can be accessed by users (kids) and their parents, equipped with a guide feature that is understandable by every user, and a reward feature that can be achieved when consistently saving.

target audience.

Childrens 5-12 y/o and Youths 12-18 y/o born as digital natives

Selected Works

HSBC Kids Mobile Application

features.

Reward

Goal Saving

Guide

When saving consistently, the user can get a

Users can save money and set their goals of

Guide feature that can be accessed on every

reward in the form of characters. This

saving, amount, and time. When the user

page to help the users understand some

character can be collected and leveled up.

successfully achieves their goal, they will get

points about money and saving.

some rewards.

2 Mode (Kids & Normal)

Transfer

In kids mode, multiple access is allowed, and

Able to send money to other bank accounts

in every kid’s decision making must get

For kids mode, the transaction must get

permission from their parent through

permission from their parent through the

notification or request in the parent’s mobile

parent’s mobile application.

application.

UI flow.

Log in Welcome Page Register Account Access Code/Fingerprint Kids Mode

Normal

Multiple Login

as a kid

Email registration confirmed

Default home - search destination

as a parent

Email registration confirmed

2019 - 2021 Diana’s Portfolio

Selected Works

2019 - 2021 Diana’s Portfolio

Selected Works

thank you.