Sup!

Home

About Me

Notes

Speaking

Consultation

Resume

Let's talk 👋

Home

Bud-e Case Study

Behind the Interface: Shaping Bud-e's Mobile App for Urban Commutes

About Company

Bud-e is a leading Hyderabad-based EV two-wheeler maas provider empowering gig workers and redefining urban mobility by providing everyday short-distance commutes by solving first and last-mile connectivity issues with electric, seamless & dockless solutions.

Backed by Suniel Shetty and Vijay Devarakonda

Project Overview

Designing user experience for shared micro-mobility services was a big challenge. It involves an understanding of user behavior & needs and underlying issues to build the right solution for business, market, and end-user.

In this case study I'm going to share my research, the design process that I followed, and my learnings while building the bud-e mobile app.

Industry

Electric Shared Mobility

Role

Product Designer

Project Duration

July 21 - March 2022

Roles & Responsibilities

I'm a part of the core product team where we are building products to redefine urban mobility. On a daily basis, I collaborate with Product Managers and Developers by managing the entire design lifecycle of web & mobile applications in bringing out the products live.

Research & Ideation

Researching and planning the essential features of the product to achieve business goals

Wireframe & Prototype

Building prototypes and testing with real users to reduce the risk of failure

UX Design

Craft a delightful user experience that impress the users from

the first moment.

Developer Handoff

Exporting assets and design specs guidelines to translate designs into working products.

So without further ado, let’s get started🚀!

01. Research

The State of Shared Mobility

I researched to gain a deeper understanding of Insights about users, markets, competitors, and metrics by doing interviews or surveys or asking myself. I have done 4 different types of research as you can see below

Desk Research

It involved in gathering data from existing resources that have already been done

User Research

Understanding user needs, goals behaviors and Problems, obstacles they are facing in the sector

Competitors Research

Learning success & mistakes and finding out good & bad about competitors.

Market Research

Understanding the size of the market, market shares, business models and cost structures

Desk Research

Initially, I started investigating with thorough desk research. I looked at articles, case studies, webinars & discussions where product designers from Ride-Hailing, Bike and auto Taxi, Car Pooling, Bike, and bicycle sharing startups explain about what are the challenges they face & insights, key learning while designing their products.

  • Desk Research 01

  • Desk Research 02

  • Desk Research 03

  • Desk Research 04

  • Desk Research 05

User Research

I explored the situation further with in-depth interviews (IDIs). I prepared a discussion guide and I spoke to 50+ Daily Commuters, who travel from point A to point B using public and other modes of transportation. to develop a greater insight into the challenges they face as well as how people use scooters, and the pros and cons of using them.

  • User Research 05

  • User Research 04

  • User Research 03

  • User Research 02

  • User Research 01

Competitive Research

To find the real pain points, Intentionally I used our competitors & different bike taxi or ride-hailing apps so that I can observe what’s happening with there between a user and an app. This process helped me to detect key issues and develop new solutions and also helped in learn the success and mistakes of competitors

  • Competitive Research 01

  • Competitive Research 02

  • Competitive Research 03

  • Competitive Research 04

  • Competitive Research 05

And also I started analyzing similar apps across the globe, This gave me good insights & understanding of business, Below are some of the companies that I analyzed.

As you can see down below, I gathered a lot of screenshots of different apps and spent a good amount of time analyzing them. The idea was to understand the design patterns & user flows. This is just to show you how my Figma file looked.

Market Research

To dig deeper into research I did market research. Market research is a critical component in the research of a new product or service. The main agenda of market research is to understand the size of the market, market shares, how people's attitudes toward e-scooters and some insight into the reasons people use e-scooters as a means of transport.

Disrupting the public transportation & Car Ownership

Short Distance

0-5 Miles | 60% of Trips in India

Vehicle Rental & Bike Taxi

Medium Distance

5-20 Miles | 25% of Trips in India

Vehicle Rental & Bike Taxi

Long Distance

20+ Miles | 15% of Trips in India

Vehicle Rental & Bike Taxi

Comparision of Shared Mobility Services

Shared Mobility services based on

travel time, cost and privacy

Shared mobility services fill the gap between public and private transportation. In urban areas, shared mobility services helps in relieving the stress on public transit services during peak hours.

