The users should have a say in your design process(Bicycle design)

Have you ever gone to a store to purchase an item and you think to yourself, “I wish the top will be replaced with another color or another pattern or even a different material, Just something to make it less generic.” As users or consumers, we deserve the right to take control over each step of the purchase. We need to feel in-charge and accountable for any decision we make. So in design, we take that into consideration. we give the users the opportunity to choose what they really want and how they really want it. So with this bicycle design, the users will practically build their own bike the way they want and proceed to checkout. Awesome right?

The design

Let me start by saying that the design was very easy. hahaha, I lied it was not easy because for this kind of design to work you will need all the parts of the bicycle to be different components. Meanwhile, it is assumed that you have a fair knowledge of UI/UX design of the other parts of the pages like the buttons the logos and the other elements so I will stick to the center of the users' attraction, the micro animation.

There are key things to take note in order for the design to work. Meanwhile the main work goes into the bicycle design.

While making the different component designs of the bicycle, its very important to take note of two important things:

1. Naming conventions: All components should have the same name throughout the whole frames for them to sync well during prototyping. If you even make a mistake of using “i” for “I” that particular part can’t move according to the set interaction. So naming parts correctly is an important part of the design and can help you to easily access each part.
2. Grouping: Try to be careful when grouping parts of a design, if there is a need for grouping of components make sure they are uniform with the frames across your design, and name them accordingly.

This particular design has 8 different frames each frame signifies an animation point, an action that occurs when the latter frame is clicked or dragged. For those of us not familiar with Frames they are the same with Artboards.

The frames of the different animation point

The different components named uniformly

Prototyping

I used a smart animate with the interaction set to on-click and the animation set to smart-animate to ease out at a speed of 300ms (this is to ensure the animation doesn’t lag or move too fast, of course to can adjust as you see fit). I selected each part that is to be clicked and linked the appropriate Frame that the next action will be performed, this is done having in mind that all my naming conventions were kept the same across frames. Any error in the naming convention becomes a bug that needs to be fixed and may be hard to find. So a little advice;

Do not keep your naming to the end of designs, name as you go.

The files to the designs for an in-depth study of the process can be found here. I am available to answer any question you have about the design and to work on any project that you are working on. You can tweet at me @kingsleyiheonye or send me an email here.

Thanks for reading this article. See you soon…