hero-bg

Digital rebirth of Bookclub24 multigenerational book paradise

2022
INDUSTRY: Consumer Products & Services, SAAS, eCommerce

Project info

About the client

Bookclub24 is a platform dedicated to book lovers and collectors from around the globe, with a strong focus on German, Austrian, and Swiss audiences. It offers a unique service for users to register and manage their collection of books in a digitized format that can be shared with others. The platform is dedicated to preserving the knowledge contained in books and making it accessible to buy or exchange for everyone. Through Bookclub24, it’s easy to showcase book collections, connect with like-minded people, and inspire other literature fans to do the same.

Services we provided:

Front-end development Web design Branding Back-end development

TIME FRAME:

ONGOING

Book industry

The global book industry has experienced steady growth in recent years, with a market size of approximately $138.35 billion in 2021. The industry is expected to continue growing at a CAGR of 1.9% from 2022 to 2030, which is attributed to the increasing popularity of e-books and audiobooks.

$138.35B

Market size in 2021

1.9%

Projected growth in 2022–2030

bookclub24

Client’s results

Bookclub24 undoubtedly contributes to the growth of the book industry, providing readers and collectors with editions of numerous rare books. By offering library management, social networking features, and some extra bonuses (such as sharing private libraries with friends or visiting exciting literature-related events), the portal has conquered the German, Austrian, and Swiss book markets.

10,000

Successfully registered books

#1

German-based online library

bookclub24
bookclub24

Client’s major challenges

  • Slow loading speeds, which negatively impacted the user experience and the website’s SERP ranking.

  • Hard payment process — sometimes, users left the book ordering halfway because it took too much effort and time.

  • Focusing only on the desktop version, which was a vital issue, as smartphones provide for 60.67% of all website traffic.

  • Somewhat disorganized main page, which led to long load times, affecting the website’s performance.

  • Inconsistent design system that caused a lack of scalability and other critical design problems.

  • Conflict between design style and branding concept — users felt slightly confused about this disharmony.

  • Lack of diverse functionality that would help users conveniently interact with the platform and other book fans.

  • The specific nature of word length in the German language made it difficult to maintain proper content structure.

bookclub24

Our course of remedy

  • Optimized page loading speed through innovative development tools and technologies.

  • Integration with the Stripe payment system that offers extensive features for users and crystal-clear documentation for the client.

  • Intuitive and seamless adaptive versions for all devices, with a focus on optimizing the mobile website experience.

  • Smartly divided various flows and functions to avoid page saturation, making the platform accessible and user-friendly.

  • Updated and consistent design system that considers all current requirements, being ready to meet upcoming challenges.

  • Cohesive style that aligns with the friendly brand image and innovative mood of the Bookclub24 multigenerational portal.

  • Well-crafted functionality that expands user capabilities, saving lots of energy and time for both our client and their audience.

  • Appropriate organization of the website’s content structure with preserved linguistic peculiarities of the German language.

bookclub24

Project strategy

Workflow scenario

Together with the client, our experts went through thick and thin, spending hours brainstorming, discussing plans, and completing tasks. To bring all generated ideas to life and ensure that our team works straight toward the common goal, we created a comprehensive and specific scenario of the Bookclub24 workflow process.After accepting the task from the client, we:

1. Provided a rough estimate.

2. Conducted design research.

3. Created concepts.

4. Got these concepts approved.

5. Translated content into German.

6. Got the design approved.

7. Handed it over to development.

8. Brought all design ideas to life.

9. Tested the completed work.

10. Released to production.

11. Conducted production testing.

12. Celebrated successful results!

bookclub24

Starting line

Competitive analysis

Having planned the work process, we conducted a thorough analysis of similar websites, carefully examining their strengths and weaknesses. As most of the other players in this field lacked consistency and modernity in the chosen style, we decided to create a strict design system with a clearly defined color palette, vivid accents, and exclusive brand fonts. Besides, our experts implemented some of the competitors’ features the client found captivating, such as CTA elements and text hints that help users navigate.

