Socialibe: UI Design Case Study
A mobile app changing the 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, and also will give voice to the book industry (libraries, publishers, and booksellers) to promote themselves and announce/advertise their services.
Requirements:
- Scan books & posters to unlock AR content
- Librarian & readers’ reviews
- Incorporate an events calendar
- Browsing books/events of a library of your choice
- The personal reading list
- Rewards — when users participate in events/borrow books
Team:
UI: Katherine Tachibana
UX: Monique Cole
UX: Ameet Gonsai
UX: Rita PatricioTools: Hand-drawings, Photoshop, Illustrator, Sketch, InVision, Google Slides
Skills: Design inception, Branding, Art direction, Mood boards, Style tiles/Style guide development, Designing the UI for high-fi prototypes, Presentation slide design, Logo design and Iconography
Timeline: 3 weeks
— UI Pain-point & Goals
Our clients’ UI pain-point was designing the UI itself. It prevented them to move forward on their development processes and it became a big blockage.
I then figured out the UI goals which were:
- Develop further current working prototype and improve all aspects of the interaction with the users
- Create a brand identity and tone of voice within UX research and design
Our client wanted to develop an app which changes the perspectives of library experiences in playful, informative, engaging, and open ways. They wanted an app in neutral colours such as orange or light purple.
From what we discussed in the kick-off meeting, I decided to join the UX team conducting user research at the British Library and local libraries to set the direction of branding. Our client was fully open for any suggestion and modification on their company name and logo as well.
-a. User Research with the UX team
We visited the British Library and our local libraries to get talking to members and staff about their current experience and how it could be improved. It was beneficial for me to get to know the primary user target to determine the initial art direction.
The following were discovered:
-b. Design Inception
From the findings of user research, I created design inception to set the feels of the app.
-c. Mood Boards
In 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.
Orange and light purple was requested by our client in the kick-off meeting; however, I felt it would be better colour combinations when I considered the legibility. I then researched 2018 UI trends and colour psychology to set the colour palette.
2018 UI Trends I was interested to apply:
• Big Headings —This feature would give the app a unique effect, but it was not a reasonable choice to use on mobile apps.
• Gradient Colours — This was successfully applied.
• Soothing Colours — This was 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/
This combination looked perfect to give appropriate feels to the app because it matched to the users’ descriptions for perfect library experiences in user research.
See the finalised colour palette in the Style Guide section below.
-d. Style Tile
Next, I needed to define how users would feel through the app when they use it and what elements I would need to design to allow them to have the appropriate feels. I then created a style tile for the initial art direction.
-e. Style Guide
This style guide shown below is the final version after several iterations. The style guide was always next to me as a reference when I designed the high fidelity prototype. I made amendments on it when necessary as you can see some differences between the style tile (the initial design guide)and the style guide (the finalised design guide).
— Colour Palette:
Dark Navy:#001C40
Dark Indigo Blue:#072141
Sky Blue:#5997C4
Pale Blue:#F3F4F6
Burgundy:#8F001E
Grey:#4A4A4A
The six colours above were in the initial colour palette. However, the more I developed the hi-fi prototype, the more I felt that extra warmth was needed on the screen because it was blue dominated. As a result, I added two more colours as secondary colours.
Pale Pink:#F3E5E8
Pale Yellow:#FCFAEE
— Typography
The font pairings of three different typefaces went well.
- LumberJack Inline Rough: Headings
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 feel of the app.
- Lato: Texts
This sans-serif typeface is simple yet stylish and gives good legibility to the app.
-f. Logo Design & Iconography
I started by brainstorming and jotting 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.
I created icons only on the landing page as I needed to prioritise my tasks to finish on time. As a result, the icons were still needed to be modified and to be created from scratch for certain screens to give them consistency.
For the high-fidelity, I applied the design elements I defined in my style guide. I then worked together with the UX team to ensure the icons were intuitive by conducting a usability test.
AR content was effectively portrayed in the high-fi UI that our client requested after a few usability tests. Testing revealed that our first few attempts were confusing and not immersive enough. The UX team redesigned the screen for the high-fidelity prototype to make the experience more realistic.
The final prototype with the completed UI can be viewed here:
Opportunities for V2:
- Enabling full user accounts to allow for a deeper level of engagement, personalisation & interaction with peers
- More advanced AR features such as guiding people to books within the library & a virtual assistant
- Different UI themes for specific audiences, namely kids and the older generation who may not understand or want to use certain features
Finally, many thanks for reading my case study!
