SociaLibe - UI Design for an Android app
This was the third project at Red Academy. I was a UI designer as a part of the team and we worked with a real client named AR Library.
My role was UI design, art direction, logo design, and high-fidelity prototyping. I also participated a user research with the UX team.
The contexts of the project were to:
- Develop further a currently working prototype, improving all aspects of interaction with user
- Create a brand identity around the app
- Enhance the user experience within the library premises and create community spirit
- Introduce gamification in the prototype and include AR experience
Project: Improve overall UX/UI aspects of an existing Android app
Team: UI Katherine, UX Ameet Gonsai, UX Monique Cole, and UX Rita Patricio
Tools: Hand-drawings, Photoshop, Illustrator, Sketch, InVision, and Google Slides
Timeline: 3 weeks
Research - Find a key
- Domain research
- Application of AR
- User research at libraries
In the UX research process, I participated in a user research at British Library and a local library. From the result, we found out the gap between the client’s desired features of the app and how people use libraries in real life.
People visit British Library mainly for:
- Work Stations
What people want from local libraries are:
- Participating events
- Borrowing books
- Community feels
The UX team decided to suggest the client some features to let the users have personal experience such as personal reading lists and a chat function.
In the kick-off meeting, our client mentioned that the app’s target users were literally everyone. However, I decided to narrow it down to 19 – 50 years old because I wanted to create brand identity and tone of voice within UX research.
As a part of the UI research, I have created an inception as shown below.
Ideation - Unlock
From the result of user research, the team decided to reflect more local library user voices to the features. Therefore, I wanted to have adjectives to reflect the team’s decision which were:
The colour palette had three primary colours: navy blue, red, and grey (#4A4A4A).
In this phase, I started sketches to create a company logo and created style tiles.
The image shown right is a mood board and the one shown below is a style guide.
Design - Cast a spell
Low and Mid fidelity wireframes were created by UX team.
I had two full days before the client presentation and it was obvious that I would not be able to make all my ideas happen, so I prioritised what I need to do to finish my part on time.
- Focused on putting all the frames into the brand style – colours and typography on high fidelity prototypes.
- Made them pixel perfect.
- Decided to create icons only for the landing page. All the rest were remain untouched from the mid-fi wireframes.
I also needed to create a presentation template, so my teammate Monique Cole gave me a big help creating prototypes in inVision.
The image shown right is mid fidelity wireframes.
- Inception Sheet
- Mood board x 3
- Style tile x 2
- Style guide x 1
- Branded presentation template x 1
- High fidelity prototypes
Iteration - Tweak
Tweaks and a challenge to be done:
- Create on-brand iconography
- Video prototyping
The outcome from the client was overall positive. They mentioned we have done beyond their expectations.
SociaLibe, named by Monique Cole and the company logo designed by me are now official. The style guide was used by our client for their investor presentations.