Product Page solution for a content site.
Project Goal
An easily maintained web layout that translates well into mobile, tailored to the needs of a content product page design.
My Role
Lead UI/UX Designer
Image Editor
My Responsibilities
UI/UX Research, image editing, photography art direction, wireframing, and prototyping
The Challenge
Prior to starting this project, the NewAge Products brand had already been built on the WordPress platform, and we recently had a large restructure of content after new product categories were added.
The scope of that project was focused on showing the new product in the best light possible, focusing the content on key features and benefits. All while trying to standardize the layout based on still-developing brand design systems.
The team’s goal was to improve the visual representation of the product, supported with well-written content, and to take into account the business needs to make the site creation process more efficient going forward.
Business Needs.
NewAge Products brand specializes in niche home, outdoor and garage products, with all of the products sold only online and mostly in bundles, so any solution for this accessory product would need to push users to the product bundles to reflect the brand’s offering.
The key features were functionality and product engineering, following with design that encompasses the minimalist aesthetic common for all products within this brand.
Wireframes
Using wireframes and creating journeys helped us visualize the content before it was even in place. These low-fidelity prototypes are not very presentable to clients, but they ensure that we are placing the content in the right place and that we are writing the right content, and ultimately, using it to dictate what imagery should be produced.
Design system.
NewAge Product brand had a still-developing Design System, and every new page we are creating helps to narrow down the brand’s visual representation and establish solid design rules.
Each component on this product page was designed from the building blocks, based on design principles. We have created a library of full components, smaller elements, and usage guidelines, all included in the NewAge Products Design System.
This gives designers a clear idea of where they can mix and match elements, and helps build a brand identity. The design process, prototyping, and development can happen faster, all while maintaining brand consistency.
Content
We structured the content, starting with key features that were prioritized based on importance from the consumer perspective. For this product, engineering and functionality features outweighed the design aesthetic. We worked closely with product designers to make sure we are hitting every important point and speaking consistently and accurately from the legal perspective.
Following product features, we introduced usage, installation, and services associated with the product that might be valuable to the end consumers.
Further down the funnel, we pushed the users to the Shopify page to purchase and to product bundles that offer the best value and are sold with this product.
Takeaways
The end product was a product page that formed a library of reusable web components, available for all designers on the team to use. These libraries will be forming the basis of our design system and will be significantly reducing the wireframing time from one week to 1 day going forward. The new components will be used to refresh the rest of the product pages on the site and to build new pages respectively.
The product page was built from wireframing to a high fidelity prototype in less than a week, due to a streamlined content framework that dictated image production, and due to a library of web components that made the design process that much easier.