Webpage Product Animation: New Balance
UI Design/Interaction Design
Timeline: 1 week (November 2023)
Tools: Figma, Adobe Photoshop
Role: User Interface Design, Animation Prototype
PROJECT OVERVIEW
Elevating user experience with animation
In the realm of user experience and user interface design, product animation plays a pivotal role in enhancing the overall usability and appeal of digital products. Well-crafted animations help convey the functionality and purpose of different elements within an interface, making it easier for users to understand and interact with the product. I've found that product animation within the sneaker industry is a bit untapped, so I decided to build this project on my daily pair of sneakers, New Balance 990's.
direction
The inspiration
My direction for this project was a clean, sleek look with a utilization of white space to place more emphasis on the product. I drew a lot of my inspiration for this project from Apple’s clean and minimal product marketing which effectively conveys simplicity, elegance, and functionality.
wireframe
The blueprint
Because my vision was to have the sneaker selection rotate, I had to reserve one side of the screen for the product alone so they don't interfere with the product description. Likewise, I opted to go for a simple interface with little distractions from the calls to action enticing the user to proceed.
develop
The animation
Where static designs come to life. I've realized that the utilization of motion blur hasn't been as much of a design trend in product presentation, so I thought it'd be an innovative and intriguing way to present my products. I utilized the smart animation feature in Figma to allow for the smooth transitions.
delivery
The implementation
In the high-fidelity prototype, the screen background color changes with the user's colorway selection, adding to the level of engagement. Unselected colorways are blurred out, but then rotate into focus once selected. My overarching intention was to draw as much attention to the sneaker itself with captivating visuals. A more engaging product presentation can lead to an increase in user interaction.
insights & opportunities
Wrapping up
My biggest takeaway is that you don't have to be a seasoned, expert animator to implement animation into your design. By learning how to use the right tools in Figma, the world is your canvas. It's an essential skill to develop as it sustains user engagement and prevents design from feeling "flat," so I'm dedicated to improving this portion of my skillset.
If I were to revisit this project, I would consider:
Developing a mobile breakpoint
Making CTA's (calls to action) interactive
Including a "view 360" feature of the selected sneaker