Case study: website prototype for a bike store
Starting with a simple prompt:
Your ideal customer is a woman named Mia. Mia is their mid 40’s and lives with friends. They are a high school graduate and work in a small team. Mia lives in Glasgow, is somewhat familiar with your product and is keen on fashion and latest trends.
The eCommerce page task flow to create:
- Homepage
- Product Features
- Checkout
- Confirmation
LoFi wireframes#
I outlined the required UI views for mobile. The views use typical features that other eCommerce sites in mobile size use. I did some small decisions to adapt the site to the custmer profile such as selecting the social media icon’s to fit the age group of the target group (were they younger, maybe TikTok or Snapchat would be more suitable).
Designing the style: colours, visual look and typography#
Next, I searched for style ideas by creating a mood board. As a result, I selected the colour palette and typography. I practiced making icons from scratch. I collected some images of bikes to use in the prototypes.
Finished Designs#
This is the resulting design. I used plenty of familiar design conventions to offer good usability and simple animations for nice and delightful user experience. I practiced making animations with Figma.
Animations#
I practiced doing simple animations on the different prototypes.
Wireframes:
HiFi Mobile Designs:
Desktop Newsletter pop-up:
