UI/UX Design by Markuss Javier

The one app to help you nurture your Catholic faith.

As the leading Catholic online bookstore in the Philippines, St Pauls now aims to make their products more accessible to their readers. St Pauls Philippines has partnered with us for a project where their readers could browse, buy and read books, bibles and more, all in one app.

Challenge

The challenge was to build a simple bookstore and book-reading app that has a familiar feel to it, while being able to appeal to St Pauls’ wide range of readers.

<aside> 💡 Solution

Our solution was to first identify the key features by taking inspiration from other similar book-reading apps like Google Play Books and Amazon Kindle. We then structured the app architecture in such a way that readers would see products and content related to their interests.

</aside>

Stylescape

To set the general mood of the app, we held several meetings, both with the St Pauls team and internally with the project managers and developers. Since we had a very tight timeline for this project, we took the liberty to do research mostly on similar products where we could base the foundation of the project on. I then collated all design and content-related ideas into one canvas similar to that of a moodboard.

This is the stylescape I put together to set the design path. A stylescape is just a simple, more particular way of building the foundation of a project, where I have collated all content, features, and decisions based on our meetings and research. In this canvas, I’ve already included the font styles, functionalities on each menu item, the color palette, and even an initial design study for the home and splash screens.

This is the stylescape I put together to set the design path. A stylescape is just a simple, more particular way of building the foundation of a project, where I have collated all content, features, and decisions based on our meetings and research. In this canvas, I’ve already included the font styles, functionalities on each menu item, the color palette, and even an initial design study for the home and splash screens.

Design Studies

The next step was to create three design studies for the home, splash, and onboarding screens. It was initially agreed upon that the colors should be more on the warm side, so I tried playing around with shades of apricot. After both teams have reviewed the three initial design studies I’ve presented, we decided to make another one, which would later on lay the foundation for the final design.

This was the first study I presented to the team. The idea was to use calming images for the splash screen while the app loads, and feature a random bible verse. The home screen of this study features a Search bar at the top so as to encourage users to explore more.

This was the first study I presented to the team. The idea was to use calming images for the splash screen while the app loads, and feature a random bible verse. The home screen of this study features a Search bar at the top so as to encourage users to explore more.