Graphic Design & UI/UX Portfolio 2019 // Nabila Putri Fauzia

nab ila p ut ri fau zia

2019

GRAPHIC DESIGN & UI/UX PORTFOLIO

EDUCATION

HELLO!

Undergraduate Architecture Program Institut Teknologi Bandung (GPA: 3.40/4.00) 2015 - 2019 Science Program SMA Negeri 3 Bandung 2012 - 2015

A CHIEV EMEN TS 2nd Winner (team: Prisky, Shazkia, and Zahra) ITB Jatinangor Canteen Design Competition Institut Teknologi Bandung 2018

Nabila Putri Fauzia Bandung, April 10th, 1997 Indonesian

C O N TA C T +62878-2390-3098 nabilaputrifauzia@gmail.com linkedin.com/in/nabilafauzia issuu.com/nabvla

Top 10 Seminar (team: Guntur and Toby) Architectural Seminar Course Institut Teknologi Bandung 2018 Shortlisted as Top 10 (team: Alif, Denny, Joy, and Yosafat) Oil Rig Design Competition OCEANO (National Event by ITS Marine Engineering Students) 2018 Competition Entry (team: Joshua and Terry) 120 Hours International Architecture Student Competition 2018 Competition Entry (team: Ayyash, Joshua, and Terry) Cultural Monument Design Competition TKIMAI XXXVI (Indonesian Architecture Students Annual National Event) 2018

W OR KI NG E X P E R I E N C E URBAN+ as an Intern Landscape Designer June 2019 - August 2019

OR GANI Z AT I O N A L E X P E RIENCE S

SKILLS Language Bahasa Indonesia (native speaker) English (proficient)

Hands On

Head of Information and Media IMA-G ITB (ITB Architecture Students Association) 2018

Sketching, hand-drawing, watercoloring, model making,

Head of Graphic Design July Graduation Parade, Institut Teknologi Bandung 2017

Software

Head of Graphic Design FACADE (ITB Architecture Student Excursion) Program 2017 (Series of Events) 2016 - 2017

Illustrator AutoCAD

Staff of Information and Media IMA-G ITB (ITB Architecture Students Association) 2016 - 2017

Operating System

Staff of Graphic Design Gaung Bandung 66 (IMA-G Annual Event) 2017 Secretary, Violinist Classical Music Extracurricular Group, SMA Negeri 3 Bandung 2013 - 2014

digital photography

Photoshop

InDesign Lightroom

Microsoft Office Apple iWork SketchUp

XD

Macintosh and Windows

INTERESTS Art & graphic design

Landscape design

UI/UX Design

Books & reading

Architecture Travelling

UI/UX DESIGN

REDESIGN ITB LIBRARY APP ITB Library App is a mobile application for ITB students to search for information about books that the library has. The existing app allows users to search for books, view some information about the book, and check its availibility in the library.

Another feature of this app is to view the user’s currently borrowed and previously borrowed books. The app also gives book reccomendations based on previously borrowed books.

USER PERSONA S ITB Students

Male & Female Bachelor: 18-25 y.o.

Masters: 23-35 y.o.

Doctorate: 26-40 y.o.

USER ANALYSIS ITB Lecturers/ Professors Male & Female 25-60 y.o.

USER NEEDS • Search for books • Get information about books • Check book availibility • Borrow books (tagging system)

Scan me to try the app!

• Check deadlines for returning books • Get book reccomendations • Add books to a to-read list

1

Since this app belongs to an existing institution (Institut Teknologi Bandung), the app should use the existing logo and color scheme that the institution is currently using to make sure users are familiar with the app.

2

The user personas’ ages varies from teenagers to middle-aged people. So, the app must be simple, to the point, and easy to use, to make sure users from all ages can use the app easily.

EXISTING APP FLOW Splash screen

Home screen

Sidebar

Search bar

Login / profile

Ribbon bar

For you Top loan New releases

Book

Information

Availibility

User information History

Logout Contact us

CONCERNS ON THE EXISTING APP • The screen layout is a bit cramped up • Some parts of the app flow doesn’t seem right (example: login screen not being placed at the beginning) • The app design is a bit old-school • On a lot of pages, the texts doesn’t show hierarchy • Some pages have unnecessary information

SUGGESTED APP FLOW

Splash screen

The login screen is moved to the beginning, so users must login before using the app

Sidebar

User information

Notifications

Home screen

Currently borrowed

Added feature to enhance user experience

Profile

Wishlist

Contact us

Favorites

Settings

History

Logout

Added more features to enhance user experience

Home screen

Login

Search bar

These features are moved directly to the home screen without using a ribbon bar to increase effectiveness

For you Top loan New releases

Switched the order based on hierarchy and added “homepage” and “settings” feature

SUGGESTED APP FLOW BOOK SCREEN

Borrow Book

Primary information Book information is seperated into primary information and secondary information

Add to favorites Added feature to enhance user experience

Add to wishlist Added more features to enhance user experience

Secondary information Book information is seperated into primary information and secondary information

Similar books Added feature to enhance user experience

APP INTERFACE SPL ASH SCR EEN EXISTING

S U GGE S T E D

The splash screen didn’t change much, just some changes on logo size and text font. A loading bar is added to let user know that the app is currently loading.

L O G I N SC RE E N E XIST ING

SUG G E ST E D

The colors are changed to match the splash screen for consistency.

