Case Study: RideVibes Skateshop E-Commerce Website Design

The smartphone template I used to mockup the above mobile screens is by Vectonauta on freepik:

https://www.freepik.com/free-psd/smartphones-mockup-diagonal-composition_13088207.htm#query=mockup%20phone%20screens&position=0&from_view=search&track=ais

User Personas

Empathy Maps for Each User Persona

User Flow

User Journeys for each persona

NOTE: Since this project involved making a brand new website, the user journeys were done by auditing a competitor site and seeing how these personas would interact with a competitor's website.

Wireframe sketches for each of the main pages for the mobile versions of the design

Annotated Wireframes (Mobile)

Homepage (Mobile)

About Page (Mobile)

Shop Page (Mobile)

Skate Page (Mobile)

Clothes Page (Mobile)

Cart Page (Mobile)

Community Page (Mobile)

Contact Us Page (Mobile)

Homepage (Desktop)

About Page (Desktop)

Shop Page (Desktop)

Skate Page (Desktop)

Clothes Page (Desktop)

Cart Page (Desktop)

Community Page (Desktop)

Contact Us Page (Desktop)