Fitness Equipment Product Page
Role:
Designer
Design Tool:
Figma
Timeline:
April 2025 - May 2025
Course:
User Interface Design
This product page was developed as the final project for my User Interface Design course. The assignment's objective was to demonstrate mastery of the full UI design process we covered throughout the semester including design systems, color variables, typography, elevation, and component organization.
The project began with pen and paper wireframes, informed by user centered questions. I gathered feedback from both peers and my professor, which guided several iterations of the initial design. This feedback driven approach helped refine the wireframes before moving into the digital phase.
Next, I moved to Figma to create low-fidelity and high-fidelity wireframes. I chose to design a minimalistic fitness equipment product page that emphasized clarity and ease of navigation. With each prototype, I incorporated additional feedback to enhance the user experience.
In the final stage, I implemented key UI principles such as design systems, consistent use of color variables, and elevation to create a cohesive and intuitive product page.
The final design allows users to quickly access essential product information and make purchasing decisions efficiently. If more details are needed, users can easily find them by scrolling. By focusing on simplicity, the design supports a seamless decision making process without overwhelming the user.
Guided Questions & Pen-Paper Wireframing with Peer Feedback
Guiding Questions, Pen and Paper Wireframing with Peer Feedback:
These are the questions that helped guide the first round of pen and paper wireframes. I collaborated with a classmate to create four initial drafts. We received feedback from both peers and our professor, and took detailed notes on what could be improved. Using that feedback, we created one final revised wireframe. After one more round of professor feedback, we moved on to building wireframes in Figma.
Feel free to look around the FigJam file above!
Low Fidelity and High Fidelity Wireframing
Low Fidelity and High Fidelity Prototyping:
After several iterations of the product page on paper, I moved into the wireframing stage with a series of low-fidelity drafts. I started by setting up a basic typography system to use consistently throughout the prototypes. I also organized icons and components into separate pages to keep everything structured and easy to manage. Once the foundation was in place, I began prototyping.
Through multiple iterations, I gathered peer feedback that helped guide specific design improvements. When it came time to create high-fidelity prototypes, I incorporated key elements such as design systems, color variables, interactions, component organization, grids, and elevation. My goal was to create a clean, minimalistic product page that made the shopping experience simple and intuitive for all users.
Feel free to look around the Figma file above!