Outdated designs not built for the future
One of the most important pages of the customer journey is the Product Detail pages, they are the place of conversion for the small and mid-sized customers.
This is a page that could not go live unless we this would make a big impact. So, we needed the product and marketing team to be fully on board with it.
This was one of the pages that we did a traditional Design Sprint with to ensure we had the best product moving forward.
Teamwork
Design Thinking to ensure the page is future proof
When we started looking at the current page we came across a lot of issues that didn’t not only fit the current business goals but fit the tech stack that was being implemented for the future.
We did a reintroduction to the page to the teams from a journey perspective talked through the personas that would approach the page and some rough wireframes were created.
Place within the journey
Problems with the current page
← Too much to scroll
← Card Art is cropped
← Fonts don’t match the rebrand
← Modules don’t work in the current codebase
← Inconsistent padding
← Cannot present information cleanly
← Content on the page is cold & unwelcoming
Page Concepts
Validated tests that paved the way to success
One of the things we wanted to keep in mind when putting these new page templates together was taking cues from what we learned in Quant testing previously.
Things like a lock icon in the button, full size card art, sticky elements and how we treated accordion menus were all added to the page.
As we went from the sketches to the low-fidelity wireframes I led a content hierarchy exercise so we can write the story of on page to start ‘The Platinum Card’ page.
With that we gave a wireframe to the copywriter to generate content and I could go into visual design.
Page Designs
An interactive modern look to an updated experience
As we came to the final design we worked through a lot of additional elements to be added. At the top is an easy navigation to go from one card to another. We added rotating text in the hero showing ways to use the card, accordion menus to keep all the wordy sections tight.
The angled hero space was to add a pop of color and give the card some depth. We took our long form copy and turned it into digestible points. Along with adding more imagery to show the lifestyle of the card.
Final Desktop
Final Mobile
Hero Variations
