UI Design For An In-Cab Experience Mobile App
Context
Safar is an in-cab experience mobile app for passengers to make their on going journey more enjoyable. Safar’s brand is functional, familiar and friendly.
Functional Aesthetic
Safar uses a functional aesthetic, creating an experience where content and actions take the forefront of the user experience.
User Requirements
1. Search/browse audio/video/text content: Once the user has selected a piece of content, they will be able to consume the content through an audio/video player or text app
2. Find information on events and experiences: The user will be able to search, view and make reservations/ book tickets for events and experiences in their selected location/destination
3. Customize content recommendations: The user can customize content recommendations to ensure they are shown the most relevant content.
User Personas
Suresh, 44, Mumbai
Civil Engineer
Interests: Politics, Current Affairs
Kavya, 25, Chennai
Project Manager
Interests: Film & Music, Reading
Alan, 18, Delhi
World Traveller
Interests: Food & Culture, Music
Use cases
Case 1- Suresh: Suresh works for an engineering firm that does a lot of consulting and therefore is required to travel within their business area. Travel time for each journey varies between 30 mins to 1 hour. He uses this time to catch up on current events or listen to tech podcasts.
Case 2- Kavya: Kavya works for an IT company. She commutes from home daily. Her average commute time is 45 mins. She enjoys reading, listening to music or catching up on her favourite series during this time.
Case 3- Alan: Alan is an 18 year old American who has taken a break to travel the world. He is currently visiting Delhi and wants to explore food, culture and arts. He uses Google to identify tourist spots, but he would like to try more local experiences. He uses cabs to move around. His average travel time per journey is 35 mins.
Design Process
In order to appeal to the large and diverse user base from various regions and languages, the app had to feel unified, universal, conversational, and iconic.
UI Design References
Airbnb: Clear | Charming Iconic
Netflix: Content-focused | Functional | Universal
Product Architecture
Catalogue Structure: Safar’s information architecture has a catalogue structure with categorized data that can be seen in relation to each other.
Content Focused: Because user tasks mostly involve content browsing and consumption, screen space is dedicated to content over other UI elements.
Navigation: Users can navigate to the main sections by using the tabs along the top of the screen and quickly customize Safar’s content according to their preferences.
Brand Language
Casual & Friendly: Safar uses a relaxed and friendly tone
Encourage Action: Safar focuses on user action: watching, listening, reading
Clear & Precise: Safar uses a clear and straight-forward navigation.
Colour, Typography & Iconography
Safar’s primary colour is BLACK. Safar’s secondary colour is TANGERINE. Safar’s secondary colour tangerine is often used for CTAs and selected states, its absence is helpful in indicating when no selection has been made.
Safar uses the sans-serif typeface Roboto across the entire app. All items in the type scale provide the typographic variety necessary for Safar’s content.
Safar uses Material Design’s default iconography system. These icons are constructed to remain legible and clear at small sizes.