COQUI CYCLERY BIKE PURCHASING:
FULL DESIGN PROCESS
AND COLLABORATION PROJECT
Abbey (my partner) and I worked on Coqui Cyclery, a website with a frog mascot that sells a variety of different brands and types of bikes. We chose this website because at first glance it was very messy, hard to navigate, and confusing, so we put our heads together and decided on how to fix it.
Part 1. The Problem
Abbey and I quickly realized that the website was not navigable from a user's perspective, and there were some customer complaints about the online store's layout.
My "How Might We" statement: How might we create a more informative and clear website for new or experienced bikers who wish to have as much relevant information as possible before buying a bike?
We decided to make the website more persona-specific, meaning we wanted to cater to new and experienced bikers by addressing specific needs for each demographic.
Abbey's "How Might We" statement: How might we make it clear that Coqui Cyclery is a shop that sells the specific brands in their shop and how can we make the ones they carry visible and buyable on their website rather than redirecting you to the brand specific websites and not letting you buy it from them online?
We realized based on this statement that the website redirected you to the brand’s specific website, rather than letting you buy a bike from the Coqui Cyclery website; this makes Coqui’s website somewhat misleading, so we decided to add what bikes they specifically carry as well.
First, we created user personas in order to determine the most common demographics in Richmond, Virginia that likely use Coqui's website. My user persona is on the top and Abbey's is on the bottom:
Part 2. Our Sketches:
Abbey and I created two sketches each and collectively decided to combine sketch #2 of mine and sketch #1 of hers.
In our summary for our sketches, we stated: “Now we have the website set up in such a way that you can tell that the brands can be clicked on. In addition, once you click the brand, rather than taking you to the brand's website, it now keeps you on the Coqui Cyclery website and shows you what they carry from that specific brand that you clicked and whether it’s used or new. This would all vary based on location as well. Overall this should be more user friendly and straightforward rather than messy and confusing.” We then made a wireframe out of our two sketches combined.
Images in order from top to bottom: My sketch, Abbey's sketch, and our combined sketch.
Part 3. The Prototype
For Part 3, we decided instead of clicking on the brand and taking you to all bikes within that brand, for each brand you click there will be a drop-down for every type of bike from that brand; this will ensure that your search can be more easily narrowed down.
The summary of the prototype states: “We ended up reworking the wireframe a bit, so that instead of the brands being on the second page, they’re only on the first page so that the user can choose a specific brand. In the pictures, you notice that the user chose the brand Giant; a drop-down pops up where the user can choose what types of bikes Coqui Cyclery is carrying from Giant. In this instance, the user chose road bikes, and the next page shows the new and used road bikes from Giant that Coqui Cyclery carries. Once the user picks the bike of their choosing, it directs to the next page with more specific information about the bike and the option to purchase it. It’s simple, sleek, and informative.” Our last edit we made was adding a dropdown filtering option on the Bikes page in order to help customers sort by what type of bikes they are looking for based on price and experience level.
Below is our final prototype user flow for a new bike purchasing process:
Conclusion
Overall, what we took away from this experience is that the more simplified and direct your website can be, the better. Creating personas helped us make a website for different types of people, from experienced, to beginners, to fast-paced shoppers. From the persona data we created, as well as inspecting the current website, we were able to simplify the website and make it less cluttered and confusing to any customer, as well as more useful to Coqui Cyclery as a store. We were also able to make it a more personalized website to these personas and add specific elements such as “rated best beginner bike” in order to direct those familiar with biking or those who are less familiar to some top choices to guide their purchasing journey.
