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.