The Axis360 mobile app login screen

Axis 360 Mobile App

Redesigning a flagship app according to user research results.

Overview

Axis 360 is the flagship product for the B2C vertical for Baker & Taylor. It allows patrons of libraries to checkout and consume eBooks and audio books from the comfort of their own home. It was, however, plagued with many usability challenges that often made it difficult to use the app. In an effort to alleviate those pain points, I undertook an internal effort to revitalizing the app.

My Role

Lead & Sole Designer

Visual Design, Interaction Design, Prototyping, Wireframing, Research, iOS & Android Design

The Problem

Axis360 was based off the old website architecture and did not cater to the needs of mobile users. The redesign also needed to address common complaints on the App Store reviews.

As it stood the app was heavily based off the older website design that did not lend itself well to a mobile experience. Many of the interaction points did not make sense. The front page was also of heavy concern as it often did not accurately reflect categories our users felt was relevant to them. Librarians also lacked space to customize and tailor the homepage to the needs of the patrons they were serving.

Creating empathy

This project started as a push from myself after a series of librarians and patron interviews. With these results I was able to quickly determine why our app rating was constantly hovering around 2.5 stars. The app was outdated and no longer catered to the needs of the people using it on a daily basis. There was no movement within Baker & Taylor to put more effort into the design of the application. Yet, the app remained a sticking point for many of our customers.

Baker & Taylor was new to the concept of UX as well. It presented a challenge to me on how to gain support through the product organization to push to revamp this app. My approach was to create personas of our patrons and librarians to humanize them beyond data points. I felt this was the strongest tool I had in my kit.

Personas

Below I have included two examples of the personas I created through my user interviews. They were presented during a readout. I gave each person in the room a persona to resonate with. The job of each person in the room was to understand and participate in the readout. When a pain point came up that pertained to their persona they were to read out the specifics on why it prevented them from enjoying the app. It was very effective in illustrating why these pain points were contributing to our low star ratings on the app.

A persona card showing Fatima a college student
Fatima, one of the patron personas used for the exercise.
A persona for a librarian named Tyrone
The librarian persona, Tyrone.

Creating the design outline

User-centric design to meet real people's needs

After gaining stakeholder buy-in to explore options to improve the app's experience I went back to my personas and user interviews to gather some goals I wanted to see implemented for the redesign of the app. I also did some competitive investigation into experiences people in the interviews kept referencing. These would prove to be important because many of their expectations and paradigms were set by those experiences. If I could implement the heart of what made those experiences enjoyable, then the users of Axis360 would have more enjoyment in the app.

My Goals

I started with a few wireframes of the home page to get a better idea of the direction I wanted to ultimately take. This step was also vital to get stakeholder, product, and development input on feasibility before I really got into the heart of the work. Without a design library having these wireframes were vital to setting up the design direction. I drew inspiration from Amazon Books, Kindle's Store, and Google Play's Book store.

A login screen for a mobile app
A library checkout landing page
The earliest concepts where I began to play with information hierarchy and object placement. I made a few changes based on feedback and user testing.

Incorporating system functionality

One of the areas of improvement for the app was our login experience. The current functionality forced patrons to enter their libraries in by hand every time the system logged them out. I wanted to utilize the system location services to determine where a patron was and then serve them a list of libraries nearby without the need of search. Search would still be offered for people who were out of range of their local library. This piece was also prime for using some of iOS out of the box functionality instead of relying on taps to navigate this flow. I integrated the drag and pull functionality used in Apple Maps for the results list for a more intuitive experience.

There was also an opportunity since many libraries still relied on physical cards to use the camera functions to read and fill out the Library ID for the patron. For accessibility the bright green of the prior design was darkened enough to meet AA WCAG contrast ratios. The pin field was also given the option to show the pin itself. Later in the app under settings users would be given the option to log in automatically by using Face or Touch ID for their preferred library. For a consistent experience across OS's I decided to use Material's style for text fields.

Before ( old login )

image showing a library search field
Image showing a library search field with results

After ( proposed login )

Updated find library page with locations
A login screen for a library
View Login Prototype

Applying system paradigms

A major issue within the existing app was the interface for audiobooks, the most popular offering, did not use the same patterns as the rest of the OS ecosystem. This created a disjointed experience for patrons. I used Apple Music as the backbone for creating a new experience surrounding audio books. I also implemented a new sleeping screen and gave users the all important skip 30s ahead that was a heavily requested feature. A lot of the principles I followed came from Apple's OS human guidelines.

When I created the screens below I wanted to ensure there was a low barrier of entry since the interactions of the screens would be familiar to the users as interactions seen in other areas of the OS ecosystem.

An audio player for a audiobook
A chapter selection screen for an audiobook
View Player Prototype

Launch Results

Since the redesign was such a drastic departure from our original design the upper management team decided on a small rollout to clients willing to upgrade to the new experience. This allowed the company to run analytics on the performance of the redesign and compare it to the libraries on the older version. It was their way of mitigating risk since in the past the customers had been resistant to change.

Increased checkouts

Libraries that switched over saw a 22% increase in checkouts.

Decreased support required

Librarians reported an overall decreased in the time they spent educating patrons on how to use the app.

Ratings Increased

Participating libraries were given in-app surveys that put their star rating at 4.7.

Conclusion

Creating this revamp was a great exercise in how to be proactive in my approach to UX. I foresaw a problem not on product's radar and was able to convince them of its importance. That buy-in was crucial in my future work at Baker & Taylor as it meant they trusted my research and judgement of the right areas to invest in when it came to UX. Working in the library space was an interesting and unique challenge.

Return to the Homepage

Let's Chat

Get in touch for opportunities or projects!

tiffani.brickhouse@gmail.com