Socialibe: UX Case Study

Mobile app changing perspectives of the local library experience

The Brief

Design an app that will improve the local library experience and encourage increased engagement within the library community.

Requirements:

• Scan books & posters to unlock AR content
• Librarian & readers’ reviews
• Incorporate an events calendar

The Team

I had a brilliant team of 3 UX designers — Monique (me), Rita & Ameet — and 1 UI designer — Katherine. We gelled really well, supporting each other and working as one team throughout the process. This helped to ensure our design was cohesive and effective.

Researching the Problem

We visited our local libraries to get talking to members and staff about their current experience and how it could be improved.

From this we defined the problem to be:

1. Local libraries are changing for the better but people’s mindsets are not
2. Libraries offer lots of services and events but struggle with engagement
3. There is a sense of community but the majority feel disconnected

Creating an affinity diagram helped us to organise our initial thoughts, and start thinking about how our app could resolve these problems.

Affinity diagram piecing our research together

We found a few gaps in our data, namely what would get people more involved in the library and what the users’ expectations would be of the app. An online survey helped us to address these effectively, plus validate our initial findings.

We discovered:

Defining the User

We compiled all the data we had to create two personas — Liz and Harry. This would help us to focus our design on fulfilling specific needs and goals.

Primary user personas

Before diving into design and planning we created storyboards to help build context. Through this we could understand how our users might come to use the product and how it could be used to fulfil their goals.

Liz’s story board

Harry’s story board

Mapping the Journey

To kick-start the planning phase we needed to determine the app features / functions and how our personas would use them to fulfil their needs.

We revisited our affinity diagram for inspiration and used a priority matrix to pull out the most valuable features that should be carried forward for MVP.

Priority matrix determining features for MVP

We quickly weighed ourselves up against the competition. Most importantly, this confirmed that we had met a very poignant user need identified during the interviews.

The user had said:

I already have apps to browse books and check reviews. My library also has it’s own website. I don’t need another app, unless it can combine all of these.

Competitor analysis results

Next we needed to define how users would journey through the app to reach their goal and what pages we would need to design to allow them to do this.

Example user flows

Site map stating exactly what pages we needed

Designing the Wireframes

As you can imagine, our minds were full of ideas and we were really excited to get these down on paper.

We decided the best approach would be to follow a collaborative “Draw, Debate, Draw, Collate” process. This presented us with multiple design solutions from which we could make an informed decision on which screens we would use.

Example of final sketches

We created a paper-prototype uploaded on Marvel to do some basic usability testing. From this it emerged that:

1. Layout & proportions were skewed by having multiple designers
2. Content was cramped causing usability issues
3. People were unsure on the purpose of the app and what it provides

Above sketches transformed into a mid-fidelity design

We took steps to correct these flaws and iterations were made to our mid-fidelity wireframes in Sketch. The crucial steps taken were:

1. Decide on margins & design universal elements together to establish uniformity in layout
2. Making the pop-ups almost full screen to ease usability and improve overall look & feel
3. Adding a carousel of USPs on the splash screen to inform people on what the app does

Enhancing the UI

Style tile created by UI designer, Katherine

For the high-fidelity our UI designer, Katherine, applied the design elements she defined in her style guide. We then worked together with her to ensure the icons were intuitive (in light of our recent testing).

We also researched AR to see how Katherine could use UI to effectively portray the AR content the client requested. Testing revealed that our first attempt was confusing and not immersive enough. We redesigned the screen for our high-fidelity prototype to make the experience more realistic.

Evolution of the AR content screen

Prototype & Delivery

The final prototype with completed UI can be viewed here:

Click here to view the project `P3 SociaLibe`

More testing was carried out while the UI was being done to fine-tune our design, however, few iterations were made as users seemed confident using the app this time and focused more on what additional features we could have.

Example high-fidelity screens

We identified the below as opportunities for V2:

1. Enabling full user accounts to allow for deeper level of engagement, personalisation & interaction with peers
2. More advanced AR features such as guiding people to books within the library & a virtual assistant
3. Different UI themes for specific audiences, namely kids and older generation who may not understand or want to use certains features