UX/UI Design - Protein for Athletes Website

Discovery Phase

Persona
Use Case
Empathy Map
Design Decisions

Development of the persona, use case and empathy map along with defining design decisions. Created in Figma.

Low fidelity wireframes

Low Fidelity wireframes - Landing Page
Low Fidelity wireframes - Product Page
Low Fidelity wireframes - Product Options Page
Low Fidelity wireframes - Reviews Page
Low Fidelity wireframes - FAQ Page

Website functionality wireframes created in Figma.

Templates used in project: "Multipurpose Ecommerce Website Lo-fi Template" by Xperienced licensed under CC BY 4.0 / Materials were modified for the purposes of this project.

High fidelity wireframes

High fidelity wireframes - Landing page
High fidelity wireframes - Product Page
High fidelity wireframes - Product Options Page
High fidelity wireframes - Reviews Page

Website visual design based on the low fidelity wireframes. Project created in Figma.

Icons used in project: "Heroicons" by Tailwind Labs and Steve Schoger licensed under CC BY 4.0 / Materials were modified for the purposes of this project.