Project 3


This project focuses on constructing a mature brand styling system and translating it into a structured web interface system. The purpose of this project is to demonstrate that when visual systems follow the Laws of UX and WCAG compliance standards, the interface gains personality while remaining structured and accessible. The focus is on interface hierarchy, visual systems, and component-based design at the UI level.


 
Chosen Brand: 
PureForm Nutrition
Wellness Supplement Brand 

Product Line
• Protein powders
• Vitamins
• Hydration supplements
• Subscription bundles

Customer
• Ages 20–40
• Fitness-focused consumers
• Value clean design and transparency

Current Digital Problems
• Inconsistent spacing
• Low-contrast text
• Weak subscription flow 

Built-In Accessibility Challenges
• Ingredient lists must be clearly structured
• Subscription steps must be visually distinct
• Color cannot indicate flavor alone
• Mobile readability required


Screenshot 2026-05-08 at 9.27.20 AM
Screenshot 2026-05-08 at 9.27.24 AM

I used a mix of these 2 moodboards for initial designs. 


Screenshot 2026-05-08 at 9.29.59 AM

These are all of my initial rough sketches for logo ideas. 


Screenshot 2026-05-08 at 9.30.10 AM

I then further developed my favorite sketch ideas digitally. 


Screenshot 2026-05-08 at 9.30.18 AM

This is my final logo design. I used the P and F shapes to create a version of the universal girl symbol and focused my brand on women's products. I then added the leaf shapes to communicate the wellness/ natural side of the brand. 


Screenshot 2026-05-08 at 9.30.24 AM

I then created an entire design system of the brand, including logo, colors, typography, icons, and imagery. 


Screenshot 2026-05-08 at 9.39.23 AM
Screenshot 2026-05-08 at 9.39.35 AM
Screenshot 2026-05-08 at 9.39.45 AM
Screenshot 2026-05-08 at 9.39.52 AM
Screenshot 2026-05-08 at 9.39.59 AM
Screenshot 2026-05-08 at 9.40.05 AM

Here are my final page designs for the PureForm website, created in FigmaMake.


Screenshot 2026-05-08 at 10.06.36 AM
Screenshot 2026-05-08 at 10.07.07 AM
Screenshot 2026-05-08 at 10.07.17 AM
Screenshot 2026-05-08 at 10.06.45 AM
Screenshot 2026-05-08 at 10.06.57 AM

We then made Style Guides for our brand. Here are all of my built-out pages on the Brand Guidelines. 


Selected Works

Redesigning CanvasProject type
Public UXProject type