http://faculty.iitr.ac.in/~amitfce/pdfs/KathaitAgarwal2021SMIndia.pdf

Shared Mobility B2B Use cases

A number of use cases that drive

growth in the shared mobility

Similar to e-mobility, demand for shared mobility is expected to increase in the next decade, largely driven by B2B Use cases of last-mile delivery for food, grocery, and e-commerce.

McKinsey & Company The unexpected trip: The future of mobility in India beyond COVID-19

02. Information Architecture

User Flow Diagram

I started assembling all the ideas and solutions from the research, and user interviews and created an overall concept and user flows/roadmaps/journeys/ Once the user journey had been established, I started to unpack the design flow for general and specific use cases.

03. Sketches

Conceptualization and Sketching

After finding out the basic requirements from product managers & reading the assigned user stories. Sketching helped me quickly get an overview of page structure and layouts.

  • Wireframes 01

  • Wireframes 02

  • Wireframes 03

04. Design System

UI Style Guide

In order to optimize our designs and bring consistency across all products, I created a design language system Solv. Our design system ensures better design collaboration between teams and able to welcome upcoming innovations without disrupting the existing experiences

Methodology

The explore for a methodology to craft interface design systems led us to look & follow the Atomic Design methodology by Brad Frost in 2016

The atomic design methodology is composed of five stages working together to create interface design systems. Each stage builds on the previous, acting as an aggregate of items from the preceding stages. By the time you reach the final stage, you have a fully developed design.

Atoms

Molecules

Organisms

Templates

Pages/Screens

Primary Colors

bud-e's color palette has been created to reflect the spirit of our brand. Orange is used across all our communication as an essential element of branding. Black is used primarily for body text and headings, and White is used for screen backgrounds and negative space.

Orange

Orange_500

#FF9C10

Black

Neutral_500

#272D37

White

Neutral_0

#FFFFFF

Secondary Colors

Our secondary colors contain a variety of colors to keep things fresh and interesting. Secondary colors provide more ways to accent and distinguish our product. Each color is selected with the purpose in order to provide meaningful feedback about our products.

Green

Green_500

#0DBD12

Blue

Blue_500

#23B8E6

Red

Red_500

#EF0808

Neutral Colors

Neutral Colors contain multiple tints of grey to efficiently apply them and neutral colors are used as supporting secondary colors in the background, text colors, Inactive states of icons & other components, Dividers & borders, separators, models, etc.,

Neutral_500

Where black is required

#272D37

Neutral_400

Body texts & Component Description

#36414C

Neutral_300

Inactive states of Icon & Other Components

#66737F

Neutral_200

Default texts in text filed, disabled buttons

#8F9CA9

Neutral_100

Dividers, Borders & Seperators

#D5DDE5

Neutral_50

Light Background for cards

#EEF2F6

Typography

Our typography, the most important medium of communication in our platform, needs to be perfectly legible to convey the core value of our brand. and Our typography guidelines ensure that we maximize legibility and maintain visual hierarchy throughout all of our products.

Font Used: Urbanist (Google Font)

Iconography

Icons are of prime importance because customers can be immensely motivated to perform an action by simply looking at an icon. Our icons can be used across the web, iOS, and Android to represent similar concepts.

There will be a line version and a filled version. line version of the icon was used in most cases to visually balance, so more than one can be used when close together. Often, a filled version can be used to represent an action that has been carried out, such as using a filled zone icon when the user selects a zone. You can use color to further increase this interaction and change.

05. Wireframes

Low-Fedilty Wireframes

Wireframes helped us to establish the main information architecture and to focus on functionality rather than on visual appearance. I tested in internally to gather crucial feedback before starting the UI Design.

06. Visual Design

High-Fedilty Wireframes

Users will be able to rent one of Bud-e's electric scooters for the long term. To rent a vehicle, the user just needs to provide LTR Details and submit a request for the doorstep delivery of the vehicle. This makes convenient commuting by keeping vehicles themselves.

After
Before

07. Validating Our Assumptions

Testing the Interfaces & Usability

After preparing the interactive prototypes, It was time to test them. We asked users to perform multiple tasks on the prototypes and gathered detailed information on how they interacted with the product using Maze (Online remote testing tool)

Concept & Idea Validation

