Roar Bikes
An e-commerce website for bicycles made using Adobe XD - created Aug 2021
After my initial project to learn XD I wanted to get to know it a bit better, this project was just the ticket, it was a project for me to really flex my newly formed design muscles. I was tasked to design a bicycle website, and I decided to use XD to really get to know it better.
The client and the project brief
After looking at the inspiration websites for ideas, I made some sketches of my own. Based on what I saw on the inspiration websites, I knew I wanted a lot of movement and pictures, and less text. This website is supposed to be cool, that's why I chose the slideshow format as the header.
Some quick sketches
Once I had some ideas on paper, I did a low fidelity mock up, basic wireframing and user flow. I find it important to always do the user flow, so I can really get to know the user, and how s/he will use the product.
Wireframe and user flow
After creating the low fidelity mock up, I felt I had enough ideas put down, that I could start on the high fidelity mock up. It was quite difficult for me to actually get the animation correct, but finally I got it! The slideshow functioned exactly how I wanted it!
High Fidelity Mockup
Example slideshow
Example animation
Now what is the result of my project? I learned a lot from this project actually! I really enjoyed learning how to create the slideshow effect, it really helped me deep dive into how the animation effect works in XD.
Contact me - pattonfelicia@gmail.com
