Concept UI/UX Design:
Roar Bikes
Roar Bikes is a manufacturer of small run, contemporary bicycles sold exclusively from their own website. Roar Bikes currently have 3 models of bike to purchase (Siamese, Sphynx, Bengal). The brief requested a webpage for e-commerce website for people to browse & purchase.
The website was designed with the target audience in mind, who we personified as Jake:
Jake is 28 years old and a graphic designer for a large design agency in Los Angeles. Jake prides himself on having strange & interesting versions of everyone else’s everyday objects. His shoes are hand made & his backpack is pink.
He likes to make his purchase (big or small) from local responsible crafts people. He doesn’t own a car. He always brings a reusable cup to the coffee shop.
Jake cycles to work and wants his bicycle to be practical but unique.
Jake is a discerning customer, and has every right to be, but I needed to create a website that would convert him to Roar Bikes. We weren’t building a website to necessarily entice a trail hopper, or an outdoor enthusiast- although Jake might be. I needed mostly to hone in on his interest in unique, quality items, with the twist he was after.
The color palette walks a bit of a fine line with oranges and greens that can be reminiscent of the 1970s Harvest Gold and Avocado Green. With careful display on the website, and with the majority of customers being born after the time Harvest Gold was popular, it is somewhat safe to transform Avocado Green into Avocado Toast for Roar Bikes. The gradient banner at the top of the screen looks sun kissed and optimistic.
The moodboard created to design Roar Bikes. I wanted to avoid an overt sports theme, but the outdoors and the freedom of mountains and fresh air are still appealing to anyone choosing active transportation.
Prototype for the Roar Bikes website.
The homepage has a hero box that cycles through three double-exposure images featuring bikers with a mountain distance, suggesting the great expanse can be experienced even on city pavement. The center part of the homepage features the three bicycles that rotate in a circular manner when selected. The bike featured at the center of the screen has an “explore” button for users to click on to bring up the bike page itself which has reviews, more social media posts, dimensions, and other useful information.
The brief requested that there was a strong social media connection on the Roar website so we included social media photos at the bottom of the page, and on the individual bike pages to build that sense of community and social media presence for Roar.
