Card Checkout design

Project information

  • Category: Web design
  • Client: individual
  • Project date: February, 2022
  • Image Download: github download

GamerzTurf card checkout page is the result of a page I did as a challenge.
The problem: Checkout page for video games online shopping did not include enough details.
solution: A checkout page with enough item description and card details.
My Role: As a UI/UX team of one I was responsible for the 5 stage process of UX research and UI design
My tools:
✔Sticky notes
✔Pens
✔Figma
✔illustrator
✔User story template

Process


Understand

Secondary research
Looking into existing secondary research from existing shopping websites to identify recent trends and patterns
Comparative analysis with xbox and paypal

Empathize

Primary research through interview

Define

Creating affinity map:
Three themes emerged:
*Focus on card details
*Focus on items on cart
*Focus on shipping
Empathy maps to organize info
Persona from empathy map
Problem statement

Ideate

Create a How might we question.
GamerzTurf checkout page

Prototype

User Stories,actions and epics
Information architecture with user flow diagrams

Sketches
Wireflows
Style Guide
Final Mockup