Kuwentong Pambata

About the Project

This website is an anthology of works by Lumad students, college facilitators, and advisers. Through stories, the project aims to empower the youth.

MY ROLES

UI Design

Front-end Development (HTML/CSS)

Problem

The hard-copy of the Kuwentong Pambata anthology

Since the client did not avail of user research, it was important to still know what they want to prioritize for their website. Kuwentong Pambata is a book that will be translated to a website so a wider audience can access it. Unlike the book, the website has the need to have a clearer call-to-action for donations. The challenge for this website was to create almost equal traction for all the works, besides the storybook which is the main star of the show.

Design Form

Typography

The typeface used for the website were all derived from the book since we didn't want to make it look too different from the original text.


Colors

Since the book was in grayscale, the colors used for the website were taken from the cover and they were made UI-friendly.

Iteration

At first, we were struggling with what the user should see first in the landing page. Is it the storybook? Should we introduce what Kuwentong Pambata is first? Where do the other works go?

Landing page that has the about section and story book as main call-to-action

In the end, we opted to give context on what Kuwentong Pambata is first, then highlighted the main selection which is the story book. The other works are shown immediately after it.

Side-by-side: single-scroll and paginated versions of the literary works

We made two iterations for the works created by Bakwit Schools students. One is a single-scroll page and another is paginated. Upon consultation with our client, we found that the single-scroll page felt exhausting to look at and there was a big chance of the users not seeing the works at bottom, so we chose the paginated version of it instead. This one has a better chance for the audience to see other works since a mini table of contents is displayed on the sidebar. When the user reaches the end of the selection, a footer shows up that will prompt them to take a look at the next work or the previous. The same format was applied to the selections of student-teachers and advisers.

Preview of the web version of ‘Si Obello’

Finally, for the storybook, we took advantage of CSS animations to make the work seem more alive. This is a single-scroll page for easy viewing and to reduce loading time. The format is still similar to the book, but some portions were separated or merged together to make it easy on the eyes.

Support Lumad children and their schools through donation.

Visit Kuwentong Pambata to learn more about Bakwit Schools and the project. Check out the creative works of their students while you're at it!

Para

My undergraduate thesis aims to help jeepney drivers send their children to college through introducing scholarships to them and financial evaluation.

Ignition

Ignition is a carpooling app that helps Ateneans match rides. This is a competition entry for User Experience Society's UX University.