top of page

UI System & Brand Implementation for Ecommerce Experience

​​​Focused on translating brand elements into repeatable UI patterns, ensuring consistency across pages and components.

Executed brand styling across the MET-Rx website, translating identity into consistent UI patterns and layouts.

Role & Focus Areas:

  • UI Design (Figma & Photoshop)

  • Brand implementation across web

  • Layout and component consistency

  • UX exploration for Athlete page

Goal

Apply new brand styling across the website while creating a consistent and scalable UI system.

Layout & Structure Exploration

Focused on translating brand elements into repeatable UI patterns, ensuring consistency across layouts, components, and page structures.

Before

MET-Rx webpage

After New Direction

MET-Rx website displaying fitness products

Final Site

MET-Rx brand website homepage
MET-Rx JELLY DONUT CRUNCH protein bar product page
MET-Rx product page displaying supplements and a woman with a shaker
MET-Rx products page: protein bars, powder, pre-workout.
MET-Rx Terms of Use page, 'PLEASE READ THESE TERMS CAREFULLY'
MET-Rx articles page with fitness man
Muscular man exercising with weights
Athlete Page UX Exploration

Focused on translating brand elements into repeatable UI patterns, ensuring consistency across layouts, components, and page structures.

Website wireframes with image and text placeholders
athlete's page featuring profesional athletes
MET-Rx logo
Takeaway

This project demonstrates my ability to translate brand direction into a consistent UI system while exploring targeted UX solutions for specific user needs.

bottom of page