Brand
Project

LEONE Bicycle
e-commerce

Summary

UX/UI Design
for an e-commerce website
of high end bike manufacturers.
Concept project.

Responsabilities
  • UX/UI Design
  • Graphic design
Softwares
  • Adobe XD
  • Illustrator
A high-end bike E-commerce

Personal project designed for my UX Design course final stage. I was tasked to create an E-commerce for a local bike store which could be considered unique, of high quality and responsible.
There was creative freedom to design the website how we saw fit, the input give was the User persona and the logo for the E-commerce.
I decided to go for a more high-end product, inspired by the famous bicycle italian brand Bianchi.

_Challenges

Logo, colors and typography

One of the challenges I had to face was how to redesign the logo and contextualise it with the right fonts and color palette, since the logo was given to create the project didn’t reflect what I wanted to design and present.

I let myself get inspired by the Bianchi logo and the decision to design a logo inspired by the crest of the famoous brand came fairly quick and easily, the challenge was how to develop it in an original way that could represent the brand I wanted to create.

After different sketches and tries the final result with the lion, band, shield, laurel and wheel satisfied me enough to move forward and with it.
For the palette I went with a combination of Blue Whale blue, Copper yellow and Wild Sand white; inspired by luxus fashion brands with navy and gold inspired color palettes.
For the fonts I wanted to blend the old fashion style of serif fonts with the modern touch of a sleek sans-serif; after different combination and rounds of user feedback the best candidates ended up being: Romana BT, Poppins, Open Sans.

_Audience

A specific User Persona

The user persona was given as input for the project, I didn’t need any research to develop it and I could focus more on the prototyping and testing of the E-commerce.

The target is described as a graphic designer for a large design agency in Los Angles that prides
himself on having strange & interesting versions of  everyday objects, he likes to make his purchases from local responsible crafts.
He wants his bicycle to be practical but unique.
Given the type of person, developing an “old-school” bike manifacturer but with a modern and practical twist payed of as a good choice, praised by both tutors and course collegues.

_Roles

Logo and UX/UI design

Being this a personal project for a UX course the main tasks where only design, concepting and prototyping of a website. Given my background in graphic design I went a step further with designing a new logo and trying to perfect the aesthetic for the presentation even if not stricly necessary.

I did a lot of competitor research and analysis to figure out what worked and what didn’t especially considering my target demographic as well as my design choices.
Before I even started with the wireframing, I had alreay plenty of notes, pain points I had with the website competitors as well as ones that my target could potentially have.

I ended up using mainly illustrator and Adobe XD for the development, but traditional sketching for the early stages is always a big thing for me personally.

Navigation samples
of Leone Bicycle
developed with AdobeXD

_Process

Sketching, Wireframing, Prototyping

As already stated before I did a lot of competitor research before I even started sketching for the project.
I took dozens of notes detailing what was working and what wasn’t working with the competitors websites, how the navigation made for a nice experience and where insted wasn’t intuitive or the flow was abruptly interrupted and made the buying experience less enjoyable.
I am strongly of the opinion that even though as designers our job is to build aesthetically pleasing interfaces, it all becomes pointless if the UX, the experience and the flow is not made easy, and pleasent for the user.
Everything needs to be both well presented and must run nicely and smoothly.

What I had as a luxury against many competitors was the lack of many different bike models to sell on the E-commerce, which my be an issue marketing-wise, but it’s definetly an advantage when trying to keep things clear and simple with the navigation and the sale.
Not having to manage hundreds of products meant that I could show all 3 models in the homepage one after the other, withouth breaking the immersion and forcing the client to go to another page, adding loading times that could annoy a potential buyer.

I focused a lot on the buying and cart section as well.
Analysing the competitors I noted that a lot of the cart sections are made unnecessarily complicated or are interrupted often by the registration or login section.
I wanted for user not to feel forced in any registration so I simply added an option of completing the registration after completing the shipping address form, but they could go through without the need of ever doing that.
Lastly I wanted the user to be able to alway access and easily go back to each and every section of the buying process with clearly visible breadcrumbs buttons on top of the section.

_Considerations

Final thoughts

My final considerations for this project are how crucial it is to do proper research, wheter for user audience or competitors.
Analyzing and researching the world of bike E-commerce and online shops in general gave me a new prospective on how important it is for a user to feel comfortable, in control and understand the process at every step of the way especially when their money is involved.
Talking to sales experts they confirmed that even in Luxury shops the paying part is the most “painful” one for the cliend and needs to runs as quickly and smoothly as possible withouth ever feeling rushed.
It’s a delicate balance and a very important section when designing an E-commerce.

View Next Project 

BMWi8 Unreal