Early Bird Books

Early Bird Books is dedicated to delivering stories about the books and authors that inspire us.

Overview

Skills / Area Of Focus
UI Design
Design System
Roles & Responsibilities
UI Designer
Users & Audience
Voracious readers
Client
Open Road Integrated Media
Timeline
2 Weeks

Process

Research
Data Analytics
Comparative Analysis
UI Design
Low fidelity design
High fidelity design
Design System
Style sheet
Components

Scope & Constraints

  • I can't reach out to users for research.
  • Short deadline
  • Photoshop files had been used for the design.

Challenge

    I  designed the Early Bird Books homepage to help improve the engagement of the users coming to the landing page since, users are not entering the Early Bird Books website through the homepage.

    Data Analytics

    Data was pulled from homepage analytics to figure out why users are abandoning the landing page.

    I worked with the content team to pull out data analytics from the Early Bird Books landing page. Since I was asked NOT to approach users for user research so I mostly relied on data analytics from the website

    Early Bird Books' analytics

    I found out most traffic comes from google searches from other content pages. Most users are coming to the site through organic search

    Early Bird Books' Dropoff rates

    Comparative Research

    Direct and Indirect competitors were studied to compare features and find ways to improve the Early Bird Books homepage.

    Slate.com has a hierarchy defined by color and font styles
    New York Magazine uses a four column layout to feature articles on their homepage

    Low Fidelity
    Design

    Initial wireframes are put together using the data from the site. Feedback  from the team was collected

    High Fidelity
    Design

    A high fidelity design was put together incorporating the feedback from the team.

    Design System

    A visual language was created to communicate the design to the team using the Atomic Design principles.

    01 Colors

    02 Typography

    Headlines

    font lora

    Body

    Montserrat font

    Tag

    Montserrat tag

    03 Iconography

    04 Spacing

    05 Grids

    06 Buttons

    buttons

    Hand off

    I put together the design specifications, sent the design to the technology team and worked together with software developers to implement the design.

    Outcomes & Lessons learned

    • Worked with the software engineers to improve the design handoff process.
    • Created a design system.
    • Documented the design.
    • Delivered the design in a short deadline.