Cycle Garden is a small garage in Indio, CA, that services and does restorations of pre-1975 Moto Guzzi motorcycles. They also sell parts online, but it took me over 10 minutes to figure out how to find one and purchase it—making it a prime candidate for our class’s second project, which was to find (and fix) an e-commerce website with functionality issues.
TASK ANALYSIS
I tapped three of my motorcycling friends to pretend to purchase a clutch lever on the Cycle Garden site; all of them experienced the same confusion and frustration that I did, with two of them ultimately—and independently—opening up new browser windows in exasperation to show me how their favorite parts site was so much better.
COMPETITIVE ANALYSIS, CARD SORTING
I performed a competitive analysis of the three largest online Moto Guzzi parts sites, and found that each one used a completely different navigational hierarchy from each other to get you to a particular part(!). I then asked the same friends to perform an open card sort to see how they would categorize the parts of a motorcycle. There was no agreement there, either, so I went with the solution from the one who had the most experience servicing bikes to use in my redesign.
PERSONAS, PROBLEM STATEMENTS
Based on interviews I did with my friends, I created 2 different personas and problem statements, each reflecting real-life issues for typical Moto Guzzi owners.
WIREFRAMES, USABILITY TESTING
I created low-fidelity wireframes for two different task flows, prototyped them, and then ran a usability test on my friends. While they each pointed out aspects of the design that they felt could be refined—as well as those that worked—they all agreed that my redesign was far easier to use.
RESPONSIVE DESIGN, DEVELOPER PREP
The next step was to create 5 high-fidelity desktop screen comps with their corresponding mobile screens, incorporating revisions derived from the wireframe usability test. Along with responsive design, the priority for this step was preparing our Sketch file to hand off to a developer by making extensive use of symbols and text styles, limiting ourselves to 3–5 typefaces, optimizing any placed images, and creating a Zeplin stylesheet.
DESIGN
While the only design cues I took from the existing site was using Futura exclusively on every screen but the home screen, the visual framework of the site was inspired by the parts tables from the original manuals that came with the vintage bikes that Cycle Garden services, along with some hints of the Moto Guzzi brand.
My primary goal with this class project was to improve the navigation of the current Cycle Garden website. I also hoped to create a more polished design for the site, since it seems like they do really good work there. I’m not sure whether Moe would agree or not, but everyone else who’s seen it thinks I did.