Product Listing Page - Republic Wireless
Product Listing Page Design - Republic Wireless
A shopping experience focused on scanability and delight.
How it began
In 2017, the Republic Wireless web team put together a new website experience highlighting a new brand platform positioning as people-first wireless service, with clean mobile-first webpage layouts. Republic is always thinking of putting prospective members and members first, and the strategy to implement a more personalized approach to showcasing phones was no exception. I dove into this project with the goal of improving scanability, armed with user tested findings from our UX Designer.
As a visual designer, there were 8 different pieces of hierarchy I needed to organize for the UI. It was a balancing act to balance the hierarchy of the content, but also create a visually scannable layout. Collaborating between a UX Designer, Copy Writer, Marketing Managers, and Creative Director, the final result is a collaboration of business and design strategy. I was also responsible for design specs hand-off for web development.
After receiving a wireframe and UX strategy from a UX designer and Marketing Manager, I was put to work iterating visual concepts.
Mobile Visual Design
Designing for mobile-first, the card design has the content copy flow right, with photography on the left.
After a few rounds of internal reviews, the design was pitched to senior leadership, then finalized.
As part of the visual design process, I also had the opportunity to prototype the design using motion as apart of the visual language.
Establishing motion as apart of the experience
Using motion as an anchor for hierarchy, I created animated icons for special call-outs that trigger on hover. By using motion to pull the eye, naturally it will point to the objects we want the users to see first.
Sketch Measure exports an HTML document with all the information needed for a web developer. Alongside a Framer prototype, I found these to be the most powerful tools for visual design hand-off.
Here is a live version of the product listing page.
REsults and Learnings
There's lots of work left to do to test the efficiency of the UI, little by little we'll see what we can do to inspire growth through A/B testing, and further iterations upon promotions. Contact me for full learnings.