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.
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.
In Metabook's header redesign, I contributed in:
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.
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?
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:
Characteristics:
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.
Then, I did a research and analysis on progressive web applications on the market to identify common patterns and best practices:
Then, I designed low-fidelity wireframes, based on the decisions we made, and created a prototype:
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.