The same logo and text from the splaswh screen is also added to keep the continuity of the app. A forgot password feature is added.

H O ME S C R E E N E X ISTING

S U GG E ST E D This top bar stays on top when users are scrolling (not only on this home screen!)

To access more of these, users can simply tap

The existing home screen is too bulky and seems too full. Also, the categories button is located at the far bottom of the screen, which is inconvenient.

Added a notifications feature “Categories� are moved to the top

The suggested home screen is overall more sleek, clean, and roomy. The same blue color is used as a secondary color, while the background uses white to make it less striking.

The search bar is still located at the very top. Recommendations, top loans, and new releases are moved to the home page without a ribbon bar, while categories are moved to the top, below the search bar.

CAT E GORI E S EXISTING

N OTIFIC ATION S

S U GGE S T E D S U GG E ST E D

The red background indicates that the notification hasn’t been opened yet

Categories are moved from a seperated screen to a scrollable ribbon bar, so users can access the categories easier.

S E A RCH B A R E X ISTING

S U GGE S T E D

Search histories are added so users can easily access their recently searched keywords.

The existing app doesn’t have a notifications feature. So, the notifications feature was added to let users be notified when a book they’re borrowing is due to be returned or when a book they added to their wishlist is available to borrow.

S ID E BA R EXI STING

S U GGE S T E D

The top of the side bar is changed from the library’s profile to the users profile to let users know which account they are logged in.

Home page and settings are added to the side bar to make them easier to access.

CATEGORIZED BOOK S E XIST ING

SUG G E ST E D

For the suggested design, the book information shown is reduced to only the book cover, title, and author, since these three are the most important information of a book that users would need to see first.

The arrangement is also changed from lists to grids, so there is room for more books in one screen.

BOOK SCREEN EXISTING

S U GGE ST E D

Primary book information are located at the top

Added a wishlist feature

Secondary book information are located after the main features

The book cover on the existing book screen is too big (it takes up almost half of the screen!).

The existing book screen also has no information hierarchy, as you can see, all the text are the same size.

Added an “add to favorites� feature

Users can borrow the book and see the availability

In the suggested book screen, the book information is divided into primary and secondary. The primary information are those that are more important and users would need to see first.

PROFILE EXISTING

S U GG E ST E D

Added a profile picture feature

This Wishlist is a new suggested feature. Users can add books they want to borrow to this list and they will be notified when the book is available to be borrowed

The existing profile screen shows too many unecessary information and isn’t really useful. (Your address and student number doesn’t really have anything to do with borrowing books from the library)

To access more of these, users can simply tap

Number of books currently borrowed

The suggested profile screen reduces the user information to only important ones (name and email), with the addion of profile picture and number of books currently borrowed. The wishlist, favorites, currently borrowed, and history can be accessed from the profile screen.

VISUAL BRANDING

EPILOGUE [2016]

position: person in charge of publication and design Epilogue is an exhibition of final projects made by final year students from ITB’s architecture undergraduate program. This is the design for Epilogue in October 2016. The theme of the event was mainly dominated by geometrical shapes and illustrations. project outcome: grand design logo social media publication printed & digital posters invitation letter banner brochure

social media publication

invitation letters

main poster

brochure

FA C A D E [2016]

position: head of graphic design FACADE is an excursion program for architecture undergraduate students at ITB. For this year, the destination was Lombok, Indonesia, so the grand design was made to match the destination.

The logo adapted a shape from a traditional pattern from Lombok, the earthy colors came from colours of the local scenery, and the decorative shapes also came from traditional patterns. project outcome: grand design logo stamp digital posters social media publication proposal design nametag certificate banner

logo

certificates square digital posters

proposal design

nametag

social media publication

book design

WISDJOEL [2017]

position: head of graphic design Wisdjoel is ITB’s July Graduation Parade in 2017. The theme of the event was pre-independence Indonesia. The visual aspects contains retro designs with a touch of Indonesia’s iconic images in those years, such as Ir. Soekarno and other Indonesian independence figures, Borobudur temple, etc. project outcome: grand design logo stamp printed posters digital posters social media publication proposal nametag certificate greeting card banner

logo

nametag

social media publication

main poster

proposal design

certificates

square digital posters

FA C A D E EXHIBITION [2017]

position: head of graphic design FACADE Exhibition is an exhibition that showcases everything that student’s have learned during FACADE excursion. The color scheme for this grand design is monochromatic with yellow as a pop of color. The design also still uses some traditional shapes to match FACADE’s grand design. project outcome: grand design logo printed posters digital posters social media publication banner

main poster

social media publication

invitations

x-banner

#I M AGE KSP L O R AT I F [2018]

position: head of information and media #IMAGEKSPLORATIF is the tagline IMA-G’s board in 2018. IMA-G ITB (Ikatan Mahasiswa Arsitektur Gunadharma ITB) is the name of ITB Architecture Students’ Association. Since the initial keyword is “explorative”, the concept of this grand design is outer space, with a galaxy as the main logo and constellations as the divisions’ logo.

The visual aspects contains colors that represent each division and images stylized as splashes of paint. project outcome: grand design logos printed posters digital posters social media publication certificate

logos

document covers

social media publication

square digital posters

printed posters

RENDERING

before

post-editing

before

post-editing

PHOTOGRAPHY

GET IN TOUCH nabilaputrifauzia@gmail.com +62878-2390-3098