Veyo Member Home Page

Mobile Application
July 2018

Timeline: 2 Weeks
My Role: User Researcher, UI/UX Designer, Visual Designer
Tools: Sketch, InVision
Methods: User Testing (Crowd Testing), Rapid Prototyping, Wireframing

     When I joined Veyo, they had just finished building the first iteration of their member app. This app would allow members to view, book, and manage trips with Veyo. After participating in a crowdsource usability test with QA engineers and developers, we found that there was a lot of confusion with the trips homepage. 

 

 Main issues we discovered on the current homepage (right):

  • Users expected to be able to click on the appointment to edit the trip or view more information

  • Users were confused on how to see all their trips (manage trips)

 

     I was tasked with creating the next iteration of the home screen which incorporated with user feedback. I came up with 3 solutions to address the issues:

  • A list view with "Upcoming" and "All" tabs

  • A list view with "Upcoming" and "All" tabs with trip action buttons

  • A one-page list view of all trips

3 Proposed Design Solutions

     All three new homepage designs incorporate a list view and highlight the member's upcoming trips.

Tab View

     A tab view allows for members to separate upcoming trips from all trips while allowing members to view all their trips if necessary by switching tabs.

     Trips are now clickable cards and will bring members to their trip details page with options to request pick up, cancel, or edit. An arrow on the card as well as a removable notification signifies to the user that the card is clickable.

To play, press and hold the enter key. To stop, release the enter key.

To play, press and hold the enter key. To stop, release the enter key.

Tab View with Trip Action Buttons

     Similar to the previous tab view, this layout allows for separation of upcoming and all trips. However, trip actions are upfront on the trip card. This saves members an extra click to quickly act on their trips.

     The trip cards are still clickable but there is no room for an arrow to make that clear. This sacrifices a minimalist design for accessibility with the trip action buttons.

One-page List View

     This list view allows members to see a lot of trips at once by reducing the information on the cards (thus shrinking the size). Members will not have to switch between tabs but will still be able to see the separation between upcoming and later trips. This addresses the issue of the tabs being possibly missed by members.

 

     The trips remain clickable cards which will lead members to the trips details page with actions they can take on the trip.

To play, press and hold the enter key. To stop, release the enter key.

Conclusion

 

     After the three different home pages were put into InVision, we set out to do more user testing with the different flows. All three designs had merits in improving the first build of the homepage by implementing a list view and taking out the "manage" trip button for more real estate. The results revealed that the Tab View without any buttons was the most effective. Users were more likely to have accidental clicks on the other prototypes since all the clickable areas were very close together (buttons and cards). The design was also not as overwhelming and cluttered. Further testing will have to be done to see if any other issues arise as more features may be added.

explore more projects