Denver Bicycle.
A complete webpage redesign, offering users a seamless experience to shop for their next ride.Brief.
Redesigning an e-commerce website that embodies clean and sleek aesthetic, professionalism, and a immersive and vibrant shopping experience.
Key Skills.
Figma
UI/UX Design
User Research
User Testing
Concept & Objective.
The project aimed to identify a local company with an outdated or poorly designed website. Being based in Denver and knowing the abundance of bike shops, I had found Denver Bicycles.
Information.
Role: Design Lead
Duration: Three weeks
Category: UX Design, UI Design, Prototype
The Challenge.
The original website suffered from a disjointed design and poor information architecture, impeding users' ability to easily locate specific bikes and cycling equipment.
The website failed to meet accessibility standards due to insufficient color contrast ratios and confusing navigation structures.
The Solution.
Addressed key user pain points around disorganized content, low contrast, and unclear CTAs through 4 user interviews, data analysis, and usability testing.
Conducted user research, analyzed industry best practices, synthesized insights, and performed accessibility/heuristic evaluations to deliver high-fidelity prototypes and interactive mockups.
Discover.
Original Design.
The original website failed to meet accessibility standards due to insufficient color contrast ratios, compounded by inconsistencies with displaying prices across the website.
New Design.
Elevated the visual design in Figma by introducing a dark mode layout that reinforced brand identity and provided a compelling and accessible aesthetic.
Research.
Denver has a huge cycling community. Everywhere you look there is someone on their bike. Denver has pretty good bike lane infrastructure. We also neighbor one of the best bike friendly cities, Boulder, Colorado. Knowing this, I knew it wasn’t going to be difficult to find some folks in the bike scene to interview…
User Interviews.
I interviewed a total of 4 users who all are involved with biking in their own ways.
2 users are avid cyclists. They are both involved in bike racing and will spend the summer either mountain or gravel riding.
The other 2 users enjoy road and mountain biking but more recreationally. They will bike around town and go on mountain rides here and there. But it is not their priority.
Demographics.
Ages 25 - 40 years olds
Casual cyclists
Frequent cyclists
What I asked.
Questions included user’s overall online shopping preferences as well as their specific experiences and needs when purchasing bikes and cycling gear online. This aimed to gather insights for enhancing the ecommerce user experiences for this redesign.
Young professionals
Based in Colorado
Athletic
Questions.
“What do you find visually appealing or attractive about online shopping websites in general?”
“Do you think reviews can influence your purchase?”
“What could help motivate you to pick it up online orders?”
Interview Insights.
Interviews revealed that 3 out of 4 users prioritized organized information architecture, appealing design aesthetics, and an uncluttered layout. A key finding was that overwhelming or unattractive websites would likely lead to abandonment due to not trusting the websites accuracy. With this information clear to me, I knew what to do. Make great designs.
Insights gathered from the affinity map.
Define.
Persona.
Evan Thompson was made to fill the majority of cyclist personality types in Colorado. Most of them are not professionals but they are considerably good at the sport. During the user interviewing, 3 out of the 4 users were very proficient and experienced cyclists.
Problem Statement.
Evan needs to find a specific bike for his upcoming race. But if frustrated with how disorganized the website is. Evan needs to find his bike and pick it up at a specific timeframe.
How Might We’s.
How might we let Evan shop for bikes, bike equipment, and accessories without being confused and give him a good experience?
How might we make our online experience straight forward and easy for Evan to navigate?
How might we make a minimalistic and organized webpage seem alluring and informative for Evan?
How might we categorize all of our merch so Evan can find what he’s looking for?
Comparative & Competitive Analysis.
A C&C analysis was conducted with 2 direct competitors and 2 indirect. The C&C was to find different approaches other companies were taking to accumulate and retain traffic on their websites. Conducting this analysis would determine features that would be deemed important to implement
C&C Takeaways.
The C&C revealed that while technical product details were prominently displayed on most sites, an accordion dropdown menu design was decided on to keep the page clean.
User reviews was a highly valued element across the analysis, so I ensured they remained easily accessible and discoverable through persistent and intuitive placement on the page.
Consistent with industry practices, I incorporated a subtle search bar and category icons in the header for accessible navigation which kept consistent throughout the webpage.
Design.
Brainstorming.
The original website lacked ecommerce functionality, serving merely as an informational hub for services and products—many of which were displayed as "sold out." A key objective of the redesign was implementing a comprehensive online shopping experience that seamlessly integrated with the company's existing operational model of in-store pickups only.
This necessitated developing an end-to-end ecommerce workflow—a capability that was previously non-existent. However, it was critical to architecting this new purchase path while adhering to the business's pickup requirement.
The solution was introducing an intuitive checkout process that clearly communicated the order pickup policy before and upon completion and a scheduling tool. This level of transparency from the beginning aimed to prevent user dissatisfaction.
Clearly Showing users what to expect before making a purchase
Creating clean and easy to read layout for seamless user interaction.
Usability Testing.
Conducted 3 usability tests with users who all had varied cycling skills.
Users consisted of 2 males and one female between the ages of 28-48. All based in Denver, Colorado.
Home page and product selection page.
Cart page and schedule pickup page.
Findings & Insights.
2 out of 3 users were able to finish both task 1 and task 2 under the 5 minute goal.
All 3 users over clicked 1-2 times over the 13 click goal.
Feed back from users: to have a shorter/more condensed way to submit checkout information. Overall each user had a pleasant experience and was satisfied with the overall process.
UI Decisions.
We were advised to create a mood board, find our fonts, and to cultivate a color pallet. Inspiration came from reputable bike brands such as Canonndale, Specialized, and Trek.
The energy was aimed to be high and intense.
Show professionalism.
A dark-mode layout.
High energy.
Typeface.
The typefaces were picked to show high energy. To get users excited about their new/potential purchases.
Koulen was chosen due to the the energy it shows. It is also has great legibility when reading.
Red Hat Text used for clarity and visual accessibility.
Koulin was used for H1’s and H2’s and Red Hat for H3’s, 4’s, and 5’s.
Color.
For color, I chose true black, dark grey, orange, and a teal blue. I wanted to use original colors from the site. They didn’t have many colors and didn’t apply the one’s they had well on their site. I decided on using their logo colors which had orange and black. I then added the teal as a cooler color. Black ended up being the primary, orange the secondary, and teal was the tertiary.
Designs & Iterations.
This redesign was able to be pushed and pushed even further. It felt as if I could see the finish line but there was one more final push to get it perfect. Iterations included
Placing items on product cards.
Containing elements.
Better readability.
When to show or hide information.
Hierarchy.
Spacing.
Containing Elements.
I knew I wanted product cards to organize the bikes (road bikes is the page I focused on) down the page. Inspired by other sites, the cards needed to have the brand, name, price, color choices, compare button, short description and the star ratings. My first iteration of the product page had information laid out. But the feeling of cleanliness and simplicity was missing. I ended up creating larger product cards with smaller product images. This allowed me to get all that information on a card without it looking overwhelming.
Readability & Consistency.
Creating the homepage had iterations after the next. It was difficult to choose between a solid bar at the top of the screen or to choose a gradient. I enjoyed the gradient but I soon found that the gradient style didn’t look as nice on the other pages. I found a challenge with keeping consistency while making sure it looks good throughout the design. The solid bar with an opacity was decided on.
Deliver.
Final High Fidelity Wireframes.
Homepage.
Product List Page.
Item Page.
Checkout Page.
Key Takeaways.
Next Steps.
Prototyping the full wireframe.
Give the filter the ability to shrink and open. This will clean up the page for a more minimalistic feel.
Give users the ability to go from dark mode to light mode. This will allow users to view products in their preferred viewing method
Run a heuristic evaluation on the redesign to ensure that the design is cohesive and accessible.
Thank you!
Thank you for taking the time to view my work. Interested in what I’m doing? Let’s chat!
Please reach out at kira.lazickas@icloud.com