top of page

eBook World

Responsive UX/UI Conceptual Project

eBook World is a responsive digital public library platform that allows users to browse, discover, and preview books across devices. The experience supports a wide audience—from casual readers to frequent library users—while maintaining readability, accessibility, and performance.

This project showcases my end-to-end UX/UI process, including wire framing, visual design, iteration, heuristic evaluation, accessibility validation, component systems, analytics thinking, and prototyping.

Project Overview

Role: UX/UI Designer
Tools: Figma, Stark, Miro, Attention Insight
Platforms: Desktop & Mobile (iOS)

Problem Statement

Many digital library platforms struggle with:

  • Overcrowded layouts and weak visual hierarchy

  • Poor discoverability of content

  • Inconsistent desktop and mobile experiences

  • Limited accessibility considerations

The challenge was to design a modern, intuitive eBook browsing experience that feels clear and readable across devices without overwhelming users.

​

Goals & Success Criteria

  • Enable fast, intuitive book discovery

  • Maintain consistency across desktop and mobile

  • Apply usability heuristics and accessibility standards

  • Build a scalable UI system with reusable components

  • Validate design decisions through iteration and metrics

User Persona Insights

Opportunities for Design

  • Strong visual hierarchy

  • Clear CTAs and social proof

  • Consistent responsive layouts

User Flow

Browse → Filter/Search → Select Book → Review Details → Read or Save

Phase 1: Wireframing & Structure

I began with low-to-mid fidelity wireframes to establish layout, hierarchy, and content structure without visual distraction.

​

Focus Areas

  • Scannable book card layouts

  • Clear separation of content sections

  • Persistent navigation patterns
     

Screens

  • Home (Book List)

  • Book Detail
    (Desktop-first to define structure)

Phase 2: Early Iteration (Usability Review)

A heuristic-based review surfaced early usability issues.

​

Issues Identified

  • Too many competing sections

  • Search and filters lacked prominence

  • CTAs blended into surrounding content
     

Iteration Changes

  • Reduced visual weight of secondary sections

  • Elevated search placement and contrast

  • Strengthened primary CTA styling
     

Outcome: Faster scanning and improved orientation.

Phase 3: Visual Design & Brand System

Color Theory & Branding 

The color system was designed to support focus, clarity, and action in a reading-heavy experience.

​

Primary Color

  • Indigo #4338CA

  • Used for navigation, headers, and active states

  • Feels calm, trustworthy, and focused

  • Maintains strong contrast on light backgrounds

​

Secondary / CTA Color

  • Warm Amber #C97A1D

  • Used for CTAs and highlights

  • Draws attention without feeling aggressive

  • Clearly signals action and interaction

​

Neutrals

  • Restrained gray palette for text and backgrounds

  • Reduces eye strain and visual noise

​

Accessibility

WCAG AA contrast compliance

Phase 4: High-Fidelity Design & Iteration

​Based on User Persona: Emily Thompson

  • Simplify onboarding with clear entry points

  • Make key tools like Budget Planner and Saved Trips easy to find

  • Offer personalized recommendations based on profile and past behavior

  • Allow non-linear navigation between inspiration, planning, and trip tools

Home Page Iteration
Problem:

  • Hero and book rows competed for attention

Solution:

  • Simplified hero to a single featured book

  • Reduced secondary visual noise

  • Added spacing and dividers to reinforce hierarchy
     

Book Detail Page Iteration
Problem:

  • Metadata pushed reviews and CTAs below the fold.

Solution:

  • Grouped metadata into a compact block

  • Prioritized description and social proof

  • Increased CTA contrast and spacing

Heuristic Evaluation

Designs were evaluated against Nielsen’s usability heuristics.

Key Improvements

  • Added hover, pressed, and focus states

  • Used familiar language and iconography

  • Standardized navigation and components

  • Reduced cognitive load through whitespace

Accessibility Evaluation

  • WCAG AA color contrast

  • Minimum 16px body text

  • 48px minimum touch targets

  • Clear heading hierarchy

  • Logical reading order

Component System & Interactions

A scalable UI component library was built using Auto Layout and variants.

​

Core Components

  • Book Cards (Large / Small, Hover states)

  • Buttons (Primary, Secondary, Text with all states)

  • Input Fields (Search, Focused, Filled)

  • Navigation (Desktop & Mobile)

  • Icon system with interaction states
     

Micro-Interactions

  • Hover feedback

  • Slide-in mobile navigation

  • Smooth prototype transitions

Prototyping & Validation

A clickable Figma prototype demonstrates:​

  • Browsing and discovery

  • Book selection and detail views

  • Desktop and mobile navigation

  • CTA interactions

Usability Testing (Simulated)

Participants: 5
Devices: Desktop (3), Mobile (2)
 

Tasks

  1. Find a trending book

  2. View book details

  3. Decide to read or save
     

Metrics

  • Task completion: 100%

  • Avg. time to find a book:

    • Desktop: 18s

    • Mobile: 22s

  • CTA visibility within 3s: 91%

  • Navigation clarity score: 4.6 / 5
     

Quotes

  • “I immediately knew where to look.”

  • “The ratings helped me decide quickly.”

  • “The mobile experience feels just as clear.”

bottom of page