Book Reading App UI - Adobe XD Challenge

BRIEF

A self-initiated project for an Adobe XD Daily UI contest. The brief focused on creating an experience for a reading app similar to Amazon Kindle or Kobo, but within a limited timeframe of 3 days.

As this was a daily challenge the brief was very loose. I needed to think about restrictions that would affect an app of this nature in the real world, so I began with identifying a potential design problems that we could address, as well as set a few technical restrictions. I decided that I’d like to focus on tablets running iOS and the reading experience of an Amazon Kindle like application.

(fig.1) Selecting and opening a title

Due to the short timeframe I chose to focus on a design that could show a few core user actions that would take place;

  1. I’m going to choose a book to read from my library
  2. I’m going to read my book from the beginning or a bookmarked position
  3. I’m able to adjust the book’s appearance according to my personal tastes or situation

As this was an Adobe XD challenge, I limited my tools to pen and paper and Adobe XD along with a fixed timeline of 3 days.

(fig.2) Page turn transition
(fig.3) Brightness drag bar animation

INSIGHTS

The 30% Surcharge

Although I didn’t focus on this in the design, a potential major factor was the 30% surcharge made by the Apple Store when making purchases through the application. Unless the surcharge would be an acceptable loss, purchases would go through a supporting website. Now we know why Kobo and Amazon Kindle don’t have buy buttons as such!

(fig.4) Application structure

Customising the Reading Experience

There are many settings one could adjust on an app like this - too many. I chose to prioritise the settings that a user would most likely change while reading;

(fig.5) Layout sketches

One of the things I don’t like about apps like Kindle are the many menus, and how none of them fit into the flow how the app works - there’s a lot of back and forth. Distilling the options meant that there wouldn’t be a cumbersome menu to navigate. We could change our settings while reading the book by tapping the screen, and when we’re done we can tap again.

I felt a good idea would be to have the line height adjust according to the font size. That way both features could be incorporated into one slider.

(fig.6) Text sizing drag bar animation

OUTCOME

This little project wasn’t only a lot of fun, it also opened up the door to opportunities for work on similar larger projects. Restricting myself to only XD also allowed me to get to know the software better, and to get to grips with the animation functions. I also won a year's subscription to Adobe CC - so that's nice. :)