Adobe XD UI Challenge

UX Designer

(2019) 3 days

I've used Sketch for a long time, but when XD came along I was interested in giving it's auto animate features a try. I set myself a 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.


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.

Setting the parameters

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 made up a quick empathy map for an imaginary user. The core tasks I would focus on were;

i. Choosing a book to read from the library

ii. Reading a book from the beginning, or from a bookmarked position

iii. Customising the book's appearance

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