While designing for the apple watch I kept the following things in mind:
1. Keeping interactions precise
A person can hold his wrist raised up to his face only for 2–5 seconds on every screen and about 30 seconds for the whole app.
2. Choose only the most important flow
Even if the Olacabs app had a lot of features, it was important for the app to carry out the most important ones i.e, booking of cabs.
3. Component design
Make sure the keep in mind the guidelines provided by Apple. You do not have much scope of thinking out of the box in this case. Just like iOS and Android, Apple Watch has its own visual language and ways that a user is supposed to expect.
Some things that we decided to skip for the first version:
1. Drop location
Apple maps work pathetically in India and selecting the drop location was difficult at that moment. Siri as of now is not smart enough to interpret complicated pronunciations of places in India.
2. Payment Method
Selecting payment method was not included in the flow. The only way to do it is to draw out your phone and change.
3. Rating the driver
We tried making it possible in the process of designing but we thought of taking it up in the next version.
If brought down to small steps this is what you could achieve through your wrist:
Category selection screen
1. Option 1
Pros — Upfront display of all the cab categories and comparison of arrival time.
Cons — Fetching arrival time from the phone for all the categories was a heavy process and could result in a faster battery drain.
2. Option 2
A pre-selected cab category. Changing it was done through a long press interaction. The screen shown is the process after the long press.
Pros — Easy for the case when you are used to selecting just one category. Lesser arrival time requests from the watch — battery friendly.
Cons — Changing the category was another long interaction and secondly, you could not compare the arrival times with all others.
3. Option 3
Horizontal pagination of all the cab categories and their arrival time.
Pros — Arrival time request per page.
Cons — No comparison. Longer navigation time in the case of selection of a cab.
After much scrutinization and discussion with the developer, we decided to go for option 1. We found out that battery drain was not much of a problem and it was the better option for comparison of the arrival time. A feature that Olacabs is known for as compared to Uber.
There are cases where the GPS pointer lags due to network latency. The final screen serves as a check and displays your current location which will serve as the pickup location. Apart from this, you have the selected cab category and the estimated arrival time.
After a few iterations with the cab arriving screen, Option 3 was finally implemented. The ETA was the most important thing in the visual hierarchy. Followed by the car number and other details.
The following screen was designed as a notification and pops up just after the driver has reached its destination. This can serve as a subtle gesture to give the customer the details of the ride. The following animation was made on principle and was part of explorations during the project and has not been implemented at the time of writing this post. (Jan ’17)
During the process of designing, I had to pitch my solutions/designs using prototypes and I used Marvel/Invision. You can interact with a prototype given below.
Although all the screens are not the final ones, you can get an idea of the whole product flow.
Complications were not included in the first version as we wanted the bare minimum version to make it’s way first. But surely, I got the opportunity to learn more about it and work on them. The work is not live yet and I am bound not to disclose the work. If you are interested in learning more about the procedures and thought process involved, please inbox me. Although here is a sneak peak.