Stay True Cycles

Stay True Cycles

A responsive website for a local favorite, Stay True Cycles. STC is a bike shop that fixes bikes, sells parts, and hosts community rides. The website is targeted at commuters who bike to work and mountain bike hobbyists.

Role: Full Stack UX Designer

Software: WordPress

The Problem

Commuters need affordable and reliable repairs; hobbyists need parts and technical fixes; newcomers, women, and people of color need a more welcoming community.

“He is amazing. He listens to what we need and put in 100% attention to our satisfaction.”

– Anonymous Feedback from STC

Easy Repairs

Users are instantly invited to “fix their bike” with a hero image CTA (call to action). From there, the process is easy: browse popular repairs or the full repair menu, then make contact. All done!

Community Rides

The shop uses community rides to make the bike community more inclusive and inviting. They host them multiple terms per week. We wanted to use this as the the primary way to accomplish their mission of increasing diversity in biking.

Values and Mission

When talking with Nick, STC co-founder, it was quickly obvious that they want to be a force for good in biking — and they’re doing the work to make that happen. I not only wanted to showcase their work, but also use the site as an opportunity to further their impact.

The Process

Client Meeting

In our initial meeting, I interviewed founders Jonah and Nick about STC. Why did they start it? What do they want to accomplish? What makes their shop special? Who are their customers? What do they want from the website?

User Personas

Nick and Jonah know their customers really well, and gave me good insights that I used to design user personas: the commuter, the enthusiast, and the excluded hobbyist

Early Concept Check

We reviewed different biking sites to find what they wanted. They liked the large images and negative space.

Paper Wireframes

I used paper wireframes to quickly iterate on key issues: What is the most useful way to help users find the repair they need? How should community rides be promoted? How can we make the service request easy for everyone? How do we show their values?

Digital Wireframes & Low-Fi Prototype

With paper wireframes done, I used WordPress to actualize the plans from the paper wireframes. My primary focus on this part was accessibility: clear hierarchies and a straightforward user journey. From there, I quickly connected the pages and made it a prototype.

Team Meeting

With this design complete, I set up a zoom call with the STC team to show them the progress. I received valuable feedback on what they liked and what they wanted to change.

Iterating

The main focus of this iteration phase was improving the fix your bike user interface.

Responsive Design

With many of the the pages close to finalized, I switched to mobile design, resizing and reformatting so that users would have the same experience on mobile.

Launch

Before launching, I tested the site for bugs. Then we launched! At this point, users could enjoy the site we built.

Post-Launch Meeting

With a few weeks of user feedback, I met with the STC to hear their customer’s experience and to make changes based on what they would find easier.

Iterating

One of the key pieces of feedback was that some of our older users were getting lost with the large visuals. To address this, I focused on moving more CTAs above the fold.

Final Website

Impact

A More Inclusive Community

Now that STC has the digital presence of a website, they can further fix bikes for a fair price and share their love of riding with community rides. That means more people are going to be out biking!

Increased Traffic for Repairs

With the new website, the STC team was able to get customers through their online presence!

Takeaways and Next Steps

Work with people who care about people

I want my work to have a positive impact on the world, and I want to work with people who are moving in that same direction.

Inclusivity is a day-to-day choice

They choose to host multiple rides per week, to treat everyone with respect every single day. That’s consistency, and it’s helping make the bike world a more diverse place.

Keep iterating

The process never ends. As their shop develops, so will their digital needs. As they get more users, the website will need to accommodate more people. Never stop iterating.