Legible Media

Making books easy to access from anywhere with just a browser and an internet connection

Industry: Publishing

Client background

Legible is a digital reading and publishing platform that connects authors, readers, and publishers with the goal of making books easy to access from anywhere on the globe with nothing but a browser and an internet connection.

The ask

While Legible aimed at disrupting the publishing market, it needed an experienced software partner to ramp up its initial release efforts, scale the product, and bring the company’s vision to life.

The solution

After identifying Legible’s business objectives, TTT critically reviewed the existing software, developed its reader and publisher web applications, and designed the next phase of the product with a focus on usability and user experience.

The outcome

TTT Studios was able to deliver Legible Media’s software within its tight timeline, improve its overall user experience, and develop the features and functionality that have allowed it to onboard some of the world’s leading publishers.

Our team went above and beyond the call of duty to deliver key features such as payment structure, book rights, publishing laws in different countries, and more; supporting Legible’s mission to grow into a truly global product.

The outcome

TTT Studios’ UX Director designing a rough concept of Legible's web application UX wireframes.

UX Review

We began the project by undertaking a review of Legible’s user experience within its existing but limited software. The goal was to identify opportunities to improve usability, accessibility, and efficiency and to ensure a consistent user experience throughout the product’s ecosystem. The review was based on W3C WCAG (Web Content Accessibility Guidelines) and industry best practices.

At the end of the exercise, we were able to propose a host of design solutions to resolve the UX issues we identified and then undertook a more formal product discovery to fully prioritize and map out a backlog of new features for development.

Legible’s browser page desktop screen mock-ups.

Designer & Developer collaboration

Following the recommendations set out in the UX review, our design team followed our user-centric design process to create wireframes and continually refine the user experience of the software, ensuring that Legible’s product owners were involved throughout the process. Some of the changes we implemented include: updates to Legible’s publisher and read hubs, its onboarding process, payment flows, book uploads, management, and categorization, among many others.

During the project, both our designers and developers worked with Legible’s Atomic Design System, which included specific brand colors, typography, icons, and more. Both teams relied on this system extensively to guide our efforts, solutions, and decision-making with regard to design and frontend development.

Collaborating with both the TTT and Legible in-house design teams, our development team consisting of frontend and backend developers worked closely within the Atomic Design System to ensure that our efforts met each feature’s specific success criteria. The result was software with a beautifully realized user interface that not only adhered to the client’s design criteria but put users at the center of the experience.

Deploying microamps

Legible’s software consists of three separate web apps deployed in three separate instances: one for the admin, one for the reader, and one for the publisher. The following three steps were abstracted and published on their respective private repositories, and installed as dependencies on all three apps:

Supplementing the client’s design system (Atomic Design and Storybook) to create all the low-level UI components.

Abstracting the components that shared functionality across all 3 applications (e.g. gallery views, search, etc)

Abstracting state management-related functionality along with data fetching logic, which used the useReducer, useContext, and useEffect hooks, by defining them as custom hooks that use the aforementioned React APIs.

By following this approach, our team and Legible’s team were able to work concurrently on disparate parts of the three different applications while minimizing redundancy.

It’s important to note that this approach did have a drawback: the changes on a specific abstraction (e.g. design system) needed to be published to npm (a package manager for JavaScript projects) so that the new changes can reflect on all the applications.

Our team was able to overcome this obstacle, however, as we refactored everything to work with a monorepo approach consisting of multiple child repositories (three for the above abstractions and three for the applications). This removed the need to wait for a change to be published to npm.

Focused web developer coding on computer monitors.

Developing the features

When Legible first reached out to TTT Studios, it had a small development team and was staring down a timeline to produce an initial launch of its product. While its existing frontend and backend architecture showed signs of promise and extensibility, the current solution had no functional predictability.

Our development team redefined the existing architecture by supporting the creation of an entire CI/CD pipeline for the reader, publisher, and backend microservices of the platform and then combined different workspaces to create a monorepo architecture.

Frontend

Our team made improvements to the authentication and authorization of the reader-user by using Azure Active Directory to ensure that these processes could continue to function within the existing logic and dev flow. Our team also adapted Legible’s Atomic Design Paradigm and Storybook to build out the UX code and the UI design systems. ADP along with monorepo architecture helped our team to better segregate the micro-apps for reader, publisher, and admin without compromising on the development speed. Features such as top navigation, browsing capability, library of books, stripe payments, and more were developed.

Backend

Our team employed a serverless approach to implement the Azure Cosmos DB for information storage. Once Legible onboarded publishers, the key ask was to automate the process of importing the books to their platform. This feature was successfully executed with ONIX 3.1 integration, an XML-based standard commonly used in the publishing industry that allows ebook publishers to create and manage rich metadata about their products. Defining and implementing this integration replaced Legible’s existing standard of manually importing one book at a time and gave publishers the ability to onboard thousands of books at the same time. This was a critical feature that gave Legible the ability to bring in more publishers and scale the product.

QA testing

In terms of QA testing, our team used a mobile-first testing approach in which the solution developed for desktop was tested on a mobile device to allow increased accessibility for Legible’s customers. TTT Studios successfully met the goals of the company and created a strong stepping stone for Legible’s future.