UX Design, Visual Design, Sketch, Prototyping, ProtoPie
ReachNow is a car sharing service available in selected NW cities and New York run by BMW. The beauty of the service is you can rent the vehicle, drive, and leave wherever you want within the service area. Hence, you don't have to return the car to the specific location like traditional rental services. I used this service when I lived in Portland several times and found several design problems:
- The vehicle unlocking process was unclear, slow, and confusing.
- Overall aesthetics had a lot of room to improve.
- Some UI elements weren't working as I originally anticipated.
For my role, I focused on tweaking aesthetics and some UI elements to reduce confusion and improving the unlocking process by formatting the streamlined process for interactors.
At beginning, I started analyzing current app's design and gathered the list I want to improve. Furthermore, I did my low-fidelity mockup on Fiftythree Paper to imagine how the redesigned app would look like.
After clearing out my ideas, I started creating variations on Sketch. At first, I tried to see how I can improve the UI using existing assets. However, I was not happy that there are bars on the top and bottom which limit the map view. I also didn't enjoy having a reserve window on the top since it was unreachable with my thumb. Therefore, I chose to find a new way to implement this interaction.
Outcome 1: Aesthetics and tweaked UI elements
- Removed the top navigation bar to enlarge the map view.
- Removed the green overlay when the map is zoomed in. The color is used to indicate the service area, and it's only useful when I zoom out.
- Removed the list view. During the testing with friends, they mostly used the map view for making a reservation because:
- They wanted to know where the closest vehicle was located. While the distance was important, they also considered which particular road the vehicle was on to plan the trip.
- Refined the filter button so interactors could choose more than one brand.
- Removed the hamburger menu and moved the main menu to the bottom naviagtion.
To follow the Apple's new Human Interface Guidelines, I moved the reservation screen to the bottom so interactors can reach the "Reserve" button with a thumb.
Getting to a vehicle
- "Destination" is a very confusing term; It can be a direction to the vehicle or a destination an interactor wants to go. In fact, this feature lets an interactor to send a destination address to the car. However, in my testing, it never worked. Therefore, I replaced to "Direction" which can open either Google or Apple Maps to the vehicle.
- "Damage" is a feature letting interactors report any cosmetic damage to the vehicle. Even when I'm far away, this feature stays enabled. I found this feature misplaced and moved to the unlocking process.
For final touch, I took a look at history and trip detail pages. I included a trip map so interactors can understand the trip quickly, and reorganized information on the trip details page.
Outcome 2: Seamless and organized unlock process
- When interactors press "Unlock," it shows a pop-up window saying the vehicle is going to be unlocked in 2 minutes, which is not a clear message; they need to be notified when it's unlocked.
- After driving a few vecihles, I realized a damage window pops up randomly after pressing the "Unlock" buttom. believe this must be a part of the process before interactors get inside of the vehicle.
- When interactors press "Unlock" a new window shows up asking interactors to look around the car to report the damage. While doing this, the app will communicate with a server to know when the vehicle is unlocked.
- When the report is done, the app will show the message that the vehicle is unlocked and ready to drive.