Bookshelf

The core of Izzi Digital. A digital library that had to stay simple for teachers while managing real complexity underneath.

ROLE: Product Design Lead
COMPANY: Izzi Digital
TIMELINE: 2022 - 2024
PLATFORMS: Web, Mobile, Desktop

01 Context

The product everything else hangs off

Bookshelf was the first thing I worked on at Izzi Digital, and the centre of the whole suite. On the surface it is a vertically scrolling library of learning materials: PDF books, interactive books, and games, with the occasional group for serial content. It is also the home base of the product. Teacher's Corner, the Flipbook reader, the games, the native apps, every tool Izzi offers sits one click away in the main navigation.

The brief was deceptively plain. Keep the front door simple enough for a teacher or a child to use without thinking, while the structures behind it carried far more weight than the interface let on.

A hand holding a laptop showing the Bookshelf library interface

02 Problem

One product, three jobs that pull in different directions

Bookshelf is not one thing. It is a simple library for a child, a deep management tool for a teacher, and the hub that connects every other feature in the suite. Each of those wants a different interface. The work was making them coexist on the same product without any one of them ruining the others. Three tensions ran underneath every screen.

A library a child can use without thinking
The front door has to be effortless. A student should open the shelf, see their materials, and start reading or playing without instruction. That simplicity is not the absence of complexity, it is complexity kept out of sight. Everything heavier had to live somewhere a child would never have to look.
A management tool deep enough for a teacher
Teachers need real control: organising materials by subject, nesting them into units and folders, linking them to the right publications, and deciding what is published or locked. That depth is the opposite of the child’s simple shelf, and it had to sit on the same product without bleeding into the reading experience or overwhelming the people who just wanted to read.
A hub that holds the whole suite together
Bookshelf is also the connective tissue. From it a user reaches Teacher’s Corner, the Flipbook reader, the games, the native apps, and everything else Izzi offers. It had to be a believable home base for all of them while still working as a product in its own right, not just a launcher with nothing behind it.

03 Work

The shelf, the tools behind it, and the things it connects to

Bookshelf is one product wearing several hats. The work spanned the library itself, the management tools built on top of it, the games it launches, and the native apps that carry it offline. Five areas covered most of it.

01 The Library

The shelf at the centre of the product

The core of Bookshelf is a vertically scrolling library of learning materials: PDF books, interactive books, and games, grouped into series where it makes sense. It is the landing point and the direct route into the learning content itself. It is also simple by design, because it is the first thing a teacher or a child sees. The job here was to keep browsing effortless and the materials easy to reach, so the shelf earned its place as the home base of the suite rather than just a list.

02 Teacher's Corner

A management tool for teachers, built from scratch

The feature I spent the most time on, designed new rather than inherited. Teacher's Corner gives teachers a place to organise everything they need for class, structured by subject, with materials linked directly to the relevant Izzi publication. Underneath sit units, nested folders, and individual materials, each with publish, lock, and permission states. Teachers and students see a clean reading view. Superadmins see a full management surface. The same screens, doing two very different jobs.

03 Creating and Managing

The forms and flows that operate all that structure

Behind Teacher's Corner is the machinery that fills it. Multi-step flows for adding units and materials handle titles, thumbnails, publication relations, keywords, grade and subject assignment, and nesting, with units and folders creatable inline so an admin never breaks their flow. Edit and delete flows mirror them, with reorder, rename, and bulk selection on top. Destructive actions spell out their full blast radius before confirming, down to the exact count of folders and materials a delete will take with it.

04 Shell Apps

The player that runs the interactive games

Bookshelf launches dozens of interactive e-learning games through a dedicated player. I polished the game slider that runs them, the component that streams challenges, controls, and progress in one consistent frame, across both Bookshelf and Playground. Alongside the player I designed a number of the games themselves, working from existing shell games or an instructional brief.

05 Native Apps

Bookshelf as a dedicated mobile and desktop app

Beyond the browser, Bookshelf ships as dedicated mobile and desktop applications. The same library and the same materials, adapted to each platform's conventions so the experience holds up whether a teacher is on a laptop in class or a student is on a phone at home.

04 Decisions

Two calls about where complexity should live

Most of Bookshelf was steady work. These two shaped how the simple-surface, complex-underneath balance actually landed.

The Call

Collapse materials behind folders instead of showing everything at once

A populated unit can hold dozens of materials across several folders. Showing it all flat would be honest to the data and exhausting to use. Collapsing it hides content a teacher might be looking for. Neither default was obviously right.

What I chose

Folders collapse by default and act as a clutter-reducing layer, not just storage. A teacher opens only the folder they need. Counters on each folder show what is inside before it is opened, so nothing feels hidden, just tidied.

Trade-off

A teacher hunting across folders does more clicking than a flat list would need. Worth it, because the flat version made even a small unit feel overwhelming, and most teachers return to the same few folders anyway.

The Call

Show the full consequences of a destructive action, even when it makes the screen heavier

Deleting a folder collection can ungroup folders. Deleting a unit can wipe out scores of nested materials. The light version is a simple confirm dialog. The heavier version lists everything that goes with it. More friction, more screen, more reassurance.

What I chose

Spell it out. Delete dialogs surface the exact count of affected folders and materials, with the items listed. For an admin managing content other people depend on, the extra friction is the point. A wrong click should be hard, not easy.

Trade-off

Heavier dialogs and an extra beat of reading before every serious delete. Acceptable, because the cost of a silent mistake on shared classroom content is far higher than the cost of one more glance.

05 Outcome

What shipped, and what I would revisit

Bookshelf shipped as the working hub of Izzi Digital across web, mobile, and desktop. A simple scrolling library on the surface, with Teacher's Corner built from scratch on top of it, a full set of creation and management flows behind that, a game player running dozens of interactive lessons, and dedicated native apps carrying it all beyond the browser. The child's reading view stayed simple while teachers got real depth, and every screen folded into the shared design system.

If I were doing it again, the Flipbook reader is the piece I would not leave behind. The Bookshelf version kept its dated interface the whole time I was there, always lower priority than the next structural problem. It worked, but it never matched the quality of the rest of the suite. The redesign that proved what it could be happened later, on Playground.

3: platformsWeb, mobile, and desktop, with dedicated native apps alongside the browser.
1: tool built from scratchTeacher’s Corner, designed new rather than inherited, structure and forms included.
3: audiences, one productA child’s library, a teacher’s management tool, and a hub for the whole suite.
2: products, one game playerThe game slider runs interactive lessons across both Bookshelf and Playground.

Let's Work Together

Whether you need a design partner, want to collaborate, or just want to say hi, I'd love to connect!

LinkedIn Dribbble Contra