Back to projects

Header Redesign

Metabook

Overview

Metabook is a platform for selling and buying read, old and new books, among users. The idea was born from two book lovers who didn't want to see books dusted in bookcases, but read over and over again. In Metabook, users can find rare and exhausted books, but also new ones at a better price than the market. Users today (December 2021) are over 76k book lovers looking for hundreds of cheap used books, from literature and fairy tales to textbooks and history books.

About the project

Metabook was created in 2017 and since then, it has evolved in a great extent. This project is about the redesign of the website's header in all viewports, in order to meet the new needs.

On Metabook's header redesign, I worked along with the company's designer, Julie Bakopoulou and the co-founder Giannos Katsirintakis.

My role:

In Metabook's header redesign, I contributed in:

  • Information Architecture
  • Interaction design

Challenges

Many users are asking for a mobile application of Metabook. This would require a lot of effort and resources and can't be done at this time. As an alternative, we will gradually transform the mobile version of Metabook into a progressive web app. In that way, we will design a better experience for mobile users and suit their needs.

Requirements

  • Sales are proportional to the numbers of the books. The more books users list, the more books are sold. So, the "I want to sell button" is of highly importance and we want it always visible. We want to prompt the users to list their books.
  • Reserve fixed space at the bottom of the screen for elements like cart

Research

As the main goal of the project was to redesign the header in the mobile views, to get to a more application-like experience, we followed a mobile first approach. As a first step, I did a research on Progressive Web Applications: What is a PWA, which are the characteristics of a PWA, how are we going to do this and most important of all: is it the right solution for Metabook?

Further analysis

Progressive web app is built and lives on the Web, but has native app capabilities. Think of it as a website built using web technologies but that acts and feels like an app.

Pros:

  • Native app capabilities (push notifications, standalone mode etc)
  • You can install a PWA in your device

Characteristics:

  • Progressive: work on any device
  • Discoverable: discoverable in search engines
  • Linkable
  • Responsive
  • App-like: should look like an app
  • Connectivity independent: should be able to work offline
  • Re-engageable
  • Installable
  • Safe

PWA vs Native apps

A study has shown that, on average, an app loses 20% of its users for every step between the user’s first contact with the app and the user starting to use the app.

When a user finds your progressive web app, they will be able to immediately start using it, eliminating the unnecessary downloading and installation stages.

They cost nearly 10 times less than a mobile app.

Why PWA for Metabook?

  • Very high percentage of mobile users (54.45%)
  • Users have asked for a native app
  • It's the easiest we can do now
  • Users return frequently to the app
  • Improve user experience

How?

  • Identify the users and their most important user actions
  • There is no compromise in the UX with a PWA compared to a traditional website
  • Facilitate navigation

Then, I did a research and analysis on progressive web applications on the market to identify common patterns and best practices:

Design exploration

Fig.1 Brainstorming

Then, I designed low-fidelity wireframes, based on the decisions we made, and created a prototype:

Fig.2 For the tablet version, we kept the same experience as the mobile.
Fig.3 Wireframe for desktop version

Conclusion

When we started working on the header redesign, the requirement was to transform Metabook into a progressive web app. Very soon, we realised that we had to split this large project into smaller steps. Redesigning the header is the first step that will lead to bigger changes.