ReachNow is a car-sharing service run by BMW in a few selected cities in the U.S. When I lived in Portland, I got a chance to use the service, and after experiencing a few frustrations while interacting with the app, I chose to create my own version.
After finding a few participants who had used ReachNow before, I measured how long it took them to unlock the vehicle on both old and my version of the app. While my app was a prototype, I observed a few didn't realize the vehicle was unlocked which prompted them to wait longer. With my redesign, they saved up to 30 seconds on the unlocking process and everyone who tested felt it was smooth. They appreciated the car inspection section before the clear unlock message. They also navigated the app quicker than the old version because of the improved reachability.
Since the app was used to reserve and unlock a vehicle, its confusing and slow unlock process was my high priority. It also had a few UI components such as a hamburger menu that I wanted to replace that can be reachable with a thumb. Lastly, I wanted to select a few vehicles for filtering.
At the beginning, I recreated the app using existing UI elements, and I reminded myself that having main task on the top area defied reachability. Therefore, I moved a reserve button to the bottom. In addition, instead of offering both map and list views, I chose to focus on the map view since every tester used this to make a reservation. In fact, location of the vehicle was very important for them since they’re local and want to figure out the easiest way to reach to the vehicle.
Final Design 1: Re-organized layout
First, I moved the hamburger menu to the bottom for reachability. By doing this way, interactors understand main menu options and be able to touch easily with their thumbs.
The second is re-organized buttons. I changed how the filter functions so they can choose more than one brand for customization.
Final Design 2: Reachable Reserve Button
I had to move location and filter buttons to the top because of this reservation process. In an original design, the reservation layout was on the top of the screen so it was not easy to reach. By moving it to the bottom, the reserve process is easily reachable using thumbs.
Final Design 3: Getting to a vehicle
I also simplified the guidance screen by reducing necessary elements to a few icons and moving it to the bottom to create wider space for a map and ease the reachability.
Final Design 4: Unlocking process
The old design was unclear, inconsistent, and slow. Not giving a clear message when a vehicle is unlocked has made me stand still right in front of it several times. In addition, the car inspection screen was not easy to understand and showed up on my phone occasionally.
To solve the issues, I chose to create a designated pop-up flow when interactors tap an “Unlock” button. I want interactors to go through the car inspection by default for their liability issue, and while they do this, I imagine the app will initiates the unlock. When they are done with inspection, the app will get the update from a server and will guide them to open the vehicle door and start driving.