SociaLibe

UI Design for an Android App

Summary of Project

Task

Create an android app for giving voice to the book industry (libraries, publishers, and booksellers) to promote themselves and announce/advertise their services. The other objective is to connect local communities and libraries.

Target Audience

  • Age: 19–50, Primary: 30s
  • Any gender
  • Families/Friends, Local circles, People who seek to socialise with like-minded people

Primary Keywords

community, family, friends, circles, local, easy access, books, library, author, rewards, events, gamification, reviews

Secondary Keywords

inspiring, relaxed, pleasant, social, open

Key functionalities:

  • Browsing books / events of a library of your choice
  • AR scan on books — the book info (from authors, from publishers, readers’ reviews) comes up
  • Chats to connect with local libraries and people
  • Create your own profiles, No registration required
  • The personal reading list
  • Rewards — when users participate events / borrow books
Team
UI: Katherine Tachibana
UX: Monique Cole
UX: Ameet Gonsai
UX: Rita Patricio
Tools
Hand-drawings, Photoshop, Illustrator, Sketch, InVision, Google Slides
Timeline
3 weeks

From the kick-off meeting with the AR Library’s developer, Joseph Allison, my team needed to focus on user interview to set the direction of branding first and found out that our client is open for any suggestion and modification on their company name and logo as well.

— Goals & Blockages

Here are their UI related goals:

  • Develop further current working prototype and improve all aspects of the interaction with the users
  • Create brand identity and tone of voice within UX research and design

One of the main blockages for the client is UI design which prevents them to move forward on their development processes.

— UI Related Requests from the Client

Mood: Quick, Fun, Playful, Easy, Engaging, Informative, Open, Pop
Colour: something neutral, such as Orange or Light Purple

Basically, there was no branding, no logo, no company name, and no specific user target specified by the client; therefore, we had a full command to set their branding. It meant this project would be very challenging and enjoyable. I was pretty sure that we would make it happen together.

-a. User Research

As we did not have any clue to establish the brand, we decided to conduct several user interviews at British Library and a few local libraries as a team. Talking to the real library users in person was beneficial for me to get to know the primary user target which is unmissable to determine the initial art direction. The primary user target has been modified as follow:

Before: Age: 20s — 30s, students & young professionals
After: Age:19–50 (primary 30s), families, friends, local circles, and people seek to socialise with like-minded people

-b. Design Inception

-c. Mood Boards

At the beginning, I created two mood boards in different art directions (1. Theme Community & 2. Theme Pop), and then merged into one: Theme Social as shown below.

To set the colour palette I would like to use in the app, I researched 2018 UI trends and the colour psychology. Orange and light purple were requested to use by our client; however, I was confident to suggest alternatives to make the app more in style while its atmosphere is still warm and open.

2018 UI Trends I was interested to apply:
• Big Headings — I was tempted to use, but it was not reasonable choice to use on mobile apps unfortunately.
• Gradient Colours — This is successfully applied.
• Soothing Colours — This is also successfully applied.

https://uxplanet.org/mobile-ui-design-trends-in-2018-ccd26031dfd8

The Colour Psychology:
blue — inspiration, relax, calmness, productiveness: https://www.colorpsychology.org/blue/

burgundy — warmth, comfort: 
https://www.colorpsychology.org/burgundy/

The finalised colour palette is introduced in the Style Guide section.

-d. Style Tile

From the style tile, I picked three images while one of them becomes the app’s primary image. All the adjectives came from our client’s request.

-e. Style Guide

This style guide shown below is the final version after being revised more than three times. I stayed flexible to make amendments on style guide even after I started to create the high fidelity prototype.

— Colour Palette:

Dark Navy:#001C40 
Dark Indigo Blue:#072141
Sky Blue:#5997C4
Pale Blue:#F3F4F6 
Burgundy:#8F001E 
Grey:#4A4A4A

Those six colours were in the palette from the beginning, but the more I developed the hi-fi prototype, the more I felt that I want extra warmth on the screen. As a result, I added two more colours.

Pale Pink:#F3E5E8
Pale Yellow:#FCFAEE

— Typography

The font pairing of three different typefaces went well.

This display typeface features large round shapes and “stamp-ish” appearances that portrait stylishness and pleasant feelings.

  • Satisfy: Subheadings, text in buttons, and the company name

A handwritten script typeface features that playful and open atmosphere of the app.

  • Lato: Texts

This san-serif typeface is simple yet stylish, and easy to read.

-f. Logo Design & Iconography

I started by brainstorming and jot any idea down as shown on left, and then I picked “SL” in the middle.

In the final version, the connected S and L is inside a round dotted circle which represents connection, community, and being social.

Regarding icons, there are still lots to be modified. The icons in status bars and navigation bars in hi-fi prototype were downloaded from Material Design. The icons in the specific screens still need to be created from scratch because all the elements must be in the same art direction. Therefore, I will redesign them from time to time.

The full high fidelity prototype in InVision is available. Please visit at: https://projects.invisionapp.com/share/7KNFA32PC2F#/screens

Closing:

The challenges

The timeline was only three weeks and there were really loads of things to do. 
We needed to establish client’s whole branding, so I prioritised things and managed to be on time for a whole process.

What I am not satisfied are the iconography and file management. It was simply not enough time for me to complete all the icons from scratch, but I wish I could do that before my team gave the client the final presentation!

Every time I open the files in Sketch, I tried to re-organise the art boards and the layers, but the cooperation of every team member is absolutely mandatory to avoid this mess.

My current short term goal is to improve Illustrator skills. They will be necessary when I create icons in the future. Moreover, I want to improve Anima plug-in and InVision skills.

What I am happy about

This is the first project for me to collaborate with UX team members. We established very good relationships among the members, so there was trust and joy during the journey.

The happiest thing of this project is that I was told my UI design met the client’s expectations and they would like to use the logo as their official one. What a great surprise! Honestly, I am so honoured by their decision and kind words. Last but not least, their application is named by my team mate, Monique Cole, which is “SociaLibe”.

Finally, many thanks for reading my case study!