Published on <a href="https://blog.prototypr.io/giri-bike-renting-app-89f5aaa57dce?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Vineet Arora <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TsdxOMVDtEKpKNoPUleAOg.png">
A product design case study
This is a case study of a personal project I recently worked on. The aim was to build a basic app flow for a leisure-bicycle renting service called Giri.
<h3>The problem statement</h3>
Giri is a leisure-bicycle renting service which has a few bicycles placed across Bangalore at some designated spots. People are required to pick-up and drop bicycles at these spots for which they would be charged by the hour. The hourly rates also depend on the kind of bike and the riding gear that the person rents along with it.
We required an app to help people explore, decide and book a bicycle that they could pick up and use for the booked time.
<h3>Why is this case study useful to you?</h3>
In this case study, I will take you along my thought process and show you how I made design decisions at every step.
This case study may be useful to you because:
<ul>
<li>if you are a beginner, you can use this as an example case study to refer to while working on your design projects.</li>
<li>if you are an expert, you can help me improve with your feedback in the comments.</li>
</ul>
This case study will cover three fundamental steps of the core experience:
<ol>
<li>Discovery — Showcasing various bicycles and options available</li>
<li>Decision — Helping the users make an informed choice</li>
<li>Booking/Pickup — Helping users book and pick-up the bicycle from the designated spot</li>
</ol>
What you will not find here:
<ul>
<li>The research part i.e. how I constructed the User Persona. We’ll assume the persona as a given here.</li>
<li>Flows like user onboarding, signup/login, bicycle drop or booking history etc. I will focus only on the core flow.</li>
</ul>
So, let’s get started:
<h3>Defining the target user</h3>
I defined the target user as a young leisure biking enthusiast in Bangalore.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vhjByz4IWWOXYR369p6AYw.png">User persona
<h3>Similar companies in the market</h3>
Although there are many <a href="https://lbb.in/bangalore/bicycle-rental-bangalore/">popular bicycle renting services in Bangalore</a>, renting bicycles, for many of them, is just one part of their business models which include renting motorbikes, scooters, and sometimes, <a href="https://www.grabonrent.com/Bangalore/">everything</a>.
There are the ones which focus only on bicycles but then the mobile app is not their core means of interaction. This is where Giri fits in. I decided to design Giri for iOS users (primarily because I wanted to explore designing for iOS). You don’t get such a luxury of choice in real life.
<h3>Breaking down the task</h3>
To break down the task, I drafted a story of a user called Arun who booked his bike through Giri.
Arun is a leisure biking enthusiast in Bangalore. He decided to book a bike for a weekend trip with his friends to Nandi hills. He used Giri to book a bike with some accessories. Then he went to the pickup location on his pickup time to pick up the bike. After his trip, he returned the bike back to the pickup location.
I found that Arun’s journey could be broken into 8 steps:
<ol>
<li>Decide to book a bike</li>
<li>Define where to pick the bike up from, time of booking and type of bike</li>
<li>Select a bike</li>
<li>Add accessories</li>
<li>Choose a pickup location</li>
<li>Pay</li>
<li>Pickup the bike and go for a trip</li>
<li>Drop off the bike</li>
</ol>
Out of these steps, the app would provide the core experience for step 2–6 and would complement step 7–8.
<h3>Defining the required engagement level</h3>
As Giri was to be designed to perform a task, I decided to design it with a task completion approach. For example, consider YouTube vs Uber; which app tries to keep you engaged all the time?
<h3>Detailing the task</h3>
To decide what all information would I need to seek from Arun and what all information would I need to provide to help him make a more informed decision, I decided to draft a detailed conversation between Arun and Giri.
As this approach forced me to personify Giri as a human, it helped me in getting a lot more clarity on how to make the experience more humane. <a href="https://docs.google.com/document/d/1ia_cU3E8BhP3dzn9-UNTWGNUf3oNloJlQEnV3aeu2bI/edit?usp=sharing">Here is the link</a> to the story. You may skip reading this conversation considering that it is a bit lengthy.
So, the final task flow of the Arun turned out to be this:
<img alt="" src="https://cdn-images-1.medium.com/max/800/0*WdxugTRw2X8zzXJl.">Task flow (Original photo <a href="https://drive.google.com/file/d/1mKMDZTM3Tunooa622wqXfX51OWe27zCa/view?usp=sharing">here</a>)
Deciding the layout
Before designing the layout of the app, I decided that I would design for ease of use with the thumbs because that would cover both the kinds of users–those who use thumbs and those who use index fingers (Read <a href="https://medium.com/@Draward/mobile-reachability-rules-of-thumb-ce37dd0cd3ad">this amazing article</a> on Reachability by Alex Kirhenstein). The implication of this decision was that all the primary action buttons would be concentrated in the bottom half of the screen where they could be easily accessed and all the major informative elements would be placed in the top half where they could be read more easily.
<img alt="" src="https://cdn-images-1.medium.com/max/884/0*3bW3JwDhNlGu8l9E.">
Now, for iOS, there were two ways I could define the layout of the app:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*dBinCidQlK1fuHEq.">Two options available for navigation
As I was designing the app with a task completion approach rather than an engagement approach, bottom nav was not the primary part of core experience. Thus, I omitted the bottom nav.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ljQPfZKjY5mV4iMR.">I chose collapsed nav over bottom nav as navigation is not a part of the core experience.
<h3>Wireframing</h3>
Using these decisions and the conversation between Arun and Giri, I designed the low fidelity wireframes.
<ol>
<li>Home screen: Enter pickup, dates for renting, and bike type Initially, I designed the screen this way</li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/max/690/0*RIvDlpQzdzrSmcpK.">Home screen wireframe
However, after <a href="https://dribbble.com/shots/4156101-Bike-Renting-Coming-soon">feedback from Agniva Si</a> on Dribbble (yes, a few people do give feedback other than “wow”, “good work”, “loving it”, etc. on Dribbble), I realized that having I could use the real estate being consumed by the calendar to show bike types instead. So, I modified the wireframe and resulted with this:
<img alt="" src="https://cdn-images-1.medium.com/max/642/0*1xjfqm1xdPw_GcTb.">Home screen wireframe with feedback incorporated
2. “Select a bike” lists all the available bicycles and shows the chosen options to keep Arun assured that he has entered the right details
<img alt="" src="https://cdn-images-1.medium.com/max/687/0*PcJVAzCdnC34V2op.">
For this page, I had two listing options i.e. List view and Thumbnail view
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*KxMJN99E4v6JE8T-.">
My aim here was to let Arun compare different models which could be done better by placing the items along a single dimension (vertical or horizontal). Given the number of items and the device width, vertical view was more suited for my case. Hence I chose it.
3. Bike details page to help Arun make an informed choice
<img alt="" src="https://cdn-images-1.medium.com/max/668/0*1A9kwjrk1g-UZgdr.">
4. Adding accessories.
<img alt="" src="https://cdn-images-1.medium.com/max/748/0*1cD5oMZa4jlI2oKs.">
5. “Review cart” page shows all the items and the details of the booking. The map in the end shows the locations near Arun’s entered pickup.
<img alt="" src="https://cdn-images-1.medium.com/max/685/0*28xncuikQWamypTe.">
6. Choose payment option
<img alt="" src="https://cdn-images-1.medium.com/max/644/0*wkN5PhwIpdtp_jLt.">
7. Booking success page
<img alt="" src="https://cdn-images-1.medium.com/max/637/0*gjdcLTCwbHmsn0O0.">
8. Home screen after a booking is made and a trip is upcoming
<img alt="" src="https://cdn-images-1.medium.com/max/739/0*jjTT_pWhC73AxrOy.">
<h3>Defining the UI style</h3>
To identify what all UI elements I needed to design, I listed them down in <a href="https://docs.google.com/document/d/1GNDI_R7kYC20qx5UwHdwyrVHg07Uk_estiv1Q_hUWAk/edit?usp=sharing">a doc</a>.
As the app targets leisure biking enthusiasts who love adventure and energy, the UI of the app needed to reflect energy and adventure. Styles were supposed to be dynamic and the colors vibrant to complement the user experience.
<h3>Color choice</h3>
I decided to use Tomato (#FF6347) as the app’s primary color as it represents the warmth and energy of Orange.
As <a href="https://www.thoughtco.com/">thoughtco.com</a> puts it: “Use this shade of red to gain attention and infuse a page with energy without being overly stimulating.”
However, when I actually used the color and tested the experience on my phone, I found the color to be overly vibrant thus making it difficult to focus on the content. Thus, I reduced its saturation and ended up with (#FF7961) as the primary color.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*5vdlUsQEbx9Spuno.">
<h3>Font selection</h3>
Although the core of the app is freedom and energy, I abstained from using freehand fonts because the app aimed for task completion and was supposed to provide maximum readability. The font needed not be too straight and pointy but should also not be too rounded. I proactively avoided serif fonts as they represent sophistication which was not the core idea here.
On googling Google fonts, the font combination that seemed to fit the requirements best was Sintony as display font and Open Sans as body font. Where Sintony’s freely cut edges and slightly square structure represent ease and freedom, a perfect combination to represent youth, Open Sans has a neutral and friendly appearance, and was thus good for the body font.
<h3>UI design</h3>
With all the wireframes decided and styles in place, I designed the UI of the app.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*KkDQQXW1dfblSRDm."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*DQVGEeNA2rHqTAuA."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*I4uto_wObjU25IbR."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*NMHz-RBsqJyh-HAo."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*nm2M41kSXZNtsYU-."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*LLqeg2a2Z53n-hUp."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ddahZYqkcKzLr8Al."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*refG83hfTa8gcXEK.">
And using Invision, I compiled all the screens into a presentable prototype.
<a href="https://invis.io/3BFCH0UNQXY">Click here to view the project `Giri-Bike rent`</a>
<h3>Pointers for further thinking</h3>
Although it appears that this was a lot of work (and it indeed WAS a lot of work), we are just scratching the surface here. While designing this app, I made a number of assumptions (e.g. Arun can be trusted enough that we don’t need him to deposit a security amount before taking the bike), and omitted a number of cases (e.g. what if Arun gets late in dropping off the bike). You can use these loopholes to build further on this design.
Also, one of my goals these days is to deepen my thinking skills. This exercise is an attempt towards that. I would love to know your thoughts on how I can design better experiences.
I was able to complete this project only because a few people were there to help whenever I was stuck. So, I’ll thank them for their efforts here:
Thank you, <a href="https://dribbble.com/ideawebme">Vasudha</a> for motivating me to complete this project when I was stuck. Thank you, Supriyo, <a href="http://agnivasi.com">Agniva Si</a>, <a href="http://nikhilyadav.com">Nikhil Yadav</a>, <a href="https://medium.com/@aks1630287">Akshay Kumawat</a>, and <a href="https://www.linkedin.com/in/amish-bedi-64500359">Amish Bedi </a>for your valuable feedback that helped me improve the app experience. And last but not the least, thanks to <a href="http://dhruvkb.github.io">Dhruv Bhanushali</a> who once again took care of my grammar and vocabulary.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=89f5aaa57dce" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/giri-bike-renting-app-89f5aaa57dce">Giri: Bike renting app</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Giri: Bike renting app

Top Stories