Within this project:

Redbike

responsive ecommerce website
UX/UI Design, Branding
Project Overview
Redbike has been a staple in it's home cities cycling scene since the 60’s and is a family run business. In recent years, the company had moved into the hands of Brett and Tom Weller from their father, Myles. Though sales have remained somewhat strong, Brett and Tom both felt it was time for the company to give their website and brand a complete overhaul to match their newly renovated store. The current website features a catalogue of bike parts, which they wanted to retain, as well as adding in their apparel which they have on site as well as be able to feature fun events they have begun hosting at the shop.
My Contributions
Being that Redbike is such a well known local brand, I wanted to ensure wI was treading carefully when recreating a brand new online experience and brand for them. My goal for the website was a fresh, new look with a focus on drawing in the community, increasing online sales and making new riders feel extremely welcome and comfortable.

A main new feature for the site would be an in-depth and interactive events calendar as the shop planned to move from simply another bike shop to a community gathering space.
view prototype
Research
Competitive Analysis
user interviews
data synthesis
persona creation
Empathy Mapping
storyboarding
Though the idea of an eCommerce site for a cycling shop isn't a new one, the overall style and tone as well as audience that Redbike was looking to draw in was somewhat revolutionary. Part bike shop, part social scene, I needed to make sure all bases were covered. My research would not only solidify the basics for our cataloging style and product pages, but also help to determine where exactly our crossover was going to lie between cycling enthusiasts and the new social side of Redbike.
Research Goals
  • What is the main goal that a user is  looking to achieve when visiting the current Redbike website?
  • In what ways can we improve on the current catalogue experience of users as they shop?
  • What information about bicycles is most important to users when shopping?
  • What is the best way to incorporate fun events and a new brand without alienating Redbike’s current loyal customer base?
  • What is the most enticing way to list events so as to be clear who is best suited to each?
  • What might incentivize/dissuade someone from going to a bike shop?
    [ click thumbnails to expand ]
User Interviews & Personas
During interviews it didn't take me long to recognize that we were dealing with two vastly different users: the social rider and the competitive rider. Each presented with their own wants and needs in an online experience of a bike shop, and while I wanted to ensure the final design was appealing, I knew that the social rider was best suited to the new market that the owners of Redbike were looking to capture and so while we synthesized data onboth persona types, the majority of design decision making would be based on our social rider persona, Simon.
Make it easy
It should be crystal clear how quick, easy and reliable Redbike service is
Show skill levels
Whether they're pros of newbies, it's clear users want to stick totheir own skill level when it
The more the better
The events calendar should be as robust as possible, and ideally include local events as well as shop events.
Approachability is key
We want the new brand and messaging to convey how approachable, knowledgeable and helpful Redbike staff are.
Summary
My research really solidified our two separate audiences and also gave us some specific insight into what users want to see when it comes to events: details on should be attending. No one wants to feel out of place, and our social riders were especially apprehensive to end up at a competitive or high level cycling event when all they want is a causal ride and some live music!
Information Architecture
sitemap
The current Rebike website hosts hundreds of products which I would need to possibly reorder in the most efficient and user friendly way possible, as well as including our new event calendar.
Sitemap
With the feature map completed, there were of course several ways to include them within the app. A sitemap was created to provide direction during wireframing and mockup designs.
[ click thumbnails to expand ]
Interaction Design
user flows
task flow
Low fidelity wireframes
Now that information architecture was firmly in place, I was able to confidently move forward with fleshing out the more detailed flow of the app as well as dive into initial responsive wireframes.
Low Fidelity Wireframes
Having completed research and organization of our features, I moved into the basic rough structuring of the site. Knowing that our focus was user flows and simplicity, these wireframes were created as an MVP for initial user testings.
[ click thumbnails to expand ]
User Interface
logo design
brand identity
Style tile
Mid fidelity mockups
high fidelity mockups
prototype
Skincare and skin issues are an extremely personal thing. Knowing this, great care was placed into the positioning of the Clariant brand and overall feel of the app. Cleanliness, health, nature, expertise and approachability all needed to come across in a compact, efficient and clean design.
The Brand
Throughout our research both with exisiting clients, potential new clients as well as the owners themselves, it became quite clear to me that the main feelings the new Redbike brand should emulate are community and trust. Everyone is welcome, there is something for you here, and we'd love to have you.

The logo about uses a custom typographical word mark based on the Century Gothic font in all lower case to further emphasize how approachable the brand is. The period at the end gives the name some finality and strength, saying the brand knows what it's doing. Trust them.
The Style Tile
While exploring styles for Redbike the main brand color was painfully obvious: red. I chose a slightly muted fire engine red and added in additional tone related primary colors. Buttons are rounded in a friendly manner and round sans serif fonts.

Through simple clean imagery surrounded by primary colors, the Redbike brand now evokes feelings of being at ease and simple intelligence.
High Fidelity Mockups
Combining the responsive wireframes with the created style tile and new logo resulted in a bright, beautiful new product that is easy to navigate and user friendly.
[ click thumbnails to expand ]
The Calendar
Being a new feature to the website and one that the stakeholders in the project were wanting to become a mainstay within their community, the Event Calendar was given special care, especially since it was going to be holding a lot of information that needed to be efficiently displayed. The initial desktop wireframe was created, converted to a high fidelity mockup and tested and show some slight hesitation from users as well as presented a less than ideal sizing situation. The layout was reworked, resized and retested to a much better result and was then converted to a new format for mobile.
[ click thumbnails to expand ]
Prototype
The Redbike prototype was created in desktop format in Invision.
view prototype
Usability
user testing
data synthesis
affinity mapping
I had two main focuses for user testing, which were both the purchase flow as well as navigating the event calendar. Even the slightest of hesitations were noted as the ease of UX across the site was imperative in not only the success of the product but fitting the overall brand your brand.
Affinity Mapping
Through final user testing additional notes were created and synthesized into an affinity map for further iteration. Once priority revisions were complete, the project would be moved through the export process via Zeplin for development.
[ click thumbnail to expand ]
Conclusion
Redbike has been a staple init's community for countless years, and with a refreshed user friendly brand, website and event platform they'll continue to be so for many years to come
← previous project
next project →
Looking for a designer for an upcoming project?
Work with me
Above all, always

iterate.

iterate.

iterate.

iterate.

iterate.

iterate.

iterate.

iterate.

Interested in working together?
I'd love to hear from you.

Whether it's a new freelance project, a possible contract or a position, I'm always interested in connecting and hearing about new ventures, ideas and possibilities.

Woohoo! Talk soon!
Oops! Something went wrong while submitting the form.