Kid Cycle
Local bike shop website design
This is a student project, created for a UX bootcamp.
Kid Cycle is a bike shop that sells exclusively kids’ bikes. They pride themselves on their friendly environment, customer service, and in-store services offered. They want a website that is welcoming and allows customers to sign up for in-store services.
Role: UI/UX Designer
Timeline: 2 weeks
Tools Used: Figma
Brief: Create a friendly website with new branding and the ability to easily sign up for services.
Background
Kid Cycle is filling a gap in the bike buying industry - a store that is entirely focused on kids’ bikes. In addition to in-store and online shopping, they will have in-person services and events. They strive to be a family-friendly business that parents and kids will enjoy frequenting.
Goals
Design a website that allows customers to sign up for services online
Develop branding that is attractive and represents the brand
Display a welcoming and fun energy
1. Research
Competitive Analysis
Interviews
2. Define
Personas
User Flows
3. Design
Wireframes
Mood Board
Final Designs
1. Research
In my research, I found that there were very few bike shops that sold exclusively kids’ bikes. And even fewer that also had lessons and other services.
Through my interviews, I found that there is definitely an interest in this type of store.
Competitive Analysis
I conducted research on bike shops for all ages in the area. Through my exploration, I found that:
None sold exclusively kids’ bikes and none provided bike lessons solely for kids.
One shop provided lessons as an additional service, though that store did not cater specifically for kids.
Some offered bike lessons for kids but they did not sell bikes themselves.
Most offered at least some of their selection available to purchase online, and some information about services offered in the store.
When I didn’t find brick-and-mortar bike shops that sold only to kids, I looked for shops that sold exclusively online. I found many websites for individual brands of kids’ bikes, and one website that sold multiple brands of kids’ bikes. While these sites didn’t offer in-person services, they had much more information about sizing and fit than did the websites for the brick-and-mortar shops.
I used my competitive analysis to find elements I wanted to avoid and features I wanted to make sure I included in Kid Cycle’s website.
Interviews
Now that I had a better understanding of the competition, I conducted interviews with potential customers. I interviewed 4 participants, all parents. Their children ranged in age from 3 to 14.
Everyone I interviewed was excited about the idea of a bike store just for kids
They often felt that regular bike stores are not very welcoming and the staff can be pushy.
All participants aid how important it was for the store’s website to be clear and easy to use, and that they would probably not sign up for services if they could not do it online.
I used this feedback to create a welcoming feeling through the website, including adding my own illustrations. I also spent time making sure the process of signing up for services was clear.
2. Define
I reviewed the information I’d gathered in my research and created two personas. I created a user flow for each persona.
Next, I made a site map. This information would help me as I could look back and reference it as I moved forward in the design process.
Personas
I created two personas based on the competitive analysis and the interviews I conducted.
Michelle is a mother who doesn’t know much about biking herself and wants to sign her daughter up for lessons. She appreciates when she is able to easily sign up for services online.
Jonah is a child who is already an experienced bike rider but would like to learn more advanced skills. He is shy and his parents want him to participate in more social activities to help him make friends.
I used these personas to help inform decisions about how to design the website.
User Flow
I used my personas to create two task flows, one for each persona. For Michelle, I considered the process she would go through to sign up for her daughter’s first bike lesson, including looking at the instructor’s bios because she’s never signed up for a Kid Cycle class before. For Jonah, I imagined his parent signing him up for lessons, taking into account he is already an experienced rider, and his parents want him to be more social, he is signed up for an advanced group class. After I created the user flows, I designed the site map.
3. Design
I began by sketching ideas for desktop wireframes on paper and then developed them on Figma. Next, I created a mood board to figure out the look and energy of the site.
Once I had solidified my wireframes and had a good idea of the look of the website, I went on to create the logo, illustrations on Procreate, and my final page designs.
Wireframes
I created wireframes for the homepage and for the pages required to sign up for bike riding lessons. I thought of Michelle and Jonah, my personas, as I designed the process for signing up for a class.
Mood Board
I wanted to find a color that would appeal to both parents and kids, and in particular to kids of different ages and different aesthetic preferences.
I ended up going with a gradient because it reflects the welcoming and playful energy of the website. The gradient goes from purple to orange, giving the feeling of riding a bike during sunset. I created a mood board to get a better sense of the aesthetic.
Illustrations
Early on I knew photographs would be an important element of the site. They help customers picture their kids at Kid Cycle. But I also wanted to show the playful and kid-friendly vibe of the store. So, I came up with the idea to combine photographs with illustrations using Procreate, which gave an almost fantastical effect that captures the joy of biking as a kid. I created 15 separate photograph/illustration combinations so I had plenty to choose from when placing them in my designs.
I also created several standalone illustrations on Procreate to use on the homepage. I kept these illustrations simple and clear.
Logo Design
Preliminary Designs
I came up with a variety of design ideas for the logo before settling on the final design. I wanted the logo to be clear while also fun and childlike, but not too immature that the older kids would be averse to it. These preliminary designs did not quite fit those requirements.
Final Logo Design
My final design idea fit all of the requirements I had set. The shape is up to interpretation, some people saw it as wheels and others saw it as bike gears - both of which fit the brand. The name “Kid Cycle” makes the bicycle element clear, so the shapes could be more abstract while still making sure the type of store was obvious.
UI Kit
I gathered the most important elements from my site design and put them together into a UI kit. I designed my UI kit keeping in mind the feeling I wanted to have on the website - fun, clear, and kid-friendly.
Homepage Design
Now that I had my colors, overall feel, and key design elements, I could expand my wireframes to create the final designs. For the homepage, I used a variety of gradient colors to stay consistent with the gradient theme while also making the page more colorful. I broke up the page by using shapes to create separation between sections while still having a flow from the top to bottom.
Lesson Signup Design
After I had my homepage design down, I kept my personas in mind as I created the screens for lesson signups. I wanted to keep them clear and easy to use while also maintaining the fun energy. I created 10 screens for this flow, including paths for users who were and were not signed in.
Here I have shown 5 key screens:
Next Steps & Reflections
My next steps would be to conduct further research for the e-commerce pages and create more illustrations. I would then apply my designs to other pages on the website.
I would also work on how the pages would look on mobile and tablet breakpoints.
This project made me think about how to design for multiple type of users, making sure to keep in mind who would be using the website - this is a kid friendly company, but the actual users are their parents. I had to be mindful of things like choosing appropriate colors - finding the balance between creating a fun energy and not overdoing it.