Rooney’s App Part 3: Design Process

To continue the process started in my previous post about defining the user journey, I’m going to talk about my design choices for the bookstore app “Rooney’s Books”. Rooney’s books is a completely digital bookstore that focuses on fiction. I created an entertaining special feature called “Character Connect” that aims to introduce users to new books.

I wanted the app to feel like a classic brick-and-mortar bookstore. It needed to capture the enjoyment of acquiring a new book. With this idea in mind, I gathered some inspiration and got to work!

1. Color

I chose a deep berry red as the dominant color for the design and soft tan to be the supporting color. These two colors evoke establishment and warmth. Again, I wanted to capture the atmosphere of an old bookstore and the colors felt perfect for the goal.

2. Type

In the same way, I wanted the type to be classic, yet welcoming. A lovely typeface I found that fulfilled this requirement is Rooney (yes, I liked the name so much I gave it to the app). Its roman build is familiar among bibliophiles, but its rounded corners are soft and welcoming. To accompany Rooney, I chose Open Sans for text and buttons. It’s simple, san-serif structure has made it popular among web designers for its readability in smaller sizes.

3. Icons

While the app feels classic, I chose to use the genre icons to give the app that little bit of fun that every book reader has inside of them. I made the icons simple and easily identifiable but pushed them into the upper left of their circle backdrops to make them look imperfect.

4. Categories

On the home screen, I decided to organize the content inside each category using a carousel that can be dragged left or right. This method of organizing content can be seen in popular apps like Netflix, Spotify, and Audible. The last image in each category is left “hanging” off of the screen to let the user know that they need to drag the images to see more content.

5. Character Cards

I designed the Character Connect feature to be clean and straight-forward since users may not be familiar with how the feature works. Before they begin, users will be taken through a short tutorial that will show them how the feature will work and what different icons and buttons mean. Users can swipe through the tutorial at their own pace and return to it later if they need it by tapping the question mark. While the feature uses the popular swipe left/right interaction, I included the buttons at the bottom for users who may have a difficult time swiping or would prefer to use buttons.