Ribeiro

User Research, Information Architecture, Interaction Design, UX Architecture

Ribeiro is an Latin-American retail business headquartered in Buenos Aires, Argentina. They are one of the top three retail businesses in Argentina, with over 90 physical locations spread throughout the country. However, they realized they needed assistance building up their digital presence to compete with other retail businesses that prioritized digital.

Our digital experience team performed a full week of workshops with the Ribeiro core commerce team, including branding, tone and voice, feature ideation and prioritization, as well as several interviews and design workshops. Ribeiro's goal was to provide a "best-in-class" online experience for their customers, and overcome the trust barrier many Argentinian customers demonstrated towards online shopping.

As part of the engagement, I conducted user research and site visits to their retail locations, created a new information architecture, crafted wireframes for all necessary pages, designed interactions, and designed a new model for processing payments within the convoluted Argentinian financial payments system.

Research and Ideation

Our first step was to understand the problem space. We performed multiple workshop-style sessions with Ribeiro’s leadership, marketing, commerce and IT teams to understand their brand direction, market segment, client base, and current challenges the business experienced, as well as their goals as a retailer.

We then embarked in a series of ideation exercises, including mood boards, rapid feature ideation, and the crafting of tone and voice standards. Brand colors and themes were also defined during these sessions.

After completing an audit of their current eCommerce experience and monitoring several analytics tools installed at the beginning of the engagement, we identified several key pain points that were holding back conversions.

• Inconsistent product navigation information architecture and unclear categorization models.

• Confusing Product Detail Pages that did not feature clear CTA’s, value propositions or shipping information;

• Complex registration process that asked for too much information too quickly;

• Checkout flow that was disjointed, spanned multiple pages, and had no continuity from one step to the next.

We created designs for the entire eCommerce experience, but this case study will focus on the solutions to these primary pain points.

Execution

Navigation and Categorization Architecture

Ribeiro’s existing IA structure was based on ad-hoc decisions by IT staff, influenced by different seasonal marketing priorities or competitive pressures. To ensure that our newly designed IA and navigation schema led to better discoverability, I performed an IA audit, redefining logical product groupings based on customer use-cases and competitive research. I then laid out the proposed nav categories in a detailed spreadsheet. Finally, I performed a remote card-sorting exercise, injecting a small CTA and link on Ribeiro’s site encouraging users to complete the exercise. This served to help validate our decisions, and adjust certain categorization models.

Navigation outlines, spreadsheet and card sorting affinity matrix

Navigation desktop/mobile - wireframes

Navigation desktop/mobile - final UI

Product Detail Page

I designed a PDP that incorporated a clear “Buy Now” CTA, where previously the CTA was buried beneath the fold. I also elevated Ribeiro’s strongest market differentiator: their extended warranty service.

Ribeiro is known in Argentina for the exceptional post-purchase service they provide in their physical stores, and this has earned them a large amount of consumer trust. This value, however, was not reflected on their site.

Additionally, the existing PDP did a very poor job of explaining in-store availability and shipping information. This created a user trust issue, as many locations in Argentina, outside of Buenos Aires, experience challenges with shipping goods. Elevating this information on the PDP, in an interactive manner, helps to increase the user’s comfort and set realistic expectations.

Medium fidelity wireframes - PDP

Final UI designs - PDP

Store/Shipping Locator tool - wireframes and final desktop UI

Registration and Sign-in

The existing sign-in and registration pages had divergent styles, poorly designed forms, required too much information (than what was strictly needed by their CRM system) and no way to validate passwords after entering.

I designed a unified sign-in/registration page that separated the experience via a segmented control, which included social sign-in as the primary method, consolidated as many registration fields as possible, and added password validation within the registration page.

Sign-in and Registration page wireframes

Sign-in and Registration page final UI

Checkout

The current checkout experience consisted of 6 separate pages, each one asking for, or confirming, a discrete piece of information in each page. This layout was extremely inefficient, and produced a massive cognitive load for its users, forcing them to remember what came before. Per analytics data, checkout contributed to most of the abandonment by users.

Another big issue was borne out of the convoluted Argentine banking system. Due to government regulations, users purchasing anything online have to select through multiple combinations of credit cards, issuing banks, and payment terms. Ribeiro collected payment information in two separate, non-contiguous pages in the checkout flow. We combined all the payment sections within one section of an accordion-style checkout page, and incorporated Ribeiro’s in-house financing services.

Checkout Flow wireframes

Checkout Flow final UI