UI/UX Portofolio by Muhammad Faisal

2020

UI

UX

PORTOFOLIO Muhammad Faisal

Muhammad Faisal

About Me

Graduated as a bachelor's degree in information systems with a strong interest in UI/UX design development. Has experience building UI/UX projects at Bank Mandiri companies. During my internship, I designed a mobile app and website page.

linkedln.com/muh-faisal-110898

dribbble.com/muh-faisal

behance.com/muh-faisal

attendance

Study Case for

Mandiri Employees

About Project

The design of this application process is based on the attendance problems I have encountered at work since the COVID-19 pandemic.

Link prototype: https://bit.ly/2FTe64W

The Problems During my internship, I encountered several problems at the office

High Risk of Exposure to COVID-19 Since the COVID-19 pandemic, the office has made changes to policies for employee attendance, previously using a fingerprint device, and now using one shared paper.

I designed an application with the main feature of employee attendance

Employees fake time attendance Since the change in attendance policy, some employees faked early time attendance I designed an employee attendance application with GPS-based features and live selfie

01

User Interview and Research I’ve interviewed some employees with different jobs, and behaviors

02

“Gue takut kena virus kalau pakai pulpen dan kertas bareng-bareng buat absen” Baim H Security

Needs: • Application for work attendance

“Kalau telat dikit aku bisa ubah waktunya jadi lebih awal.. sebenarnaya aku salah sih”

Pain points: • Lost the pen borrowed Syania W Teller

Needs: • Note feature for late reasons Pain points: • Late for work due to traffic jams

Structure I made a sitemap, to help me do the UX design process

03

Onboarding Screen

Home

Statistics

Request Leave

Login Screen

History

Attendance

History

Leave History

Attendance

Clock In

Clock Out

Profile

Edit Profile

Sign Out

Wireframe I designed some low fidelity wireframes for the basic structure of the page

before the design and visual content were added

04

Colors and Typography I designed the application font and color based on the blue corporate identity

05

Aa

Poppins

007AFF - E9F3FF

FF5F5F - F9E3E3

ABCDEFGHIJKLMNOPQRSTU abcdefghijklmnopqrstu 0123456789

67FF76 - DEFFDD

Logo I am using an existing logo from the Bank Mandiri company, but added the phrase "attendance"

attendance

06

Onboarding Screen At the onboarding-screen displays several benefits in the application

07

08 Log-in Screen The login screen displays the text fields, NIP, and Password. This application access rights are only for Bank Mandiri employees, so a sign-up form is not provided

Home Screen On the homepage, has employee personal statistical information regarding attendance, attendance today, and a leave request feature

09

10 History Screen On this page I divide the history section into two (attendance history and leave history) and each page has sort and filter features

11 Attendance Screen On this page I designed a float button to separate the clock in and clock out screens. For the problems experienced by employees, I designed a gps based feature, live selfie and notes (optional).

12 Report Screen This page is created based on office needs because everyday attendance lists are sent to the head office. In the report table, I designed a fixed first column so that the user can scroll the context.

13 Profile Screen On the profile page, employees can edit general data (cellphone numbers, etc), and then for this page employees can also provide advice and ratings for independent attendance application developers.

14 Notification Screen This page has two sections, namely notification and approval. The notification section contains information on clock in and clock out times, and the approval section contains information on employees applying for leave and this section is only owned by the branch manager.

User Testing I use the Useberry application for user testing

15

Task: The main feature I tested is attendance (clock in and clock out)

Users: The users I tested were 3 people, each of whom worked in different divisions (security, teller & internship student)

Time: The time I have limited in this test is 1 minute and the average time for user testing is 28.4 seconds

Succes: The result of successful user testing is 100%

Final Design Presentation I did a final design presentation to the branch operations manager

16

JOIN BANK MANDIRI

Study Case for New Bank Mandiri Customers About Project Join Bank Mandiri is an online account opening website for new Bank Mandiri customers. This design is based on the problem of opening an account on a desktop web browser that is not yet available.

The Problem

01

Opening a savings account is only available on a mobile browser and not available on a desktop browser

https://join.bankmandiri.co.id/app/

Wireframe

02

I designed several high fidelity wireframes and defined important information that was displayed on the website, such as how to open an account.

Final Design

03

In this process, I design using the identity colors on the official bank Mandiri website (orange and blue).

thank you..