Bikepump App
Taking a product from 0 to 1
THE COMPANY
Griffy aims to change the advertising world with the Pump, a technologically advanced bike wheel that displays digital ads.
ROLE
Design Strategy, App Architecture, Interaction Design, Task Flows, Wireframing, UI/Visual Design, IllustrationBACKGROUND
Consider how advertising has changed in the digital age. Ads can be targeted based on your demographic, location, and even the time of day. Digital ads have permeated the real world bringing intelligent delivery to a range of surfaces. The classic bus stop ad, for example, can advertise coffee in the morning, and sandwiches in the afternoon.
Now imagine you’re a delivery cyclist in NYC, working with Uber Eats, Relay, and Caviar. Every day you zip through traffic and pass by thousands of pedestrians as you make your next delivery.
Mix these two things together and you have a perfect opportunity: in-motion advertising delivered intelligently based on real-time geography, and a new way for delivery cyclists to make money.
Introducing Bikepump
Bikepump is an iOS app that connects a user’s phone to the Pump (a wheel with a digital display). When the cyclist bikes faster than 5mph, they enter “Pump Time”: ads loaded from the app are displayed onto the cyclist's wheel, and in turn, the cyclist earns money (Figure 1).
The app is more than an instrument that streams ads. Bikepump allows users to track their Pump Time, Ride Time, and Weekly Earnings. Each week, the app will pay cyclists for the time they displayed ads.
Additionally, cyclists can use the app to manage their wheel and view historical information about their earnings.
I was hired by Griffy to design the Bikepump app.
Figure 1: Demonstration of how the app works with the Pump.
Process
PHASE 1: DISCOVERY
NYC has tens of thousands of cyclists working for companies like Seamless and Caviar. Every day, those cyclists dart around the city, satisfying New Yorkers’ ongoing need for burgers in an instant. Many them use multiple delivery apps, but we wondered: would they be willing to use another app while working? And would they ride enough throughout the day to display a meaningful quantity of ads with the Pump?
Griffy wanted to understand product feasibility and their potential user base, so we conducted a test using an app that would track delivery cyclist data. The test was followed with a survey and with user interviews to understand the data, to contextualize user behavior, and to help the Griffy team empathize with the experience of using the app each day.
FEASIBILITY OF PRODUCT
Through this research, we learned that the wheel, and the idea of making money with it, was appealing to delivery cyclists. We validated that cyclists are willing to use another app while working. In terms of time ridden daily, this was dependent on whether the cyclist was a full or part time cyclist. Those that were full time could ride 8+ hours each day, which made us realize that we would need to target and qualify cyclists that would be fit to receive a Pump and use the product.
We gained empathy for the challenges cyclists face: they can work long days completing deliveries, but pay depends on the hour of the day, the season, and the number of delivery cyclists that are working at the same time. We uncovered an additional benefit: a large pain point for cyclists was safety– they feared being hit by a car or hitting pedestrians that didn’t see them coming. The Bikepump wheel brings attention to the rider through its lights and colors, helping with visibility.
After completing the interviews, I distilled the user findings into a Value Proposition Canvas to facilitate a clear understanding of the product offering and how it can address specific user needs and pain points (Figure 2).
Figure 2: Value Proposition Canvas
PHASE 2: DESIGN & ADDRESSING USER NEEDS
Using the Value Proposition Canvas and user insights as a guide, I began designing the product. I’ll outline how different needs were addressed in select parts of the product below.
HOME PAGE
INSIGHT: We had a two key insights that impacted the design of the Home Page.- Our app competed for user attention - Cyclists used multiple apps daily, so participants forgot to turn ours on and did not look at it often.
- It wasn’t clear when our app was tracking a user’s ride - Sometimes the app would freeze or appear to be working, but no data would be tracked.
GOAL: Make the Home Page simple and focused
ANSWER: Users would not be looking at our app much during their rides, so when they did they needed to understand these details at a glance:
- Ride Tracking - Users understand that the app is tracking their ride and paying them for it.
- Pump Connection - Users can quickly see that the wheel is connected, and is displaying ads.
All other information outside of these two details would be secondary, and accessed if necessary but not part of the focus of the Home Page.
Figure 3: Home Page
EARNINGS PAGE
INSIGHT: Cyclists are excited to earn with Bikepump, as it acts as a bonus on top of their regular income. Some requested to be paid more for riding more hours, however with Bikepump, cyclists can only be paid for the time they play ads, and ads can only play if a user is in Pump Time.
GOAL: The Earnings Page should clearly communicate how much a user has made, and how payment was calculated.
ANSWER: The Earnings Page focuses the user on their Current Earnings, associated Pump Time, and Payment Date (Figure 4). If users want additional information, they can see a historical view of earnings and a log of each week where their Earnings, Ride Time, and Pump Time are broken down by day.
Figure 4: Earnings Page
IN PRODUCT MESSAGING
INSIGHT: During testing, we learned that participants would actively turn off the app so it would stop tracking. From interviews, we learned that they didn’t fully trust Griffy because and had concerns over how their location information was being used.
GOAL: To enable trust, offer transparency to show how the system works and why the app needs specific permissions.
ANSWER: There are two key areas where messaging is important in the application:
- Onboarding - When first using the application, educate users in how the system works as a whole, and why Bikepump needs specific information to ease concerns. (Figure 5)
- Scenario-based Messaging - Explain to the user if there are any issues such as location access or bluetooth being disabled, and why the product needs them to work. (Figure 6)
Figure 5: Onboarding messaging on permissions
Figure 6: Scenario-based Messaging on permissions
PHASE 3: PRODUCTION
After designing the core experience, I created several deliverables to communicate ideas and product direction to stakeholders.
FLOWS
A wireflow was used to display how the parts of the app worked together and addressed core goals (Figure 7). An interaction flowchart was created in collaboration with our engineer to ensure the design worked within the constraints of the hardware used, and acted as a blueprint to define additional required flows (Figure 8).Figure 7: Wireflow of the core experience
Figure 8: Interaction Flowchart
PROTOTYPE
Once functional details were finalized, I created high-fidelity mocks and an interactive Figma prototype to communicate the core flow and expected experience for our engineer to begin building (Figure 9).This prototype would help convey what the app would look like when a wheel is connecting, when various ads are loaded to the app, and how the user would navigate to find information on their Earnings History, Pump, and Account Settings.
Click anywhere on the prototype to try it out. →
REFLECTION
Bikepump provided an interesting challenge in balancing technical limitations of a hardware with the design of a mobile app. It’ll be hard to gauge the overall user experience until both the Pump and app are fully developed, but I look forward to seeing how the product develops and how it evolves with the changing world around us. This is just the beginning for Bikepump, and there will surely be many challenges ahead.Overall, this project was a fulfilling experience, and I enjoyed providing product direction for an early stage startup with a unique idea.