Wireframes: Iteration 1
Wireframes: Iteration 2
Final Screens

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.