UX / UI

Alto - Rideshare

PAX App - In Trip - Redesign

Goal

To implement the map with the vehicle position status in the background and to eliminate 1 - 2 drawers for a cleaner, intuitive user experience following Jakob’s Law principles.

Jakob’s law

States that users spend most of their time on other sites. That's why they prefer sites that work the same way as all the other sites. For designers this means that it is always better to choose usual design solutions that are familiar to users.

Jakobs Law of internet User Experience Link

Problem statement

New users have commented on the In-Trip user experience of the Alto passenger app compared to its competitors.


  • The app has two drawers, one to view the map with the current vehicle position and the other with the trip details.
  • The users expressed that the driver and vehicle details were important, but they preferred a map showing their location, trip status, and proximity of the vehicle.
  • The trip details and information are scattered throughout the UI, making it difficult to gather information without a central focal point.
  • The Vibes feature is duplicated in two different areas. Users questioned its importance.


We need to update the UI by adding a map with vehicle status to the background and simplify the information for a better user experience.

My role

Main UX/UI Designer, user research and testing, mocking up and prototyping.

Priming

In psychology, can be understood as the act of subconsciously making a person behave in a way you want. Basically, in the context of UX, it means designing user experience in such a way that it helps the users to complete actions you wish them to take. Note that priming isn't about telling people what to do.

Current In Trip Experience

  • The touch targets for contacting the driver, identifying the vehicle, and changing the vibe are too small.
  • The driver's bio text size is too small, which makes it hard to read.
  • Users mistakenly thought that the bottom navigation vibes were a distinct feature from the vibes in the background UI.
  • The vehicle's location on the map and its proximity to the user are hidden in a drawer.
  • The details of the trip can be found in the bottom drawer, which is concealed.
  • There were some users who were unaware of the existence of drawers on the screen.

New updated in trip Experience

  • I have made a recent update to the background which now displays the location of the vehicle and its proximity to the user.
  • A new pill overlay displays the total allowed passengers and Pickup ETA. After pickup, the ETA is updated to Dropoff ETA.
  • I have simplified the design by having only one drawer. When collapsed, you can easily access the main trip details such as the vehicle's status, driver's profile picture, and an image of the vehicle. Additionally, you can view the driver's name, vehicle make, model, color, and license plate number.

Wireframe

Wireframing a page is an essential step in the UX/UI design process. It involves creating a visual blueprint or outline of your page's layout, structure, and key elements before moving on to the actual design phase. Here's an explanation of how you can approach wireframing a new page:


  1. Define Your Purpose and Goals: Start by clarifying the purpose of your page and your goals. Are you trying to capture email sign-ups, promote a product, or simply convey a brand message? Understanding your objectives will guide your design choices.
  2. Content Hierarchy: Determine what content elements are most important for your page.
  3. Layout and Structure: Begin sketching the layout of your new page. Consider where you want to place the headline, CTA button, images, and any other elements. Keep it clean and uncluttered to ensure a focused user experience.
  4. Navigation and Links: Decide if your new page will have any navigation options or links. Plan their placement and design.
  5. Typography and Fonts: Choose appropriate typography for your text elements. Consider font size, style, and hierarchy to make your content easy to read and visually appealing.
  6. Images and Graphics: Determine what images or graphics you want to include. This might be a background image, a product image, or a logo. Ensure that these elements align with your brand and message.
  7. Color Scheme: Select a color scheme that resonates with your brand and sets the right mood. Ensure good contrast between text and background colors for readability.
  8. Whitespace and Balance: Pay attention to the use of whitespace. A well-balanced layout with appropriate spacing can enhance the overall aesthetics and readability of your page.
  9. Testing and Feedback: Once you've created your initial wireframe, it's a good idea to get feedback from colleagues or potential users. They can provide valuable insights and suggestions for improvement.
  10. Iterate and Refine: Based on the feedback received, iterate on your wireframe. Make necessary adjustments to improve the user experience and align with your goals.
  11. Documentation: Finally, document your wireframe with notes and annotations to explain the functionality of various elements to developers or designers who will work on the actual implementation.


Remember that wireframing is a crucial step in the design process, as it helps you visualize your page concept, test its usability, and ensure it aligns with your goals before investing time and resources in full design and development.

Prototype

UX prototyping means not only designing individual pages/screens of a product from a usability point of view but also drawing up a business strategy.

Old IN-trip UX

New updated IN-trip UX