Adobe XD UI Challenge

UI Design
UX Research

A self-initiated project for an Adobe XD UI Challenge. 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.

A preview of the book application in 3 colours.

Brief

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.

Core UX Research

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. Due to the short timeframe I chose to focus on a design that could show a few core user actions that would take place;

i. I'm going to choose a book to read from my library

ii. I'm going to read my book from the beginning, or from a bookmarked position

iii. I'm able to customise the books appearance according to my taste or scenario

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!

book-ui-application-flow@2x

Customising the Reading Experience

There are many settings one could adjust on an app like this. I chose to prioritise the settings that a user would most likely change while reading; font size, line height and screen brightness.

One of the problems faced by 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.

Project Conclusion

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. :)

Copyright © 2017–2020 Paul Brophy