Svper Cycling

Highlights from automated cycling route app

Web, Generative AI, Ads, Design System, Brand

Summary

When I couldn't find a cycling app that did what I wanted, I decided to build it myself. After recruiting another like-minded enthusiast, we set out to create Svper. We have a functioning beta version of the app which I've user tested extensively with early access users. Shown below are some design highlights. As with any business, the function of design was to rapidly learn and create something people love. Since this is a new project, design efforts also focused on filling the top of the funnel.

Team

Full-Stack Developer

Role

Product Design, CEO, Product Manager, F-E Developer

Impact

Found and recruited enthusiast to work with me for free
Drove 375+ early access sign-ups with <$100
Achieved $0.29 cost to acquire (CAC)

Web App

The key differentiator of Svper is its ability to automatically create routes with just a starting location and distance. The fixes two core issue with route planning app: 1) cyclists want to spend time riding not planning and 2) if you don't know where to put pins, the algorithms will force you onto unsuitable paths. Below is the result of many product design iterations based on surveys, interviews, and user tests.

View Figma prototype

More control over the type of route you want
More options for routes, not limited to poor heatmap data
No nonsense UI that gets quickly to what the user wants

Paid Ads

After experimenting with recruiting users from various forums, I was convinced this was something people other than myself want. With only $100, I was able to get 341 early access signups. These signups were further validation of product's potential, unit economics, acquisition channel, among other things.

The two most successful ads

Landing Page

Using the low-code tool Webflow, I built the website from scratch to generate early access signups. I created the images in the hero section's live carousel using the generative AI tool Midjourney. I also experimented with ChatGPT to organize the page and provide ideas for highlighting relevant features. Checkout the website to see the AI generated images and feel the nice scroll effects on the images.

View svpercycling.com

Svper's website homepage

Design System

Design systems create the foundation for clean, organized, scalable product design, let alone efficiency gains, and cost savings with implementation. Below are a few assets from the Figma library I created for Svper.

Svper's typography and type pairings
Svper's color palatte
An example of one Svper component

Brand Assets

Since Svper is a personal project, I also use it as an avenue to explore new tools, techniques, and styles. Based on survey responses, changes in cycling culture with gravel and crit racing, and my own desire, I decided to take a slightly funky and alternative approach the brand. Below are some experiments with the Svper logo using generative AI.

Svper's logo generative AI experiments

Other Acquisition Channels

Blog

I set-up a blog as a free acquisition channel and to practice my writing skills. I enjoy experimenting with content creation for Svper whether it's blogging, photography for instagram, or videography and story telling for Tiktok.

The blog hompage
A blog post

SEO Landing Pages

Since Svper generates routes algorithmically, independent of a heat map, we have an interesting opportunity to acquire users using SEO landing pages. Rather than competing with other products for SEO positioning of the best routes in major cities, we can automatically create routes for all non-major cities and rural towns. This let's us capture the very long tail of cyclists in locations outside of the biggest cities.

An example of an SEO landing page

Impact

Found and recruited enthusiast to work with me for free
Drove 375+ early access sign-ups with <$100
Achieved $0.29 cost to acquire (CAC)

Next Project

Y Combinator biotech startup highlights-->