NOVEMBER-DECEMBER 2020

BIBLIO-FILE

A Book Tracking Application: A Bibliophile’s Abode.

Track your reads, organize your books and learn something new everyday.

Market Research & Demographics

Competitive Analysis

While the market trends were promising, what piqued my interest was how the competitors were using the latest technology to shape useful experiences for the bibliophiles and other users. For inspiration, I delved into several direct and indirect competitors to study and analyze their performance; to also acknowledge the response of the users towards the features these competitors were offering.

Provisional Personas

Learning about the demographics enabled me to streamline provisional personas. They gave an overarching representation of the audience that posed as the prospective user of my product. I went an extra mile to read some reviews on competitors’ applications; to understand what problems are the users facing around their product, and what is delightful for them. The provisional personas suggested the users that could be interviewed for empathy.

Interviewing for Empathy

No product is ever successful without accounting for the needs, goals, motivations and pain points of the people who are meant to use it. Keeping that in mind I chose to conduct one on one interviews with people who are avid readers, to note their habits and behavior around reading, and the products they use to enhance their reading experiences. I carefully worded open ended questions for 8 interviewees; an attempt to mainly provoke them to share more stories so I could gather substantial, qualitative data.

It was truly a wonderful experience to see the interviewees gleam as they shared stories about their reading activities. They happily shared with me what excites them, what disappoints them, and what motivates them. I synthesized all these observations in the form of an Empathy Map and started seeing patterns as I worked my way through them.

I culled some insights from these noticeable patterns and worded them into needs. What was discreet and subtle in the interviewees’ frustrations, wants, pleasures; I acknowledged it as what they need.

User Persona

All the observations that I gathered by interviewing the participants opened my eyes and viewpoint to various user motivations, goals, needs and frustrations. Due to the commonalities within all those facets I created a user persona that acted as a singular representation of the prospective user. It was also to serve as a “someone” whom I could empathize with throughout my design thinking process and humanize my design decisions - meet Rebecca.

Brainstorming

BUSINESS & USER GOALS

It is crucial to create a model which ensures parity when it comes to working for the business goals as well as the user goals. As a product designer, I aimed to acknowledge and work for each party’s welfare, thus finding common goals.

PRODUCT ROADMAP

All the ideas that I explored in my brainstorming session, I further theorized them in the light of the common goals between the business and the user, and the needs of the latter. I laid out a roadmap that exhibited these ideas (later to be features) based on their goal acquisition and the effort required to execute these ideas. Furthermore, these features were also laid out in the sequence of which particular one is a comprehensive solution to the problem at hand.

Application Map

To imitate a library in an application; it was intimidating in the beginning, but based on my user needs I prioritized my content to not inundate the user with a lot of information. The existing design patterns as seen on the competitors’ applications, in combination with the features that were brainstormed, based on the user needs made for a robust plan for the content that I laid out in a bird’s eye view format.

Task Flow & User Flow

A straightforward application map seemed promising, thus I planned out a linear task flow and a user flow to analyze how may a user perform a task from point A to B. For that purpose I set out two tasks to test based on the what the user would like to achieve from the product. These tasks were :

1. Rebecca wants to read what the leaders/influencers of today are reading. Upon finding something interesting she wants to follow them on the app to keep in touch with their activities and wants to add the book into her “To be Read” list.

2. Rebecca just put down a book and wants to reflect about how she feels.

In the Task Flow I displayed the screens that the user will have to go through to complete each task, and also highlighted the actions they will take.

Following the Task Flow I mapped out a User Flow to bear in mind the decision points of the user and envision the trajectories accordingly.

Low-fidelity Sketches

At this point I had a rough idea in my mind how I want my screens to look like. I recorded all the detailed requirements of each mandatory screen in my product requirements document which gave me an exhaustive idea of all the components that will come to play. To play around with these components and to keep the screen inline with the design pattern, I sketched out low-fidelity wireframes of each screen.

Mid-fidelity Wireframes

The mid-fidelity wireframes were mainly to transition into a prototype for testing; at this point however, I was also contemplating on the visual elements, and the UI section of the design - what typography to go for, if any placement of the elements need to be altered, in contrast to the low-fidelity sketches.

Prototyping

With the mid-fidelity wireframes all set up, I was ready to test the design of my minimum viable product; and comb through some of my assumptions. I added basic interactions to my wireframes on Invision, based on the tasks I wanted the users to complete.

Usability Testing

I tested my prototype for usability with 8 participants. I relied on Evaluative Research so I stressed the participants to think out aloud. The testing resulted in a lot of productive revelations which led me to improve the user experience. For a better synthesis, I created an Affinity Map to draw out patterns and later recommendations from insights.

• The users have a mental model according to which they perform; therefore, they are accustomed to the existing design patterns of the existing applications in the market. This led me to alter my UI according to the set standards.
  
  My initial thought process was to make the profile page of the influencers similar to the existing social applications, however, there were two perspectives towards that approach. While some participants appreciated how they are familiar to the design patter, some said that they confused it with an Instagram profile page. To find a middle ground and to make my design cohesive, I made slight changes as shown below:

• Based on the mental model, users are also accustomed to the type fields that are present in the universal design system.
  
  Initially to add a reflection I created a type field below the already posted reflection posts. The type field resembled a comments type field which confused the user at the first glance. For clarification I dedicated a new screen for all the reflections.

• Few changes were made in the copywriting specifically for the CTA buttons to add the books in the library. I also changed the arrangement of the button for a stronger visual heirarchy.

Logo Design & Brand Style Guide

I wanted to keep the theme of my design strictly related to what the books entail. They embody intellect, wisdom, knowledge, and sophistication. In addition to that, I wanted to keep my design current, minimal and modern. Following these attributes I gathered references for colors, typography and logo.

COLORS: I was heavily inspired by the colors of the traditional book covers and pages, but I also wanted to respect the brand attributes. Luckily, the hues of deep blues and greens symbolize wisdom and knowledge, therefore I was able to create a theme that resonated well with the main target group.

TYPOGRAPHY: To keep the typography inline with the idea to keep the product minimal and sophisticated, I chose a sans serif font with combination with a serif font to provoke a sense of a book text in the design.

LOGO DESIGN: I wanted the logo to emulate a modern look and also carry the essence of wisdom. Owl is often considered the symbol of wisdom and intellect, therefore I included it in the logo. I also incorporated the bookmark which at the first glance looks like the tail of the owl. To mimic the modern look I chose a linear, sans serif font.

IMAGERY: I feared that the plethora of book displays, and the colors of the book covers will come off as gaudy at some point and eventually clash with my idea to pursue a minimal approach. However, I believe I overcame it by placing the images of the books in a placeholder. The placeholder has tones that belong to the cover art of the book. This helped create variance in the composition. In addition to that, I treated the images slightly by lowering their saturation levels.

Final Prototype