PUMA Promotional Website
Role
User Interface Designer
(Individual)
Overview
Goals
My goal for this project was to create a sleek interface that was both easy for users to interact with and aesthetically matching with the PUMA website. I wanted the information to be clear and digestible, so users would be motivated to buy the product and learn about the features the shoes offer, utilizing my use of UI laws and principles.
Process
Project Proposal
Tools
To begin the project, I created a proposal of how I would incorporate the various UI principles and laws into my final project. I defined each concept used and how I planned to apply them to the project. Click the link to learn more about how I used each UI concept in detail.
User Interface Principles
The Spatial Contiguity Principle
The Spatial Contiguity Principle states that users learn better when words and pictures are presented next to each other rather than far away. In the project, I used zoomed-in graphics paired with corresponding descriptors for the shoe details. An example of this is a close-up of the PUMA logo with the combination text reading “Cat Embroidery”. This integration and nearness between the two make it easier for users to correlate the two visuals together.
Jakob’s Law
Jakob’s Law states that users prefer sites to function in the same way they are already familiar with. Because of this, I implemented common conventional features, such as the navigation bar located at the top. This feature is typically expected to be on every page to direct users through sites. Therefore, it matches the user’s prior knowledge and concepts, also known as schema.
The Signaling Principle
The Signaling Principle states that users learn better when cues that highlight the organization of main information are used. Examples of this include headings, arrows, and distinctive colors. I applied an overview on the homepage to offer a general guide to the website, as well as clear headings and distincit visual differences to each section, further assisting users in having a smooth experience with the promotional product.
Final Prototype
My final prototype is a promotional website for the brand Puma, a sportswear company, specifically designed to promote the Speedcat shoe collection. The site includes four sections: a homepage for key information, a ‘Learn More’ section that provides details and features of the shoes, a section for different color variants and style tips, and a section for purchasing the product. Click below to visit the prototype and learn about PUMA’s shoe collection, Speedcat.
Reflection
Figma
Deliverables
Project Proposal
Prototype
Duration
2 Months
My task was to create a promotional website for the brand Puma, a sportswear company, specifically designed to promote the Speedcat shoe collection. The project was guided through the use of various laws and principles in User Interface (UI) design in order for users to learn more about the shoes and to entice users into purchasing the product.
This project has made me realize that aesthetics are not the only factor a designer needs to think about, but also the user’s experience in how easily they can navigate through my work. Designers should always take into consideration the functionality, memorability, and understanding of the user’s mind in order to make their products successful. I will continue to remember these concepts and apply them to my future work so that I can create more user-friendly experiences.