My First App |Gamified Bookshelf

Background

As my 21st birthday is approaching, I considered asking for an e-reader. I liked the convenience of having all of my reading in one place, and the ability to read PDF documents from it as I have trouble reading from a computer screen. However, although it is irrational, I would really miss having a bookshelf.

I am not an avid reader. I read out of necessity, not enjoyment. But I find the slow growth of a bookshelf extremely rewarding, like a trophy shelf on my wall. I also enjoy watching my bookmark shift towards the end of the book, with the portion I have read gaining mass each time.

In a nutshell, to keep myself reading, I have gamified it. And I am afraid I will lose this in my transition to e-readers.

Brief

Create an app that allows its users to display and track their reading progress.

Considerations

  • The feeling of completing a book should be rewarding.
  • Books should be displayed in a rewarding and comprehensive fashion

 

Research

UX Concepts

I have a strong foundation in UX, but it can be handy to refer back to the fundamentals.

  • Always refer to the user’s view
  • Refrain from giving the user too many options or overwhelm them with info- keep it simple
  • Pay Attention to the following key areas (they tend to go without saying):
    • Shape
    • Whitespace
    • Grouping
    • Alignment
    • Attention
    • Colour
  • Experience over functionality.
  • Always test

 

 

Research

Duolingo

Screenshot_20200405_205853_com.duolingo

The Duolingo UI is very minimal. The screen is split into 3 sections. I will call them the header, body and footer.

Duolingo Structure

The header only has one interaction, and it is a scarcely used one. It is instead used to convey information, in this case it is a reminder of the user’s progression. Pressing the flag chooses the language, and opens a scrolling panel.

The body contains each lesson. The lessons have 3 states. The icon is either grey, meaning it is locked, coloured, meaning it is in progress, or gold, meaning it is complete. All lessons are visible from the onset if the user wishes to scroll down to see. This provides the user with a goal.

The lessons are also split into groups depending on the skill level. This in itself acts as a reward system, driving the user to complete each group.

It is also important to note the use of whitespace. The app avoids cognitive friction by keeping the design light and airy. Each icon has enough breathing space, and colour is used sparingly.

The footer contains all the other menu items, such as the user’s profile, leaderboards, etc. The active screen is in colour.

The menus in the footer will have a small red dot next to them when it wants to grab the users attention. This is enough to work, it doesn’t go overboard with blinking or some other animation.

 


Development

Early Prototype

Using Adobe XD, I made a quick prototype to get a feel of how the app may flow before I start any concrete development. Creating a search engine for books is outside the scope of this project but I can just fake it. This is the absolute barebones functionality of this app. Ideally, it would be more game-like and rewarding.

qrf

Brand

Identity

How LogoIdeasdo I want the app to be interpreted by its audience? The app isn’t a professional tool, so it doesn’t need to look slick and sharp, but it also shouldn’t look too childish.

The title must relate to reading. The colour scheme isn’t too important.

I settled on the name ‘Avid’. A software company already has this name but this isn’t a real app so I needn’t worry.

hdrpl

I began to sketch out some quick ideas. I liked the idea of using the bookmark symbol as an emblem. I opened Illustrator and began to develop my idea

 

LogoIdeas

LogoDev

LogoColour

Colour

LogoColourPick

After exploring many different colours. I am torn between orange and olive green. Orange is punchier, and I feel like its more recognisable. However, I think this colour combination is so heavily branded that it looks like my logo is representing a preexisting brand; “Avid” couldn’t own this brand.

The olive green is a bit quieter, but it fits the identity better. Not too slick and professional, not too childish. A little bit fun but also intellectual. I just need to work out the correct combination.

Final2ColourChoice

I narrowed it down to the last two.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s