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.
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.
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.
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.
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.
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.
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.
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.