This week, we had a UX teardown of the LibraiesNI app. The aim of this was to help us gather our points of focus and understand the strengths and weaknesses that the current app possesses, as we will soon be beginning to make our own interface for our brand.

The Task

We were split into groups of four people to answer a range of questions about the interface. We ended up with a slightly smaller group of three, however I didn’t mind as the smaller number made it easier to ensure everyone was equally involved with discussion.

This task had a few parts; we first did a teardown of the LibrariesNI app based on five questions, followed by a teardown of an app which we felt is more successful with a similar mission. After our discussions, we would share our outcomes with the rest of the class.

LibrariesNI UX Teardown

We began with the teardown of LibrariesNI app. We were shown the interface on the board in class, however my group and I opted for installing it on our phones to get a closer look and a better feel of what the average user experience may feel like.

image.png

LibrariesNI app landing page.

LibrariesNI app landing page.

image.png

Based on our firsthand experience from downloading and navigating the app, we instantly agreed that it wasn’t very user friendly. All navigation buttons are in the same column on the same pager, there are inconsistent font sizes and much more. Before even beginning the teardown of the interface, we knew that it was a very poor UX, showing how even an ordinary user would be able to quickly recognise that the design is poor.

We then began answering the teardown questions:

1 - What does it do well?

We struggled to answer this question, as there weren’t many strengths that this UI had to offer. We did recognise a few strengths that, although basic, play a major role in the usability of the app. Firstly, we had to note that the buttons work. Of course this isn’t holding a particularly high standard, however this functionality is the different between a usable and unusable UI regardless of appearance. Secondly, we noted that everything is relatively large; including font size and, especially, icon size. This enhances readability, as larger icons and text sizes paired with a decent colour contrast allows for more accessibility for those with visual impairments.

2 - What could be improved?

We identified a range of areas that could be improved in this interface.

To begin with, it was altogether inconsistent. The most noticeable point of this was the icon weight and positioning inconsistencies. Despite being vertically stacked, the icons didn’t alligh with each other, with some centred in the frame while others were at the top right. This made for a very messy appearance, which honestly creates the sense that there wasn't much thought put into user experience. Similarly, the font weight differed between icons. To me, this shows that the design was either not thought through then these were created or, and which I assume, these were taken from an icon library without checking size, wight or if they would even fit cohesively in a design together.

image.png

A major design flaw that I noticed was that the search bar dosen’t actually work. When clicked, users are brought to a sign in screen. Although I can presume that the reason for this is that they intend for users to be signed in before using this, it wasn’t indicated anywhere that this is why this screen was brought up. Furthermore, I feel that something as simple as the search bar should work if users are going to be given access to the overall interfaced without needing to sign in. This could be overcame altogether by adding a sign in landing page upon downloading the app.

image.png

There are no images and very few visual elements aside from the icons. This creates for a very lifeless design which is slow to navigate, as a lack of images led to a very text heavy design. Some parts of the interface could be improved by replacing heavy text areas with images, such as a map instead of a list of libraries.

Finally, we noted that the list of buttons could be improved by adding categories. Buttons of similar categories are mixed throughout each other, so adding sub headings to organise the buttons on the Home Screen could help create something more user friendly without a complete overhaul.

3 - What features could be added?

We noted a few features that could be added alongside the improvement ts to further strengthen the interface and create a much smoother user experience.

One of my classmates in my group pointed out that a number of the icons could be moved to a bottom toolbar to reduce the need for scrolling to reach the most important icons. I hadn’t paid much attention to the lack of a toolbar in the interface, however I can recognise how this addition would reduce the clutter on the home screen and lead to a more consistent and usable design.

We also suggested that the ‘my account’ button could be added to the top of the screen, rather than mixed in with the rest of the navigation tools. this would mean that users have easy access to their information, rather than needing to find it though the clutter of buttons.

4 - What could be removed?

There is a purple frame around the logo. This is unnessescary, as the background itself is darker, so the logo would actually stand out more without the border.

image.png

image.png

Furthermore, a lot of the navigation buttons could be removed. This could be done by combining them, or simply removing ones that aren’t nessescary. For example, there is a button for World Book Day which is no longer used and hasn’t been updated for a long time.

5 - How does this align to your user priorities?

We all discussed this based on our own values, and we found that we all had some in common so noted them on the Miro board we’re working on. For the purpouse of helping me with my project, I lated decided to look at this is terms of my personal values as that is likely where I’ll generate the most learning.

Encouraging - I don’t think that LibrariesNI’s app is very encirapging. There isn't any features to motivate people to read or even visit libraries, with most of the buttons simply linking to the website.

Calm - I would say that the interface is relatively calm. there isn’t any overwhelming colours of images. However, I feel that this has led to a boring and mundane app interface that doesn’t give much of an experience at all.

Personal - This app denifnatley isn't personal. Users aren’t even encourages to sign in upon downloading the app, with sign in only being required to use the majority of buttons which creates frustration. Furthermore, there isn’t any recommendations, personalisations or even the option to select your own library.

Straightforward - It is somewhat straightforward. Most features are on one page, which should create something that is almost too straightforwards. However, upon actually using the interface, the majority of buttons either dont work or lead to external websites, creating an experience that definitely isn't straightforwards.

Welcoming - It’s very generic with a lack of personalisation, so I wouldn’t say that it has a very welcoming experience.

Libby Teardown

We looked at Libby as our secondary app. Libby is a popular reading app which encourages both borrowing and reading digital ebooks.

image.png