Free Range Cycles

A a client ask that started in socks, and ended up as a website. 

Timeframe: November-December 2020
Team Member: Carol Camilleri (UX researcher and writer)

  • Designer
  • Illustrator
  • Researcher

  • Design
  • Adobe Illustrator
  • Adobe Photoshop
  • Figma
  • Illustration
  • Customer Research

Objective 1:

Design a matching cycling cap and sock set

Ok, for some background on this: This was the initial ask, just a set of socks and a cycling cap (it’s not called a hat) that matched. Nothing else!

• Must appeal to full spectrum of Free Range Customers
• Be an illustration in “My Style”
• Contain elements suggesting “Free Range” “Farm” and “Bicycles”
• Look very 80’s with weird shapes and squiggles
• Not cost a fortune
• Meet the vendors specifications and requirements
Finshed Cap
Just a big ol’ pile of printed fabric

Objective 2:

Redesign their website

While working on the socks and caps, everytime I visited their site I kind of died a little inside. It was bad. It was not helping them at all. Finally, I got the courage to say something, but the owner beat me too it.

Paired up with a customer who is a UX researcher (the amazing Carol Camilleri, who had similarly noted the site), we worked to create a much more successful web experience.

This was the existing website
For the website redesign the primary goals were:
  • Reduce the volume of emails and phone calls
  • Reduce duration of time customers are in-store
  • Integrate social media
  • Make it look better
Wireframes baby!

Knowing what the shop wanted, we began with researching who the customers were, and what they wanted from a website.

Starting on designing the site we focused first navigation, having a section for repair, purchasing bikes, social media, contact, and FAQ’s.
Carol took the lead in contact, and had an amazing insight in turning that into a total flow of the site: by filtering what the customer wants to know and leading them to an answer or sending them to a form to email the shop and have filtered for the shop in regards to what topic the inquiry is.
Meanwhile I organized the pages, found content, and made a style to use for the site.
After several iterations protyping we found a good direction, and presented to the owner what it would look like. Her feedback wasn’t concern over the design and research, but that she wanted to make sure she could actually touch the website and make changes if she needed to. This made a slight change to our design, but ended up saving everyone some time and money, we ended up setting up a Squarespace for her, as it allows her to make simple edits without any code, is affordable, integrates social well, and didn’t kill Carol when she was integrating the plug-in for the contact form (but got close.)

When doing user testing we had some great (and sometimes humourous) insights from the folks trying out the site, with feedback such as:

In regards to navigation:
  • Several users went back to the page that had linked them there to ensure they had clicked the correct thing
  • “Didn’t expect that the get in touch would send to contact page. I always try to send the message to the right person. “
  • Users did not experience this with the yellow get in touch buttons at the bottom
  • This should be resolved by having the blue buttons generate the contact form popup on the same page that users are currently on (e.g., service, test ride etc.)  
General insights:
  • A specific mention of ebikes should be included / and their ability to service them
  • The vegetarians interviewed disliked that names the chicken and the beef for tunes ups.
  • Ensure that the email address and phone numbers are listed as mailto links and instant dial links, so that users don’t have to type them in.
  • Folx though there were places where that was too much white space on the title page.
  • The language of flicking an email should be changed. It confused two people.

On the repair service menu:
  • Users need more about what is in each tune up, several users read the parts cots as the full cost, many were confused by the two costs.
  • “The chicken wut? I’m confused by the chicken. It tells me that it’s $140 but it’s also an extra $90. I don’t know what the difference between the common and beef. It seems really expensive, but I haven’t gotten an actual tune up for full price [since my partner is a mechanic].”
  • “Under the chicken and the beef, it sounds to me like there’s $90 on top of 140 and now I don’t know how much is exactly in the tune up”
  • Users also wanted an indication of what smaller repairs might cost, for example a derailleur adjustment.

Cargo Collective 2017 — Frogtown, Los Angeles