Common Projects is a high end minimalist footwear brand with a goal to increase web sales.
Website Redesign
Create wireframes for a Product Detail Page matching the look, feel, and fidelity of the wireframes for the Homepage and Product Listing Page
UX Design
Wireframing
I started discovery by researching the 4 competitors' product detail pages. I reviewed each site on desktop and mobile to compare their features & functionality. I organized my findings in a Competitive Analysis Matrix.
Next, using the functional requirements, I started sketching wireframes to get a general sense of the layout. I followed industry standards by dividing the page into two columns with photos on the left, and product details and actions on the right. It was here that I decided that a fixed right rail would help keep the most important information visible while browsing the photos.
Starting with desktop, I worked on the layout using a eComm best practices and notes made from competitive analysis. Instead of hiding product photos in a carousel they are placed in a grid allowing customers to view different angles simultaneously.
In Figma, I inspected the layout, spacing, and font styles of the provided wireframes to begin designing. I hoped to provide a clear hierarchy and a balanced amount of information on the page. In keeping all padding and content divisible by 5, I was able to create consistency across the designs. Lastly, I combed through my groups and layers to ensure that they were organized and labelled properly.