Given the go-ahead from the client, we invested in strategic packaging and branding to create a distinctive image and message that would resonate with book lovers. While competitors didn’t want to exceed the boundaries of the “classical” way of website crafting, not paying enough attention to the brand’s mood and concept, our team placed a bet exactly on the meaningful part of the project. That’s why we put so much effort into the preparation of the design and development process, focusing on the customers’ needs and desires.

bookclub24
bookclub24

Target audience

User persona

To identify the needs, goals, and behaviors of the target audience, our team “painted” a literal portrait of the platform’s archetypical user. Without any doubt, the “typical” Bookclub24 user is someone who enjoys reading and learning on the platform that offers a wide range of modern books and rare vintage editions. These users are highly interested in exploring new genres and topics, wishing to conveniently communicate with others to discuss favorite characters and stylistic devices of various books. As their average age is 40+, some of these users may not be too familiar with modern technologies, so they need a super intuitive bookish platform.

bookclub24

Front end

The client’s side of the website

The first step of turning concepts into reality was the front end — the magic that happens on the screen when you click, tap, or scroll. At this stage, we executed all our ideas related to the interface that the end-user interacts with. Keeping this user-centricity in mind, our team gave life to each and every visual element, creating a fully functional product through innovative tools, mainly the “duet” of React.js and Next.js.

React.js + Next.js

After analyzing the unique needs and objectives of our client, we settled on Next.js, a framework built on top of React.js, as the best solution for the project. With such a balanced combination, our team took advantage of some great features of these tools, like automatic code splitting, optimized performance, user-friendly client-side navigation, and server rendering. As one of the main challenges of this case was SEO improvement and a high ranking score, server rendering was especially indispensable in this case — Google search bots could quickly and effortlessly process the code our developers generated.

bookclub24

React Testing Library

To ensure that each component of our project worked as expected, we utilized the React Testing Library. This powerful tool provides a user-centric testing approach that allows us to write tests that simulate real user behavior. By using the Testing Library, we were able to ensure that our components were highly functional and optimized for maximum efficiency and performance.

bookclub24

Stripe

Another crucial advantage of React.js + Next.js is server-side functions that allow writing back-end logic straight in this framework, vitally reducing the cost of the development process. We used such functions to integrate with the Stripe payment system, which our team chose for the extensive feature set and easy-to-understand documentation. By using this tool, we helped the client process payments with ease and significantly increase the company’s income.

bookclub24
bookclub24
bookclub24
bookclub24

Back-end

Behind the scenes of server-side development

Being aware of the back-end’s importance, in this development phase, we also used cutting-edge technologies to provide Bookclub24 with indispensable perks such as proper speed, security, and scalability. On that account, our back-end tech stack mainly consisted of the tools we have vast experience working with: Strapi, PostgreSQL, Node.js, and Microsoft Azure.

bookclub24

Strapi CMS + PostgreSQL

Our team wanted to deliver a top-tier product, and that’s why we utilized Strapi CMS with PostgreSQL, which is a popular and useful open-source database management system. With this powerful combination, our developers had complete control over content types, custom fields, and relationships. The Strapi GraphQL API enabled effortless data querying, and the integration with PostgreSQL ensured secure and efficient data storage.

bookclub24

Node.js

Node.js was the best choice for our project for several reasons. First, it allowed for fast and scalable development with its event-driven architecture and non-blocking I/O operations. Second, it has a vast ecosystem of modules and libraries that are easily integrated into the project, reducing development time and effort. Lastly, it is a highly popular technology, with an abundance of resources and support available, making it easier for our team to troubleshoot any issues that may have arisen.

bookclub24

Microsoft Azure

Focusing on the flexible and effective solutions for this case, we chose one of the most popular cloud platforms, Microsoft Azure. Not only is it one of the largest and most stable providers of data storage, but it also met all of our privacy and security policies, which was essential for the project’s sensitive information. As a result, with Microsoft Azure, we had the necessary resources to scale the project through reliable data protection.

bookclub24
bookclub24
bookclub24
bookclub24
bookclub24

Company image

Branding ideas

