If you are owning one of the folding bikes you probably don't need an explanation what is the problems it does solve. I never had one and I wasn't paying a lot of attention to the advantages and all possible use cases of this kind of bikes before this project came to my team.
Role in a project
UX and UI designer, Interaction Designer.
As the designer, my task included wireframing, user interface design, interactive prototyping and building a website based on Squarespace platform.
Tools and processes
Photoshop and Illustrator
Unpack: Ride as a user
I conducted a user-centered research to better understand why people need folding bikes, how they wish to use them, their journey experience and the current state of the situation.
To understand why I just took a trip with the common bike. I just started my journey from home and instead of picking up my bike from the ground floor I took it from my apartments on a second floor. It was not really easy to find a place for the bike, it took a lot of space in the hallway. Then I used a train to get from Augsburg to Munich and I found that only a certain railway carriage was meant to care the bike on board. It's forbidden to take your bike into the metro. And it was almost impossible to put it in the elevator. I didn't try to pack it into the travel suitcase but it seemed to be clear that it's not achievable.
Of course, I’m not a user so it was absolutely valuable to get all the necessary insights from our client which they had gathered. They understand user needs and they invented three models based on different use cases which we ought to help them to present to the broad audience during the advertising company.
What is the main advantages? Why user should pick this bikes versus competitors?
Our customer invented their own measurement system:
Foldability: number of steps + time to fold/unfold
folded size: size of a suitecase it could be putted in
portability: weight and rollable function
Make a template unique
We used a Squarespace platform to build the website. Standard templates which squarespace provide was not covering all the ideas we had. Squarespace also gives an opportunity for the developers to apply some custom changes. We found a way of using advantages of the platform and at the same time add more personality to the project.
The good part of the platform is that user can add new pages and maintain website even without development affords. We managed to predefine all the necessary classes to keep this freedom for the customer.
The idea of the header was to divide the video progress bar into three parts where each of the parts belongs to one of the bike models.
Quick and simple:
We used promo video materials from the client to display the bikes in action. We've cut the videos into small pieces and synchronized playing of a folding process with the page scrolling.
Folding website for the folding bikes
On a first page, we showed the main features, beauty, and quality of materials.
But we've invested, even more, affords to the internal pages, where each detail is matter.