Shark Drone. E‑commerce website
This project was created for the Figma UI/UX Design Course.
The Goal
- To create an e-commerce purchase flow for a randomly selected product
- The flow should include: Homepage, Product Features page, Checkout page, and a Confirmation page
- The Confirmation flow should include a simple animation created in Figma only
My responsibilities
- Wireframing
- Prototyping
- Mock up creation
- High Fidelity Prototype Creation
- Illustrations
Persona
Martin
- Age: 53
- Education: High School
- Occupation: running a large company
Martin is in his 50’s and is married with children. He is a high school graduate and run a large company. Martin lives in Germany and is very familiar with your product. He enjoys time considering his next purchase.
Low-fidelity Prototype
Colors
Here you will find all the colors that I have used to design this website.
The usage of red color was inspired by the picture of the product which is mainly black with red details. While calming blue color brings a feel of reliability.
Grey Scale
Primary, Secondary & Accent
Components
Here you will find some components that I have used to design this web.
User Testing
I conducted a remote unmoderated usability study on three participants. Participants were two males and one female between the ages 18-40. Participants were asked to finish the main workflow while using a high fidelity prototype.
All of them were able to buy and order the drone and finish the workflow. The only one issue which was considered as problematic was missing the information about prince on the page with the detail of the product.
I modified the high fidelity prototype accordingly.