To convey a friendly and user-centric mood of the Bookclub24 bookish platform, we chose branding & design solutions that emphasized important site components. From the very beginning, it was decided that the logo sign should look like a red 3D book to help users feel the atmosphere of a library, associating this symbol not just with the site but with the entire brand. To prioritize simplicity, functionality, and a touch of warmth, we experimented with different styles, deciding to move forward with a Scandinavian one as it mixes calm and minimalistic inserts with bright accents and explicit visual hierarchy.

bookclub24

Aesthetic UI / UX

Design solutions

The Scandinavian style works great for this project as we could mix its calm and aesthetic mood with vivid impressive accents to engage a broad audience. In addition, our team considered the specific needs of some customers, who might need bigger text and objects along with a clear visual hierarchy. So, we designed lots of elements with hints, text labels, and customized icons to make it easy for all users to navigate through the site. Besides, our designers divided up all the different operations on the platform into separate flows and functions, so the main page was more organized and structured.

bookclub24

User flow

Website’s roadmap

To help users achieve their specific goals on the website — be it ordering a long-desired book or asking other bookworms for their classy private collection — we mapped out the user flow. As Bookclub24’s audience is pretty wide, our team invested a great deal of time and energy in truly grasping the unique needs and aspirations of the various user groups. Armed with this knowledge, we crafted a user flow that intuitionally guides users through their journey, highlighting the most crucial site elements.

bookclub24
bookclub24

Creative principles

Design system

Keeping in mind the need to create a clean and cohesive design for the Bookclub24’s portal, we defined the main website fonts, Helvetica and Merriweather. The first one is, undoubtedly, at the top of our favorite fonts because of its accessibility, versatility, and clean, simple lines. While the second font, which is inspired by traditional old-style serif typefaces, is quite elegant and perfectly harmonizes with minimalistic Helvetica, adding even more charm.
As the main color palette, we chose Baltic Sea, ArtyClick Warm Red, Lightning Yellow, and Milk White colors. Baltic Sea is a deep blue-green shade that evokes feelings of calmness and serenity, while ArtyClick Warm Red is a vibrant red that is attention-grabbing and energizing. Lightning Yellow is a vivid and sunny yellow that adds a pop of color and brings a sense of warmth and optimism to the design. Finally, Milk White is a clean and crisp white that reminds of clarity and simplicity. Together, these colors can create a balanced and eye-catching design that looks friendly, classy, and modern at the same time.

bookclub24

Execution process

From concept to reality

Our experts made sure to keep the client informed about the progress of the Bookclub24 project by providing three updates per week, which included one team call and two written updates. Additionally, we conducted regular development reviews to ensure that the design and layout closely resembled the approved mockup, being in line with the client’s requirements.

Even though this process was not always easy and fast, our team went the extra mile and completed thousands of tasks, resulting in a fast, user-friendly, and absorbing product. Through our efforts and the use of Agile methodology, focused on collaboration and adaptability, we delivered the website with optimal functionality and ease of use for all passionate book fans.

bookclub24

Outcome

Towards success and beyond

Our team left no stone unturned for this project and provided the Bookclub24 portal with full-stack development, visually stunning design, and remarkable branding solutions. We improved the platform’s usability by dividing flows and functions, implementing a consistent design system, and enhancing the overall site’s efficiency through innovative technologies, such as React.js, Next.js, Node.js, Strapi, PostgreSQL, and Stripe payment system.

The client was impressed with the Halo Lab’s work and offered to extend our business relationship beyond the initial scope of the project. Working hand in hand to drive Bookclub24’s continued growth and success, our team is honored to play a pivotal role in the platform’s progress, and we can’t wait to reach even more milestones together.

bookclub24
bookclub24
bookclub24

Have a similar project or idea? Let's discuss the details.

contact us

Ready to discuss
your project with us?

Thank you for your submission!
We’ll contact you as soon
as possible.

Our clients say

“Halo Lab delivered a unique and original design that makes my company stand out from the competition — they didn’t provide a template-based design or something trendy. Their development is world-class and perfection itself.”

Ronan Casey

Founder at Baamboozle