Getting feedback on feature ideas and product concepts from target users early on.

Wireframe & Usability Testing

Testing and validating usability across wireframes with users to reduce the risk of failure

Content & Copy Testing

Validating content or copy on things like clarity, tone of voice,

and overall perception.

Feedback & Satisfaction

User surveys act as a source of truth that gives real data & insights for improvements.

  • User Testing 01

  • User Testing 02

  • User Testing 03

  • User Testing 03

  • User Testing 04

  • User Testing 05

During the user testing phase, we collected data from each session, recording and subsequently reanalyzing them upon completion of the workshops

08. Usability Testing

Heatmaps - Eye tracking studies

Heatmaps are generated on all the core screens of bud-e by using the Visual Eyes tool. This tool makes it easy to generate user insights and gives me attention maps and focal areas in the design and insights into which parts of the design are the most and the least engaging, instantly. This helps in organizing the content in a manner that conveys the desired message and leads to desired actions by the user.

Rule of Thumb Testing

The thumb zone is the "safe zone" on a mobile device where thumbs feel the most comfortable when interacting with the screen. Over 60% of users use their mobile devices with a single hand which means just using their thumb. This rule can be taken as a guide to place all the navigation and important clicks in the green zones ensuring good accessibility, efficiently and painlessly resulting in a better experience.

09. Outcomes

The Impact and acheiving success metrics

Bud-e was launched in Sep 2021, that onboarded thousands of users to use bud-e. Receiving almost 90% liking from the people who have used the product, it was a big result compared to similar competitors. Here are some reviews found on the respective platform stores

34%

Increased 34% of active users within the first three months of the app launch.

4.5

Maintained a Play Store rating of 4.5 stars or higher based on user reviews.

5X

Achieved a 5X in new user sign-ups through the referral program within the first six weeks.

10. Conclusion

My Learnings & Takeaways

Not every time a designer gets a golden opportunity to design an end-to-end product with a large user base. I cherish this opportunity which helped me in improving myself as a product designer impacting thousands of people. Here are few key takeaways in the process.

Being in a small and close team allowed me to have a voice in every part of the product– from overall product direction and ideation, to maintaining strong communications with our development team.

Balancing pace and perfection

Balancing speed and attention to detail was crucial in the fast-paced project, requiring setting goals and planning with strict timelines.

Receiving feedback and iterating

Consistent engagement with the team and stakeholders for feedback facilitated iterative improvements, ensuring an enhanced user experience.

Cross-functional Collaboration

Collaborating with cross-functional teams, including managers, developers, QA, and marketers, was pivotal in achieving project goals collectively as a product designer.

Thanks for reading it to the end!🙏.

We are done and it looks lovely! and Our development team has worked over the past months to elevate these experiences for you. we hope you enjoyed going through this project. :) If you have any feedback on app design and presentation, we are all ears.

Note: I (Guruprakash Adimulam) was the sole product designer on the project and handled everything from start to finish along with other people. I thank Surya, Chandra, Adi, Dileep & Mahender for giving me the opportunity and mentorship to create this truly magical experience. Also, kudos to all the product, engineering, business & marketing teams.

Read Other Case Studies

NxtBytes • Edtech • Mobile App

From Bytes to Brilliance: How NxtBytes Simplifies Learning for India's Next Generation.

Led the design of a mobile app to revolutionize the learning experience for Intensive 3.0 and Academy courses, integrating short-form content like videos and quizzes.

NIAT • Edtech • Landing Page

Unlocking Conversion: Designing & Developing NIAT's Landing Page Using Framer.

Oversaw end-to-end project and guided junior designers for NIAT's project, India's leading institute for computer science education, offering a 4-year on-campus course.

Want to work together?

Feel free to reach out for collaborations, inquiries, or just to say hello.

Let's Connect! →

Let's Be Friends

Feel Free to Hit Me Up!

I always enjoyed product discussions and If you’re a startup founder or PM/Growth person and interested to chat! Hit me up on any social media platforms.

LinkedIn

Work Experience

X (Twitter)

Random Thoughts

Instagram

What I'm Upto

Medium

Articles & Case Studies

Dribbble

Design Experiments

Email

guruprakash43@gmail.com

Crafted with ❤️ on Framer, All Rights Reserved © 2025 Guruprakash.