A high-end lifestyle retailer e-commerce site that sells carefully curated products by several top-selling brands
Introduced to Ron & Stacy through our good friends at e11even X, we were brought on at a time where RonRobinson.com had just been migrated to Magento from Volusion. And a few things happened:
- site load times had increased substantially (page load times between 6-10 sec),
- revenue had decreased month over month by almost ½,
- a lot of simple features/management of the site had bugs which were taking months to fix.
Our analysis led us to the following strategy:
- Tackle the quick wins that we are experts in: site speed & conversion checkout optimization
- Bring things into Magento standards so that the bugs are permanently fixed
- Move to a scaleable managed hosting company
We started with a team of 1 dedicated Magento Certified developer (1 backend) and then added a full time User Experience and User Interface designer plus a User Interface Magento developer:
took over complete management of their web assets from another agency covering all web related needs. Moved hosts, brought the code to a stable position, inserted a brand new checkout.
wanting to capitalize on the holiday season and knowing we only had a few months - we took the components of the funnel that had the lowest conversion rates and redesigned them. We launched a brand new homepage, header, footer, and product page without a complete overhaul.
moving further down the funnel to complete the redesign, we focused on Category, Subcategory, Designer, Cart, and Checkout pages. We plan to complete the full relaunch by end of March 2017.
- Decreased cart abandonment by 13%
- Site load time decreased to under 2 seconds across all pages
- Visitors spent 42% more time on homepage
- 25% more time overall on the site
- Decreased bounce rate by 82%.
- Customers who landed on new homepage converted at 13% higher conversion rate than those who landed on older homepage.
Ron Robinson had a solid customer base, an eclectic assortment of high-quality products, a discerning lineup of brands - and even a feature in a rock song. But their website seemed a little too dated, too colorless to accommodate all that the brand had to offer.
And it wasn’t just the visual design that needed upgrading. There were a number of hiccups in the user experience as well. The site was functional, but hadn’t made the user their absolute number one priority. We wanted to design a site that prioritised the user’s needs and expectations.
We covered the redesign in the following order:
- Header and Footer
- Product Detail page
- Category page
- Cart and Checkout
Here were our primary guiding principles :
- Crank up the visuals - We wanted to populate the site with more vivid imagery and color. This meant dedicating more space and curation of visuals.
- Clear interactions, solid affordances - Give the user a clear idea of clickable areas, and reaffirm the user’s confidence in their actions.
- Bring structure to the visual language - Adopt a solid visual grid that serves as a base for consistent spacing, typographic hierarchy and consistent interactions. We created versatile modules that adapt to different contexts but reduce production time.
- Refine the User Flow - prioritise more important user functions over others, eliminate superfluous actions. Essentially make it easy for the user to find what they came looking for.
- Make the site optimised for mobile - with the growing no. of mobile users, the site needed to convert more of that small-screen traffic that was pouring in
- Maintain but elevate the Brand language - Ron instructed us to adapt a livelier shade of Blue for the accent throughout the website, and we replaced the previous typeface with a bolder, modern one.
- We created a two-tier structure for the header to show clear demarcation between the reception desk and the different shopping aisles, so to say.
- The range of categories that RR catered to - Women, Men, Beauty, etc were hidden under a Shop by Category dropdown - we decided to have them as exposed Navigation buckets, which, on hover, will yield a dropdown that will list the categories within. This was done to ensure that the user grasps the range and versatility of products RR sells at a glance.
- We relegated Events, A-list etc - options of relatively lesser business importance - to the footer.
- We also decided to add Featured images to the hover drop-downs to make it more visually compelling for the user.
- We decided to make the Free Shipping announcement a permanent fixture on the Top Tier - this was a major draw for customers, and we didn’t want them to miss it.
- We tightened the header, made the search bar more prominent and created a sticky version so the user can access it at all times.
The homepage essentially needs to captivate the unsure user, the user who comes looking for nothing in particular, just about enough to tip him over to purchasing something. Hence :
- We went full-throttle on the visuals - add more imagery, more content, more sections.
- We made sure to call out to every set of audience - women, sale-conscious users, trend-conscious users, etc in this visual banquet.
- We included carousels of shoppable products on the homepage itself - giving the user more direct pathways for conversion.
- We made the introductory Sign up offer and the shipping offer more prominently on the homepage.
- We created dedicated sections for featured Designers and Brands.
- >We added a Shop by Category section wherein we spell out the main header navigation buckets visually.
- We added a Social Media Feed and a blog field - a way to engage the users beyond simple buying and selling.
- We added a banner to make the title of the page more recognisable and appealing
- We drew user’s attention to the products by making them stand out from the background
- We revamped the side-navigation to make the list more scannable - the user shouldn’t struggle to see where he is or where all he could possibly go.
- Instead of a single Brand filter inconspicuously placed under the side-nav, we created a separate, noticeable filter module. It can accommodate multiple filters while maintaining visual balance. This became a reusable module.
- We replaced the pagination navigation with a LOAD MORE button that provides a more intuitive. mobile-friendly browsing experience
- Subtle but clear distinction given to the subcategory page to suggest category hierarchy
- The single most important element in a PDP is the ADD TO CART button - and we made sure it got all the attention it deserved by pushing it above the fold and giving it the top slot in the visual hierarchy of the page following the product.
- We demarcated the configurables that are in the user’s control by grouping them into a box
- We made sure the product image occupied maximum footprint on the screen - while balancing the information on the right.
- We reiterated the free shipping offer to reassure users that they’re taken care of
- We displayed Product Detail information in the form of collapsible accordions, so that it can cater to both one-line descriptions as well as lengthy paragraphs. This also served as a better solution than tabs for mobile users.
It’s the undecided user who would usually reach to the Category Landing page, someone who wants to be sold to or be persuaded to buy.
- We added a banner carousel to add a visual pop to the page, while showing the user our best offers and featured brands/products.
- Instead of bombarding the user with too many special offer banners, we decided to display rows of shoppable product-carousels - This allows them to explore different categories as well as get a taste of the products within those categories.
We created this page from scratch. Previously, RR simply had a rambling alphabetical listing of designers - there was no way to find a particular designer and we weren’t calling out our star players.
- We added a Featured Designer Carousel to aid discoverability for undecided users.
- We made the list much more scannable, with large clickable spaces and clear alphabet labels.
- We added a much-needed alphabetical filter as well.
- We reused the underlying structure of the Category page, thereby avoiding a lot of custom development
- We adapted Awesome Checkout to our new visual language.
- We decided to display our guarantees/offers more prominently on the checkout page.
- We reduced the header to its most minimal form - to minimize distractions for the user while still serving as a consistent site-wide element.