Back

Car listing redesign

Revisit the information architecture of the car listing page and detail page of CheapOair native iOS application to improve the car rental process.

Project background

Product issue
  • Funnel decrease drastically
  • Conversion is low
User Feedback Finding
"I need to see more details to select the car..."
Product goal
  • Increase listing - booking page funnel
  • Reduce decision-making duration
Design challenge
Keep visual consistency over different corner cases
Project
Fig.1: Listing screen
Project
Fig.2: Detail screen

Draft ideas

Listing (Fig.3)
  • Enhance layout of the listing card to align with design guideline
  • Add critical information based on user feedback (e.g., car spec)
Detail (Fig.4)
  • Add secondary information (e.g., rental information)
  • Add adjustable specs that might affect the price (i.e., users could review before the final decision)
Project
Fig.3: Listing sketch
Project
Fig.4: Detail sketch

Diverge solutions

Information architecture
  • Listed out factors that would affect to decision making
  • Segmentize tier of information
Wireframe
  • Utilize card layout with information segments
  • Utilize tier segments to define interaction flow
Options
Communication
  • Which pronoun would be more straightforward?
  • Car model vs. car type
Interaction flow
  • What would be the right amount of commitment when users see the detail?
  • Browsing vs. deciding
Open wireframe
Project
Fig.5: Listing wireframe
Project
Fig.6: Detail wireframe

Converge and Prototype

Converge solution
  • Use the car type to reduce surprise
  • Using car type allows to use conversion-friendly labels.
  • Place the detail view in the browsing path
  • Users would decide after they check out the rental information.
Visual design
  • Update and utilize UI component for visual consistency
  • Update icons and add a text label improve receptiveness
Business cases
  1. Distance check - map view (Fig.8)
  2. Rental details - different drop-off location (Fig.10)
  3. Upgrade - upsell options (Fig.12)
Open interactive prototype
Project
Fig.7: Listing screen
Project
Fig.8: Listing screen (map view)
Project
Fig.9: Detail screen
Project
Fig.10: Detail screen (diff. drop-off location)
Project
Fig.11: Detail screen (price details)
Project
Fig.12: Detail screen (upsell options)

Contribution

Product strategy
  • Collaborating with the product owner to define the problem statement
UX design
  • Collect and analyze pain points
  • Revisit information architecture and segmentize them
  • Create a wireframe and flow
UI design
  • Creating a high-fidelity UI mock-up
  • Update and utilize style guide / UI library
  • Creating an interactive prototype using Sketch and UXPin