Using Adobe XD with the assistance of Adobe Illustrator and Photoshop, I designed the main website pages (homepage and 3 product pages) for a fake bike company called Roar Bikes. Under the direction of a target user persona, I started with creating low-fidelity wireframes for the purpose of concept and layout. I then further improved the wireframes by adding photoshopped and stock images, and styling the website with fonts and color scheme. Lastly, I added micro interactions through Adobe XD's prototyping section.
From this case study, I really got to be creative as I had to create different bikes and their unique features. Also, I got to deepen my general Adobe XD skills, as well as, my Photoshopping.
To have a sense of direction for designing the website, I used Jake as the target user persona. In brief summary, he is a young, graphic designer from LA, who is eco-friendly, and likes fringe but practical items. With this information in mind, I believe in giving the website an edgy, hipster scheme. My idea would be to make the bikes as limited edition yearly drops as the companies gimmick. It would cater to Jake's want for local, practical, and especially unique products. The bikes would also be eco-friendly in some sort of way to further cater to Jake.
For my initial concepts of the website, I made wireframes for the homepage, and 3 of the bikes (Siamese, Sphynx, Bengal). For the home page, theres the hero video, a mission statement section, the bike collection section, and social media activity section. I wanted to have a section for the mission statement to really show how the company prioritizes uniqueness and practicality. I also wanted a social media section, so customers can see how popular the company is, and how the past/present bikes are being used in various activities. For the product page, I wanted to emphasize the bikes looks, as well as, showing the unique features of each bike respectfully. In addition, a social media section is provided to further show the respective bikes already in use.
After creating the rough draft of the website, I cleaned the positioning, spacing, added images, and stylized the site. For the bike collection section of the homepage, I listed them out rather than in tab form previously done in order to show all the bikes without having the shuffle through them. In addition, for each bike, I creatively photoshopped their hero banners. For Siamese, I took inspiration from the name's connection to China. Hence, I used a bamboo bike, an asian font for the name, and a bamboo background. For Sphynx, I took inspiration from the name's connection to Egypt. Hence, I used an electric beach bike, an egyptian type font, and a desert background. Lastly, for Bengal, I took inspiration from the name's connection to jungle type environments. Hence, an all terrain bike, an bengal tiger font, and a jungle background.
