Mountain biking was invented in Marin county, California. Cyclists come from all over the world to bike throughout this epic area. This project is inspired by a locally owned bike shop. This is my first cap stone project for my bootcamp. I want to to design a website for a brick and mortar store. This will be a website to provide an online presence to invite cyclists not only to the area but to the store.
The main goals are to create an online presence, to design a brand logo, and to add a feature to allow users to make reservation for mechanics.
Despite biking a little myself, I have never bought anything in a bike shop so I needed to do some digging to find out what cyclists need. I am passionate for this project because it gives me a chance to help small business. The research participants were chosen from real bike shop customers. I used a survey and posted the links on Facebook groups, and cycling forums in the Marin county area. Some of the questions asked for information about user's shopping habits, what information they want from a website, and the importance of reviews.
"[Reviews are] Pretty important if they are real" Paul, 70.
"4/5 importance. If a shop gets multiple negative reviews on Google/ Yelp, I won’t go there." Tim, 35.
Initially, I felt reviews would be the most important feature but most of the users surveyed did not really find them important. Some said they trust Yelp over a store website's reviews because they are more objective.
The survey also showed me the client's expectations of a store’s website. The most important information to users is hours of operation, and contact information. It also gave me information about the demographics of the end users.
This information is going to help me understand the users and their needs better.
Through this analysis, I learned that most companies did not have bike mechanics on hand. Since this is an important aspect of the customer's experience, I decided to incorporated in Tomales Bay Bike Co.'s website. The surveys revealed that most users wanted to have the option to book online instead of making phone calls I fell that this will present an exciting feature and it will attract a lot of customers. Most information gathered in the analysis was not too different from each cycling company and this was key insight into the needs for users.
I received a lot of input from users regarding what information they would like to see on a website. I synthesized it by meaning and put it through card sorting.This helped me understand the necessary architecture for the site. I learned how to accommodate the information so the users input really shines through.
I realized that users have a lot of opinions. So I broke down the goals for this website to keep myself from feeling overwhelmed. I created this road map to guide me on what is necessary and what to disregard. This is always a way to stay strong and deliver what is needed at each stage. The roadmap guided me towards what is the most relevant information for the time being. Some of the minor details can be added later.
The demographics discovered in the surveys gave me three different personas. I broke the research down into three different categories: Beginner, intermediate, and advanced.
I created a persona for beginner with the name of Johnny, the intermediate is Harold and the advanced is Camila. Their needs were raised through the surveys. Each person that took the survey fit into one of these categories and this research made the personas easy to identify. With this approach, it became clearer on who the end users are and what they are into.
Most of them are avid cyclists, or beginners looking to learn more about cycling. Some are seeking events, looking for new bikes, and looking for a place to bond with other like minded people. Based on the research, I learned how important it is for end users to have access to a repair shop.
From card sorting I created a site map. This is where I apply what I learn from the users input. The structure was designed with their preferences in mind. I wanted things to fit the mental models already established by other sites, so I let the users guide the design. This site map will lead to a navigation flow that feels intuitive to the user because it was almost designed by them.
In order to learn more about how the user will navigate the booking feature I created a task flow. Similar to the sitemap, the task flow gave more insight into the users intuition. I used a step by step process to understand and break down the user's bare necessities. This task flow teaches me to make a strong feature without any extra steps. It also helped me keep in mind how the user is moving through the site.
%402x%20(1).png)
I made these on Excalidraw, these are the base and will contribute to the design of the main pages prototype. The main page keeps all the information easily accessible and gives a taste of what there is in the store.
For the hero image I initially thought of using a photo of new bikes in stock. Then I thought it would be more exciting to put the user in the scene and have them imagine themselves in the video featuring a bike in a Marin trail.
I sketched out the responsive site, starting with mobile to desktop. This helped me understand what constraints there would be as the screens became smaller.
The bike repair feature is meant to let users pick what type of repair they're looking for. For these sketches, I initially had a radio button to select. After some testing, I learned a description for each service was necessary and changed it to the different drop down design below. This let new customers understand the services offered and not leaving them guessing.
The goal is to have each user independently make decisions regarding the service they need. Giving them as much information as possible avoids friction and having to call the store and find out what the services mean.
I used a mood board to transfer the essence of the brand. This mood board is based on the surroundings of the area. This bike shop is in an iconic area designed for mountain biking.
I want to honor the geography and the respect for nature that is shared among the community. This mood board keeps me on track to do that.
The logo became an idea because it is quick, simple and makes the user recognize it right away. While logos are not my strength, I wanted to make this fun and simple.
From Excalidraw to Whimsical. These low-fidelity wireframes are an important step in the design process. Here I can begin to see how the architecture will work for these designs.
I want to make sure this page opens on every device, so I am designing for desktop, tablet and mobile. These designs carry over to the final design and give a pretty sweet view of how it will work in the hands of just about anyone.
%402x%20(1).png)
For this prototype, I included a map to make this location easy to find. However, after some testing, hardly anyone acknowledged it, and I learned this doesn't work as planned.
%402x%20(3).png)
This is the design for the wireframe of the "Book a service" page. I learned this design works best compared to other designs because it is easy to use and intuitive.
%20-%20Window%402x.png)
From Whimsical straight to Figma. This is the design all grown up.
We keep the beautiful nature as the main backdrop with a video. This is probably my favorite part, because it is simple an exciting. Mountain biking is all about movement and adventure. To honor that, we open with an exciting mountain biking video and follow with the latest and most exciting news about what is "new in stock". Scroll farther to find the information about bike repair services and the many options of brands.
The services page is also carefully designed to allow the users to pick what service they need. This gives a breakdown and most importantly shows the approximate prices, so there are no surprises at the counter. The arrows pointing up and down let the users know there is more to the title than just the price.
Overall, testing was successful and users enjoyed the simplicity of the website. However, 3 out of 4 users felt the calendaring service was difficult to handle in responsive design.
Designing the calendaring page was a challenge, especially finding something that works on mobile as well. However, I learned a lot about usability with forms and UI design. After several designs and testing the users preferred option C. This option felt more natural and it worked well for responsive design.
For future changes, I would like to design additional pages. This would give this design more fluency as a solid web design.
For future changes, I would like to design additional pages. This would give this design more fluency as a solid web design for a bike shop. I am particularly proud of the color scheme and logo design. It was a first time designing a logo and it feels very natural and rugged which fits the aesthetic of the website.
Play with the prototype here. BTW, it's more fun in full screen.
.png)