HIGH POINT
![Roar-Bikes-Logo.png](https://static.wixstatic.com/media/13546b_a7120495de884fad8b7ad5083a36e826~mv2.png/v1/crop/x_0,y_19,w_250,h_171/fill/w_350,h_239,al_c,lg_1,q_85,enc_auto/Roar-Bikes-Logo.png)
ROAR BIKES
Roar Bikes was my first assignment for my UX class. I am proud of what I achieved with this. My instructor wanted us not to be so rigid with the instructions. "Open your mind and see what you come up with." For me, that was a challenge because I was transitioning from a field where my opinion didn't matter and I just gave them what they wanted.
I read the client's bio to get a feel of what they are like. I felt like he was a moody and cool guy, like if James Dean grew up in the 90s. So I ran with that theme. I looked up fashion from the late 50s through the early 60s and 90s. There is where I found my colors, style, and text. Next, I looked up what small cool shops I could find. Bike, consignment, family owned filled my google search. Lookie, lookie here! I got myself a mood board.
CLIENT
![Persona - Roar Bikes_edited.jpg](https://static.wixstatic.com/media/13546b_8a756e262f924ff796a82951de601c5f~mv2.jpg/v1/fill/w_391,h_253,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Persona%20-%20Roar%20Bikes_edited.jpg)
MOOD BOARD
![moodboard-roar_edited.jpg](https://static.wixstatic.com/media/13546b_754dd225f62245c6a36bc40b6fcdb357~mv2.jpg/v1/crop/x_0,y_26,w_906,h_491/fill/w_415,h_225,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/moodboard-roar_edited.jpg)
Now to see what Jake wants me to build.
​
​
​
​
​
​
​
​
Homepage:
-
Logo​
-
Nav
-
Shopping basket​
-
Login
-
Contact
-
-
3 Bike Models​
-
Owners' Photos
-
Footer
Product Page for each bike type
-
Photograph of the bike
-
Description
-
Price
-
Add to cart
-
Owner photos
LOFI MOCK-UP
![roar-template_edited.jpg](https://static.wixstatic.com/media/13546b_dfb2512e56e54c24874bf8482d483e50~mv2.jpg/v1/fill/w_390,h_365,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/roar-template_edited.jpg)
PRODUCT PAGE
![roar-product-page1.jpg](https://static.wixstatic.com/media/13546b_000c018dbb764dd0bd27c3480943a267~mv2.jpg/v1/fill/w_385,h_638,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/roar-product-page1.jpg)
HIFI MOCK-UP
![roar-home_edited.jpg](https://static.wixstatic.com/media/13546b_09c6b24b59ba4141bc0bb3958e0a2d5f~mv2.jpg/v1/fill/w_410,h_610,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/roar-home_edited.jpg)
SHOPPING CART
![roar-shoppingcart_edited.jpg](https://static.wixstatic.com/media/13546b_2bc59df01a754a58867e4f033ea52bd5~mv2.jpg/v1/fill/w_410,h_349,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/roar-shoppingcart_edited.jpg)
CHECKOUT
![roar-shipping1_edited.jpg](https://static.wixstatic.com/media/13546b_3776e0256e2d43fe93140168860e5c87~mv2.jpg/v1/fill/w_390,h_587,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/roar-shipping1_edited.jpg)
CONFIRMATION
![roar-order_edited.jpg](https://static.wixstatic.com/media/13546b_2ab61b47820249858f109915b2489649~mv2.jpg/v1/crop/x_0,y_0,w_906,h_759/fill/w_408,h_342,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/roar-order_edited.jpg)
PROGRAMS USED
![adobe-xd-logo (1)_edited.png](https://static.wixstatic.com/media/13546b_bff59116eaf446cdb0292ae434efac8c~mv2.png/v1/fill/w_71,h_74,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/adobe-xd-logo%20(1)_edited.png)
![1051px-Adobe_Photoshop_CC_icon.svg.png](https://static.wixstatic.com/media/13546b_f181126a902d40d6b22a4468f71b9c1f~mv2.png/v1/fill/w_76,h_74,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/1051px-Adobe_Photoshop_CC_icon_svg.png)
![illustrator_edited.png](https://static.wixstatic.com/media/13546b_3336095b01424abc9b229b1c4e22db52~mv2.png/v1/fill/w_76,h_74,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/illustrator_edited.png)
WATCH IT IN ACTION
![](https://static.wixstatic.com/media/13546b_b0857524962a4d93a3e0f3ce513b61f2f000.jpg/v1/fill/w_640,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/13546b_b0857524962a4d93a3e0f3ce513b61f2f000.jpg)
I have been playing around with this in Figma.
![](https://static.wixstatic.com/media/13546b_fa90279789fe416f8460e9fa0e1474b2f000.jpg/v1/fill/w_640,h_360,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/13546b_fa90279789fe416f8460e9fa0e1474b2f000.jpg)