Trashin App -Book and Schedule your trash pickup- UI/UX Case study
In this case study, I will take you through my process of designing an MVP for a bigger cause.
But first, let me tell you one small story. A few months back I decided to change my career and follow my interest in design and build up skills to make myself ready to take on real projects as a UI/UX designer.
I started putting out some designs that I recreated or some concept app screens as well as few bite-sized tips, on Instagram, that I thought would make sense to people who are just starting in design.
I actively started looking out for opportunities on various social platforms. After 2–3 days of searching I finally got on a call with one client who was looking for someone like me and they were quite satisfied with how I explained my design process to them. So they agreed to have me as a product designer role (freelance) for their idea. Yes! My first UI/UX project in just a few months of active learning and practicing.
So, let me take you through the whole process of how I designed the app from scratch.
What is Trashin?
Trashin is a cloud-based platform that connects waste generators directly with waste collectors. At one end, it helps waste generators get better prices and ensure consistent demand, and on the other end, help waste collectors source higher volumes of segregated raw material for recycling at competitive prices.
The waste sources can be of any type; such as Individual, Bulk Waste Generator (Offices, Malls), Ragpicker, Supplier (aggregator), etc.
Why did I work on this?
Waste management is the first step towards sustainable development. My thoughts resonated with the Idea of this Startup and therefore I decided to take upon this project.
Core Problem
- Over 377 million urban people live in 7,935 towns and cities and generate 62 million tonnes of municipal solid waste per annum. Only 43 million tonnes (MT) of the waste is collected, 11.9 MT is treated and 31 MT is dumped in landfill sites.
- The current system of waste recycling is majorly based on land-fills, also it is not suitable to handle bulky waste such as furniture, E-waste, etc. The existing service is not consistent. Almost all municipal authorities deposit solid waste at a dump yard within or outside the city haphazardly.
Something becomes waste when it doesn’t have a use anymore, therefore, Trashin creates demand for dry waste by setting up supply chains for recycling. All the litter you see around you will not remain if it has sufficient demand, thereby incentivizing waste collectors to collect more
The core problem here is to design a user-friendly platform that is scalable to Industries (Small and medium-sized), FMCG brands, Local governments, Retail Companies, Housing/Real Estate Companies, Facility Management Services, Offices/Tech Parks, Apartments/ Communities, Individuals. Where people can book pickup vehicles according to the amount of weight of trash they have.
In the app, users can book trash pickup, schedule, and also live track of the vehicle for better communication and smooth handover of the trash for proper segregating and recycling of the waste.
Research
I used Double diamond design model that is divided into 4 phases:
- Discovery- insights into the problem
- Define- the area to focus upon
- Development- of potential solutions
- Delivery- solution that works
So before jumping right into designing the app I researched about other apps which follow similar patterns of
- Booking a vehicle
- Scheduling
- Live tracking the vehicle
Sounds familiar right? Yes, two big brands we all know Uber and Ola. And because I have used them both I was pretty familiar with how is the user experience of these apps. To put an extra effort into my research I also looked for some other apps related to maps and navigation to get a better idea of the user flows and open up my scope for different apps based on similar patterns.
I deeply studied other apps such as-
- Lugg- Schedule movers and trucks for moving your furniture and all your house stuff if you want to shift to another place.
- Lyft- Another app to book cabs
So, I analyzed how these apps to do certain flows such as
- Onboarding
- Home screen
- How they show different choices for vehicles and show prices
- Inbuilt payment options
- Feedback
- Booking/Order summary screen
- Nav menu and much more
After the analysis and understanding of the core problem and knowing that the app will be having a diverse user base. I concluded that Clean UI, light color scheme, clear call to action, simple user flow will be the main focus points. Because the app would be used by very diverse users therefore it will have to be designed in such a way that it will be easy for everyone to perform the action/function for which the platform is designed.
User flow
User Flows are flowchart diagrams that explain the different processes involved in accomplishing a task from your MVP. It lays out steps & actions in a particular order and sequence that the user needs to undertake to get to the end of the task.
After investigating a few apps I pretty much got an idea of how should the flow of app work. So, I went ahead and started laying down the user flow of the whole app. This is the stage where I define how the user of the app will be interacting with different options in the UI while using the application.
So after a lot of brainstorming, I designed the main user flow.
Wireframing
Wireframe sketching is the first step where you translate written matter into its visual layout. They are low fidelity in nature and does not contain an actual copy. They help you to decide the visual layout by placing appropriate UI elements and sizing them accordingly.
I prefer using pen and paper to sketch out my ideas in form of wireframes rather than using digital tools as it is a faster way to brainstorm ideas where you can try different variations in much less time.
So, next up I designed wireframes for each screen starting from onboarding to the end of the user flow to give my thoughts a visual layout.
Ah yes. I took continuous feedback from my designer friends to iterate and improve my process at every stage.
Visual design
This is the most compelling part of the process yet most comprehensive as you need to decide upon the color palette, typography, so all in all a proper style guide that can represent the brand’s uniqueness and presence.
- Typography
We use just one typeface for Trashin, namely Montserrat.
Montserrat is a geometric sans-serif typeface designed by Argentinian designer Julieta Ulanovsky. The design was inspired by signage from her historical Buenos Aires neighborhood of the same name.
The Montserrat font family has nine weights, extra light, thin, light, regular, medium, semi-bold, bold, extra-bold, and black. The variety of weights further aids its versatility and usability.
Fun and geometric letterforms make this font approachable with a sense of warmth and energy. On the flip-side, it is also refined, strong and highly-legible. Overall, a very versatile typeface.
- Colour palette
I selected primary and secondary colors from the logo to preserve brand integrity.
To make the call to action button visually more appealing I added a subtle gradient to it.
So, let’s dive into visuals.
Onboarding
For onboarding, I decided to show the main use case of the app in 3 different steps with the help of supporting illustrations which I customized to match the color scheme of the application. Up next the user is asked for the location permission.
To make the onboarding more user friendly I added multiple options for signing in and log in.
Home screen and search location
On the home screen when the user enters the location of pick up or can use the floating action button to auto-detect location.
Selecting vehicle
With an easy swipe up gesture, the user can select the vehicle according to the weight of the waste to be handover. Approximated fees are shown to the user as they select a specific vehicle. I used the swpie up gesture to see the vehicle details because, as a user, it is quite easy to reach that part of the screen(lower section) to perform gestures, and also it makes the user interface more interactive.
Scheduling the vehicle
This step includes selecting the preferred date and time slot.
We added a novel feature, where the user can click a picture of the trash so that the agent coming to pick up can get an impression of the weight to be picked up. This is a very unique as well as a beneficial feature of the app.
Live tracking
Live tracking of the agent/ vehicle starts 1 hour before the pickup time. Users can see other details as well including, rating of the agent, phone number, vehicle number, etc.
On arriving at the location, the agent weighs the waste in front of the user and enters the value in his app and clicks confirm. The total billed amount is then shown after the user completes the handover. I wanted to make the handover process joyful for the user, therefore, I decide to make it look visually pleasant so I added some nice illustration and other elements as well.
Feedback and Nav menu screens
Feedback plays an important role in understanding user needs and pain points of the process so that user experience can be improved. For every handover the user completes, redeemable Trashin tokens are rewarded which can be used to purchase merchandise.
This feature will be a part of the next version of the platform along with another feature of measuring impact where users will be able to see how much of the waste they handover is recycled.
Conclusion
- This is my first UX/UI project that I had undertaken. I spent one and a half months working on this project starting from brainstorming to deploying the final prototype and finally making an account of every step in this case study. I also designed the agent side of the application which helped me to think critically both as the customer and the agent for the Trashin.
- This project was to design the MVP(Minimum viable product) for the startup, so there’s a room full of possibilities to be acknowledged ahead.
- I have attained much more confidence in my UI/UX design skills and this will inevitably help me in my career growth.
- Looking at the app as a whole, I am confident that the solutions I came up with, will definitely solve the problem.
