user's avatar
Book App (UX Design Process)
Sample of my app's wireframes
User Experience Design isn't just about the final product - it's about the steps that get you there.  This collection is a breakdown of the main steps I took in the creation of a fictional app called the Book Lovers Diary
Intro

Despite people saying for decades that ‘books are dead’, books are as popular as ever, coming in both e-book and physical formats. Many people boast large book collections, and they tend to be a mixed bag of formats, kept in different locations, and possibly lent out or borrowed from others.
Solving the Problem

Keeping track of all of those books can be daunting, so the goal was to design a stylish book organization app that allows people to keep better track of their large book, e-book, and comic collections.
The Research

The following attitudinal findings are pulled from the PCHstudy as well as a report from the Canadian Publishers' Council (CPC), Book Buying Attitudes and Behaviours (conducted in 2004 among only English-speaking Canadian adults).

Nearly half (43%) of Canadians said they enjoy reading “very much,” and a further 39% like to read some of the time (PCH).

85% indicated that “reading is very important to me” (PCH).

82% said they “read for fun” and 72% to “relax/unwind,” higher than the 60% who read to “learn” (CPC).

43% picked “reading books” as an activity they would choose to do if they had more time, virtually tied with the #1 pick, “visiting with friends in a home” (45%) and the #3 pick at 40%, “out of home entertainment” (CPC).

The Competition

There are plenty of book organization apps out in the market right now, but few focus on the books locations, books being borrowed, or consider the use of RFIDs for keeping track of the books.
Personas

Before I could create my app, I needed to consider the people who would use it. This image and the one below are personas created to represent user groups based on previous user research.

Other personas included a freelance Writer and a Professor. Each one has specific needs for the app-the Professor needs the app to keep track of what books he's borrowed from which institutions, as well as whether he has the books at his home office or at work. The Writer, on the other hand, wants to keep track of who owns which books in the apartment she shares with her roommates, and in which format.
Persona 1
Persona 2
The Approach

Once I knew which features were important to the main personas, I created some sketches of the pages on paper as to their appearance.

Since there were some older personas, plus some quirky younger personas, I decided to go with a skeumorphic design, which would make understanding the functions of the app that much easier. (I also felt that it would make my app stand out more, since most newer apps are done with flat design and tend to all look the same)

Once the sketches were done, I needed to consider the order and functionality of each screen, starting with the main screen and working from there. The following images were the Wireframes and UI Interactions planned out for the app.
Designing from the Ground Up

When deciding on the feel and look of the app, I went back to the source- libraries. I wanted users to get the impression of warm wood and leather, natural light, rich tones, and timeless appeal. The mood board is a great way to show clients and potential investors what they should expect in terms of style, colour, typography, and imagery.

Mood Board 
Visual Design

This is typically what people think about when looking at portfolio work, but it is only one step in the User Experience process. The visuals should make sense for the app, add to its functionality, and make each Call to Action obvious to the user.
Visual Design of the My Collection 1st level Bookshelf screen
The search screen was based on the old card cataloging systems that libraries used to organize their collections.  This is especially relevant for the older users in terms of function recognition.
Visual Design of the 'Search' function in the app, based on the old card cataloging system in libraries

(click to view in Invision)

In order to test functionality, I created a prototype using Invision. While it does not contain any of the planned animations, it does allow for movement between the screens of the app, functional buttons, and some swiping capabilities.
What I Learned

User experience and interaction designers continue to look for improvements in their apps, even after sites or apps are launched. When presented with feedback on this project, I already started coming up with fixes and spotted other potential issues that may arise with this app, and am ready to take those issues and work on a newer, better version.
Book App (UX Design Process)
5
279
0
Published:

Book App (UX Design Process)

Step-by-step breakdown of a fictional app creation
5
279
0
Published: