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. Customise content recommendations: The user can customise content recommendations to ensure they are shown the most relevant content.

User Personas

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

Product Architecture

Catalogue Structure: Safar’s information architecture has a catalogue structure with categorised 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.

Wireframes Iteration 1

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.

Wireframes Iteration 2

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.

Final Screens

User Flows

Leave a Reply

Your email address will not be published.