The Bookmart

The Bookmart

Project Type: Solo Project


Timeline: 2 weeks

Role: UX researcher, UX Designer, UI Designer

Tools: Notion, Figma


The Bookmart is one of the few bookstores in Bahrain and one of the longest running, serving different age groups and providing a wide variety of books. However, the one thing that they really needed was a website to serve the customers that could not and did not visit their shop. Thus, business needs were identified to solve the continuous issue.

Research Methods

  • Comparative Analysis where an analysis of indirect competitors' features to understand the global market and assess potential design changes was conducted.

  • Two types of competitive analyses were used.

    1. Task analysis which involved comparing the task of buying a book and the different steps it requires to complete the task on the existing website, in order to identify ways to eliminate steps or make the process easier.

    2. Feature inventory testing involved identifying the features and tasks that are available in existing direct competitor websites, in order to identify potential features for the new design.


Research Results and Synthesis

Using the competitive and comparative analyses, problem statements and solution statements were synthesized in regards to the existing user needs and business needs that were provided.

Problem statement synthesis were two:

1. The user “the gifter” needs a way to easily find the products need because she grows overwhelmed by large number of products and product choices
2. The user “the prestige” needs a book website with an easy checkout process because he doesn’t want to waste time clicking through payment pages.

Solution statement was brought together based on the possible features identified throughout the competitive and comparative analysis:

1. We believe that a customized/algorithmic homepage, that highlights the bestsellers for the user's, will facilitate the decision-making process in order to alleviate some of the tension they feel.
2. We believe that building a website that has an “instant purchase” option with payment that requires a simple click will quicken the checkout process to avoid wasting the user's time.

Based on the products provided, an open card sorting exercise was conducted to understand user perspective on which books should be under which category.


The categories were identified to be:

  1. Fiction

  2. Non-fiction

  3. Children’s Fiction

  4. Cooking

  5. Travel

  6. Stationary


This aided in creating a site map which was as follows:

  1. Fiction

    1. Fantasy

    2. Mystery and Thriller

    3. Historical Fiction

  2. Non-fiction

    1. Biography

    2. History

  3. Children’s Fiction

  4. Cooking

  5. Travel

  6. Stationary

    1. Calendars

    2. Notebooks and papers

    3. Pens, pencils and colours

    4. Reading lights

  7. Account

  8. About us


Identification of all the above aided in creating a User Flow:

  1. Task 1: Order a book

  1. Task 2: Instantly buy a book

Based on the user flows, a grayscale prototype was designed with user needs and business needs in mind.

Grayscale Wireframes

Usability Test Results

Problem 1:

No "added to cart" confirmation

No "added to cart" confirmation

There was no confirmation of whether the item was added to cart or not, it just takes them to “recommended books” at the bottom of the page to continue shopping.

Solution 1:
A pop-up message was created to confirm an item was added to cart.

Problem 2:

Confusing Payment Page

The payment page is oddly arranged where the user chooses the payment type after they add their info + they can “save payment information” but it’s under the button instead of above.

Solution 2:

Problem 3:

Empty Footer

Solution 3:



Visual Design Decisions:

There were no clear brand guidelines which provided the freedom to choose what to utilize in terms of brand fonts and colors.
Font is basic, timeless, readable
Colours: Purple-ish blue was chosen as a primary colour because it is not too far off from the logo's colour . It also represents imagination, being wise, creation, course which related to the quote "A reader lives a thousand lives before he dies."
Green, as a secondary colour, represents nature, peace, prosperity, growth which was related to how a person feels or grows with reading.
Yellow, being the tertiary colour, denotes courage, prosperity, hope and happiness which can all be results of reading

Final Solution

© Framer Inc. 2023