Outdoor Clothing Website
As part of my course with Codecademy x Figma I was given a task to first sketch and then create high fidelity wireframes for an e commerce website. This was my brief:
You are working as a user interface designer for an up-and-coming design firm. Previously, you reviewed user research and created low-fidelity wireframes for Ridgeline, a popular outdoor clothing company. The product detail page you rendered in your wireframe was for a colorful, water-resistant, insulated jacket that is constructed with eco-friendly and recycled materials.
After reviewing your low-fidelity wireframe for the product details page, your supervisor approved the design! Your next step is to create high-fidelity wireframes of this design in Figma. Then, you will transform the wireframes into an interactive prototype.
Based on the user research that was completed before your start date, your high-fidelity product details page should include:
-
Navigation bar
-
Product name
-
Product cost
-
Product description
-
Available colors
-
Available sizes
-
Visual element of the product
-
“Add to Cart” button
You have the option to also include these elements in your high-fidelity design:
-
Product reviews
-
Size chart
-
Shipping options
-
“Add to Wishlist” button
Your prototype should allow users to interact with at least two elements on the product details page. You can decide what these interactions will be. Here are a few ideas for how users might interact with the prototype:
-
View different images of the product.
-
Select a specific size of the product.
-
Select the “Add to Cart” button and see a notification appear above the cart icon to indicate that the item was added.
Sketch
From there I began sketching a few different ideas for the product page until I found one I was happy to use as my guide for a high fidelity interactive protoype:
The basic idea here was to have a nav bar, a login/signup button and a cart icon above the product page.
Which had the key details such as images, title, description, colours, sizes as requested.
I also decided to included both a review and size section underneath as I think they are very valuable.
Prototype
From here it was into Figma to make a interactive high fidelity prototype based on my sketch.
Please enable fullscreen so you can fully experience the prototype.
Here you can add a size (L) to the basket, choose another image & scroll down to the other sections as requested in the brief.