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