Concept iOS App for Wheelstreet.com
This article will aim to present a prototype iOS app that was developed for www.wheelstreet.com
Wheelstreet.com is an Indian startup that provides motorbike renting services across various cities. Along with bikes, users can also rent riding gear such as helmets, boots, jackets etc.
Motivation
Wheelstreet.com currently owns 40% of the current motorbike rental market in India, it operates in over thirty cities all over the country and is truly a one of a kind bike rental service. We found it surprising that they did not have an app at the iOS App Store yet, that thought of augmenting their reach to users via a new application for iOS devices.
Why do we need an App?
Statistically, about a quarter of users use iOS devices, so there is a large chunk of users/customers the company was missing out on. Users would better appreciate an organization that gave them a more personalized solution in the form of a native app for their mobile device. The desktop website cannot be the only interface between the startup and the users, and every business organization needs a mobile application so that the users don’t feel alienated; no customer is happy when they have to use the web-view on their mobile browsers, or use responsive pages that don’t necessarily look appealing.
Users would better appreciate an organization that gave them a more personalized and custom made solution in the form of a native app for their mobile device.
The following paragraphs describe the iterative design process of developing a mobile application prototype.
I . First things first — The Paper Prototype
Our team of four members brainstormed, went over various ideas and each came up with a hand-drawn prototype of how the app would look. We drew inspiration from the exiting wheelstreet.com website in terms of the colors and the look-feel of the application that was going to be eventually come out of the prototype. Presented before you is the final prototype sketch.
It might be surprising how basic or primary these prototypes look at this stage, but they help a great extent to get the basics of the navigation flow right.
In the design iterations leading up to this final prototype, we let go of quite a few things like circular buttons, a form layout accepting users travel information like city, date, time etc. The objective was always to make the experience more personal for a user, and expecting the user to fill out a form ( like most airline booking platforms) would have been counterproductive. We also decided to have more emotions convayed via extensive use of icons rather than just using text. After we were satisfied with the navigation flow and the total outlook of our design we moved on to developing these prototypes using a high-fidelity mockup tool, our choice being UXPin.
II . Specifics of the High Fidelity Mockup
Design Evaluation —
Throughout the development process, our primary objective was to pave way for an application that the users could trust. The colors, layout, text and icons should all speak stability and safety, while the application interface improving the trust between the users and the startup.
The colors, layout, text and icons should communicate stability and safety.
Text placement was given due thought in order to avoid ‘unreadable’ or ‘obscured’ text.
All this is reflected in our choice of colors, which evoke feelings of calm and peace helping user to stay relaxed throughout the booking process while crucial information such as ‘booking amount’, ’booking dates’ and ‘user instructions’ were displayed in black for emphasizing importance and criticality.
Our app takes the user through different screens and on each screen the user is asked to perform a certain action like ‘choose travel dates’, ‘select a bike’, ‘selecting coordinating accessories’ etc., keeping the user involved at all times. We wanted to make the users believe that they could trust the app while executing transactions using their credentials, so the payment screen makes an explicit statement informing the user that their credentials are being encrypted for safety.This would allow the users to feel safe and increase their trust on the startup.
The prototype was developed with extensive use of grids for object placement on the screens, thus providing a sleek look and a clear presentation. In addition to having a clear layout, we used large buttons inspired by ‘flat design’ to make navigation clean and simple. Text placement was given due thought in order to avoid ‘unreadable’ or ‘obscured’ text; where text appeared over images, the image colors, brightness and contrast were muted to make text clearly visible.
The Users’ Journey —
Taking user on a journey and keeping them involved at all times.
With the objective of renting a motorbike for the upcoming weekend trip, the user opens Wheelstreet app. On the homescreen, the user can view the nearest pickup points near them. Once they select the ‘Book Now” option, they are taken to the ‘Select Date and Time of Travel’ page. After they press ‘Check Availability’ the third page displays pickup points in their vicinity which have bikes available with them.
Next the app displays wheelstreet’s huge fleet of bikes sorted under different categories; this page is accessible even from the homescreen if the user just presses ‘Fleet’ option. Here the user selects the motorbike of their choosing, and various icons as well as ‘user ratings’, ‘available units’ help them make their decision, once the items are added to the cart, the user proceeds to selecting a coordinating apparel for their trip.
The same design and usability principles apply to the following screens where the user selects a helmet and a jacket to rent along with their preselected bike. The login logistics work a bit differently in wheelsrteet, we dont want the user to be presented with a login when they first open the app. Only after they have browsed the app and are ready to make their first booking do we ask them to Sign Up/ Log In. Also, the user can totally skip the ‘Gear Selection’ part and move directly to the checkout screen.
Only after they have browsed the app and are ready to make their first booking does the app ask them to Sign Up/ Log In.
Okay, so once all the items are in the cart and the user presses the “Checkout” button, the cart is displayed allowing the user to review their items. Next they are presented with the “Payment” screen which allows three payment options. All three payment options have been displayed in the image below. The use is displayed a “booking success” screen and is good to go.
III . Usability Testing and Iterative Improvements
The final step in this process was to ascertain how well our design could be understood by a user, how easy would it be to use the app and whether the users’ journey that we tried to developed seemed logical. To find answers we turned to usability testing and after very constructive feedback from users we further went on to improve the prototype.
Some improvements at a glance are –
- “View All” button on bike and gear categories.
- Description on the map in the homescreen.
- A dynamic cart displaying number of items in it.
- User reviews against each item.
The prototype that you saw above already has these and many other improvements incorporated.
In the two weeks that it took for us design this prototype from ground up, we faced many difficult choices. Most challenging were the ones where we had to choose between a design trend and a design fundamental, and we always choose logical design components that would appeal all user demographics and work for a variety of users.
One thing was plain, that in order to develop a ‘user-proof app’ (user-proof being synonymous with unambiguous ), it is crutial to be able to do user-testing at every iteration, right from paper prototypes to actual developement.
I hope you enjoyed the article! I urge you to leave your valuable comments and suggestions. Tell us about your favorites, any details you liked or something that you despised.