Product Listing Page - Republic Wireless

 

Product Listing Page Design - Republic Wireless

A shopping experience focused on scanability and delight.

PLP_v2.png

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.
 

My Role

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. 

Iteration

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.

Mobile_Cut.png
Several iterations of visual styles I iterated in Sketch.

Several iterations of visual styles I iterated in Sketch.

Visual Design

After a few rounds of internal reviews, the design was pitched to senior leadership, then finalized. 

Desktop View.png
 
 
Card hierarchy from the top— special callout, phone name, ratings, description, full price, financing, promotion.

Card hierarchy from the top— special callout, phone name, ratings, description, full price, financing, promotion.

 
Color contrast establishes what you'd look at first. The contrast is an optical illusion that helps you parse through information easier.

Color contrast establishes what you'd look at first. The contrast is an optical illusion that helps you parse through information easier.

 
 

Prototyping

As part of the visual design process, I also had the opportunity to prototype the design using motion as apart of the visual language.  

Framer_Proto.png

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.

PLP-Repubic-Wireless-Animations_v3.gif

Developer Handoff

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.

Specs-Sketch-Measure.png

Final Result

Here is a live version of the product listing page.

 
 
 

REsults and Learnings

Early learnings show since the launch of the page, the average time on page has dropped around 25% in the month since the launch of the page, users are now shopping faster, which is great! 

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.