Mobile App redesign

New Life into an Old App — a step by step walk through

Public libraries are bastions for learners the world over, anything to keep them accessible is worth doing.

As a budding designer I decided to give my city’s public library app some due attention. This isn’t an official redesign, just a bookworm fussing over something they care about.

You can get a sense of my process here, or on Medium if you prefer.

What are library goers really after anyway?

Looking to do more than just a visual overhaul of the app, I dug up a publicly available library survey to get a sense of which services users care about.

The top three rated services are:

  1. Access to a broad selection of library materials
  2. Access to library facilities during open hours
  3. Assistance to help find information

An app can’t help the first two, but we should be able to do something
about #3.

What work has already been done?

Since the library’s website is the key digital touch-point for users, it’s already up to date, and served as my reference for the direction to take the app. I took note of key visual elements (colour palette, typeface, layout) from the website to match its style so users could have a more consistent experience.

1_VPL_elements
Visual references from http://www.vpl.ca
2_VPL_type_colour
Typeface and colour palette from http://www.vpl.ca 

Information Architecture

I mapped out the information architecture of the existing app which turned up a few dead links, and a chance to improve upon user’s priorities (assistance to help find information) if the relevant links were brought to the home screen.

3_information architecture

Gimme me a sketch!

I drew out some alternative screens to get going on the redesign, giving some more thought to functionality. I pushed information links to the first screen and replaced one of the tab bar functions — locations — with the bar code scanner (tucked away in the search function) for two reasons.

Firstly, the main value that people get from any library is access to books and media without having to make a purchase. Being able to quickly check if something is available to borrow should be front and centre.

And second, viewing libraries on a map is already handled better in dedicated navigation apps, it’s not a unique feature that always needs to be visible.

4_VPL_wireframe_sketching

You know what would be fantastic navigation feature though? A map to navigate to specific shelves inside the library.

Especially in large locations, finding the right shelf is time consuming and one of the reasons visitors ask for assistance.

I drew this out on the last screen, full well knowing it’s untenable without additional data management. I’ll hold off on the idea, might be worth a pitch in the future.

The Tab bar

A quick before and after of the tab bar, switching out the Locations icon as mentioned, increasing contrast for legibility, and making the perspective uniform by replacing the Explore icon.

The others icons are tweaked for visual consistency in their styling.

5_VPL_Tabbar

Wire it up

I wanted to show what the app could look like for three key functions:

  1. Browsing the catalogue
  2. Searching for a specific item
  3. Checking account information

6_VPL_wireframes

Into the details — final screens and changes

Here’s a side-by-side of all the screen changes.

Can we see it in action?

Yes! here’s a click through of the new screens.

Closing thoughts on accessibility

While updating and making greater use of carousels to browse the library catalogue in the app brings it more in line with what people are familiar with on the website, it does create one glaring problem.

Most screen readers can’t read carousel content, which would make the feature a big hindrance to users with visual impairment. Additional work would be necessary to ensure compatibility or, content could otherwise be formatted similarly to what can be seen on the search results screen.

 

Advertisements