Sarah Jackson - SEliz21
UX designer

tOme-r

Book Organizing and Locating App

So many books! Where do I start?

So many books! Where do I start?

The Beginning of tOme-r

tOme-r is an organization, location, and eCommerce app for book lovers with large personal libraries to organize and locate their physical books in a user-friendly and efficient way. As a UX/UI Design student with Springboard, tOme-r was my first Capstone project in which I designed from ideation through high fidelity mock-ups while getting feedback from other experts in the field.

My Process

With each round of user testing sessions leading to more collaboration from outside experts in the field, each phase drove the growth of tOme-r into a successful app from discovery through final testing.

Image alt tag
  • User Surveys

  • User Interviews

  • Affinity Mapping

  • Secondary Research

  • Personas

  • Empathy Mapping

Image alt tag
  • User Stories

  • User Flows

  • Sketching

  • Guerilla Testing

  • IA

Image alt tag
  • Logo

  • Wireframes

  • Wireflows

  • Mockups

  • Branding

  • Visual/UI Design

Image alt tag
  • Low Fidelity Prototypes

  • High Fidelity Prototypes

  • User Testing

tOme-r

Problem Statement:

  • Users with larger personal libraries struggle to physically locate, organize, and catalog their collection quickly and efficiently

  • Users struggle with quick search abilities

  • Users should also be able to “test organize” their books, meaning they should be able to get a visual view of what their books will look like if they wanted to organize them by color, Dewey decimal, etc.

  • Users also need a clean, simple, intuitive design that allows for these things to be easily and efficiently done.

Competitive Analysis

Reading enthusiasts love progressive websites like Goodreads or LibraryThing.

Image alt tag

Leading Competitor: Goodreads

Image alt tag

Second Leading Competitor: LibraryThing

Discover

To create some personas and figure out the main target audience for tOme-r, I:

  • Surveyed approximately 20 people

  • Completed 6 user interviews via Zoom of those with personal libraries of 500 or more physical books

  • Affinity and empathy mapping

Image alt tag

Dewey Daisy

Image alt tag

Colorful Chloey

Image alt tag

Betty Brailler

Some tOme-r Sketches

Some tOme-r Sketches

Ideation Began with Planning & Sketching

When sketching I showed a lot more of an artistic feel to the design. I had a lot to learn!


tome-r User Flows

tome-r User Flows

User Flows

tOme-r stands out because of its filtering abilities in search results when searching for books available and locating physical books owned via GPS location tags. For this reason, the user flows were focused on these aspects of the app, beginning with the basics.

User Journeys

User journeys were created from the wireframes using the most basic tasks.

tOme-r Homepage (User Flows below)

tOme-r Homepage (User Flows below)

Wireframes & Prototype

Being my first set of wireframes ever completed, I learned a lot from this step, some of which were:

  • It's crucial to keep things simple for both the creative design and usability aspects.

  • Creating low-fidelity wireframes via Figma utilizing my user flows as the testing criteria was fun!

  • There's always room for improvement.

1st User Testing Lessons:

  • Simpler creates more intuitiveness no matter how complex the IA

  • Prototypes are fun!

  • The outcome of User Testing:

    • Redesign of the Homepage, updated font, and cleaned up the overall design to create more whitespace and get rid of clutter.

tOme-r Brand Design Guide

Moodboard & Brand Design

I created a brand design guide to:

  • Keep consistency.

  • Determine the overall direction of tOme-r's design constraints while focusing on the design attributes desired by tOme-r as a company and brand.

High Fidelity Mockups

Creating high-fidelity mockups and completing another round of user testing with 5 more users allowed me to:

  • Design a new logo, showing more creativity while retaining the minimalist design attributes.

  • Improve user accessibility by revising the font and UX Writing

  • Clean up the overall layout even more 

Constraints & Obstacles

  • Covid pandemic

    • Solution: All user testing was done remotely via Zoom

  • Keeping the design layout functionality of the shelf page in line with user accessibility

    • Solution: Small icons are placed on each item or book, allowing users to move over or rotate items with the arrows located to the side of the shelf for position adjustment

  • Complex IA for a first-time project

    • Solution: Take a step back to look at the greater picture before breaking down each area into much smaller and simpler steps.

Deliverables
tOme-r

tOme-r taught me

  • Patience and confidence in the process and myself

  • Trust in myself and user testing through users reaffirming the need for tOme-r time and time again.

  • Lacking the ability to test and access user accessibility features showed me the importance of future iterations and continued user testing.

tOme-r

Additional Considerations for Future Updates

  • GPS location tracking pages and functions.

  • Coding implementation for better functional user testing that can be carried out for possible stakeholders/business partners.

  • eCommerce trading services to reach both commercial and governmental business partners such as Amazon, Thriftbooks, local libraries, neighborhood sharing, schools, etc.

  • Social community page additions and implementation