Photo of Georg Mörth

Material Design is where it's at

Goodreads is a platform for people who love to read. You can create an account, keep track of everything you've read, find quotes and reviews of almost every book out there and you can also take on reading challenges and share them with your friends. I've always been a user of goodreads, and they truly stick out because of their massive content and fanbase. But what's always bothered me is their outdatet, cross-platform app that they make you use.

In the lecture App-Design at FH JOANNEUM we were supposed to redesign an existing app and to make it native for either Android or iOS. With that I immediately thought of Goodreads and with help from lecturers and various books the following project came into being.

As mentioned before, this project was focused solely on UI-Design and building a pixel-perfect prototype of an existing app. The app is optimized for Android and uses elements and guidelines of the platform.

Photo of the app


Thomas Mirnig (Digital Product Designer at iTranslate) and Frank Rausch (User Interface Typographer) are both lecturers at the FH JOANNEUM in App-Design and their input and critique strongly influenced and helped during the making of this prototype. Also the book Refactoring UI by Adam Wathan and Steve Schoger were a big help in learning how to build native apps.


Things I put into practice and learned during the process:


  1. There is no home-page in apps. That's used in websites. Apps usually have a top-level view.

  2. Always let the user know where he currently is.

  3. Consider the menu at the bottom to be like apps within the app.

  4. Show something is scrollable sideways,
    by cutting parts of it off on the side.

  5. Put the 8pt Pixel grid into practice.

  6. Use CRUD as a Tool.

  7. Make everything clickable at least 1cm x 1cm in size.

  8. Label everything. Text is usually easier to understand than icons.

  9. Use system fonts.

  10. Prepare the prototype for handover to the developer.

  11. Minimize number of font sizes and colors.

Close up of the app
Close up of the app