Shark Drone. E‑commerce website

Preview of a few Shark drone pages for mobile version.

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
A photo of a middle age man with glasses having a phone in his hand.

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

Preview of low fidelity prototype screens.

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

Preview of grey scale colors I used for the mock up and hi-fi prototype.

Primary, Secondary & Accent

Preview of colors I used for the mock up and hi-fi prototype.

Components

Here you will find some components that I have used to design this web.

Preview of colors I used for the mock up and hi-fi prototype.

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.

High-fidelity prototype

See the high-fidelity prototype