Figma Website Prototype: Check-Out Process

Check-Out Process: Volley Shop

Project Overview

This project was to utilize my Adobe XD skills and UI/UX theories and concepts to create a mobile prototype. The prototype should be able to complete the task of purchasing an item and seeing the thank you message at the end.

Brain Storming

I found multiple responsive mobile e-commerce websites and mobile applications. Using those as reference I created a style guide of my own. Writing down what I think my fictional company would have as its branding. Also sketched some ideas for logos.

Wireframes

wireframe

For layout for each page I took a lot of inspirations from multiple websites and their process of how an item would be checked out. The most important elements that are needed to complete the task are placed in the most efficient and eye catching way.

Mock-Up and Prototype

mockup

After finishing all the wireframes of the app, I had to connect the pieces together to make a prototype. This part of the project was straight forward, I had to link buttons to the pages they are meant to forward to.