Following the task flow diagram I began to develop a low fidelity wireframe using Adobe XD. I focused on two common use cases for a single trip.
- A person who is some location away from home looking to return home. (Current Location - Home)
- A person checking the cost or booking a trip between two new locations (New Location - New Location)
The first greyscale low fidelity wireframe video is below (Go-Go UX 1). I made sure to include what was shown to be important functions and information displayed across all the researched apps. The main points that users gave during feedback was that the set pickup page seemed unneccessary and that the general layout felt a bit cramped. Some of these changes can be seen in the second wireframe video (Go-Go UX 2).
After these changes were made it became apparent that users rarely used the list icon next to the address search bars as they would select the text boxes to input the address. This was changed to a quick favourite toggle allowing regularly addresses to be saved quickly so they would pop up in the address selection lists. These changes are shown in the second low fidelity wireframe video (Go-Go UX 2).
The third wireframe (Go-Go UX 3) is a high fidelity wireframe video showing a more spacious user interface and how colours help with defining spaces in the user interface.
(Please note, there were several more iterations between these that only contained minor changes or had changes not used in the final wireframe).