Projects
Close

Farm Rio Wholesale

Farm Rio Ecommerce

Farm Rio + Levi's

Consul Facilita

FGV Finder

About

Farm Rio
Ecommerce

In the end of 2021, FARM Rio decided to stop outsourcing the development of their e-commerce and started to put together a dedicated product team to deliver new features and improvements.
Role
Lead Designer
Process & Attributions
Research
  • Stakeholder Interviews
  • User Surveys
  • User Personas
Strategy
  • User Flows
  • Feature Mapping
  • Roadmap
  • Information Architecture
  • Metrics Definition
Ideation
  • Concept
    Sketches
  • Wireframes
  • Low Fidelity Prototypes
Design
  • Styleguide
  • Component Library
  • High Fidelity Prototypes
  • Validation

The Context

Differently from working on the Wholesale platform, where we had to build the site from scratch, the ecommerce was already up and running and improvements were to be made on a part by part basis.

The Challenges

Differently from working on the Wholesale platform, where we had to build the site from scratch, the ecommerce was already up and running and improvements were to be made on a part by part basis.

Features Breakdown

Below are some features I helped to improve while I worked on the ecommerce. Full process details might not be available due to sensitive information issues, but I'll be glad to talk more about them if you get in touch.

Help center
Menu
Search

An old, dated, polluted and disorganized layout gave way to a cleaner, robust, flexible and friendlier Help Center.

IMPLEMENTATION RATE
60%
USER PROBLEMS

There was no information hierarchy or organization, and users had to browse through every item. The layout was outdated, and certain informations were split in different sections.

BUSINESS PROBLEMS

Without being able to find information they were looking for, users went straight to customer service and flooded the team with unnecessary tickets demanding answers they could've otherwise found on the website.

Old Version

The old FAQ lacked hierarchy, organization and brand fit.

Structure & Layout

The tabbed layout was old and clunky, required constant support from the dev team due to its lack of flexibility, and responsiveness was also an issue.

Content & User Feedback

Content was often misleading, since some topics on the FAQ were also displayed as tabbed sections, and content was frequently outdated in some sections. There was also no way to measure user satisfaction with the answers provided, or if the users found the answer they were looking for at all.

Contact Information

Contact information was kept only in one of the tabs, with no other way of reaching it besides going to the FAQ, so clients found themselves frequently searching through their emails or social media for contact information.

Information Clarity

No way to search topics other than visually scanning the whole content. The images used on the background added too much visual load, and the accordion content was unorganized, often with questions from the same subject scattered through the page.

New Version

The old FAQ lacked hierarchy, organization

Structure & Layout

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. On the internal pages, the accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Content
& User Feedback

Information hierarchy was discussed with the CX team, and the content written from scratch and divided into subjects. A feedback component was also created, so that the CX team could get gather feedback on wether the content they wrote was useful or not.

Contact Information

Besides being brought to the front and center on the initial screen, contact information is now present in every section, below every question. If the user can’t find what they’re looking for in a list, then they’ll look for other means to get the information they want, and those means are right below.

Information Clarity

On the copy we adopted a warmer tone, navigation became more descriptive, with newly designed icons. We improved hierarchy with well defined sections, and cleaned up the layout through a generous use of white space. Type hierarchy and microinteractions also helped the user make sense of where she is.

New Footer

A new footer was also introduced, with the most important topics being displayed and direct links to each section or question, making the Help Center more accessible.

Flexibility & Autonomy

The redesign also brought productivity gains for both the product team as well as other teams (sales, CX) that managed the site daily. New pages became easier to create, and didn't required interruptions on the develpoment side.

Structure & Navigation

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Content

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Contact Information

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Visuals

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Search and User Feedback

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Flexibility & Autonomy

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Structure & Navigation

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Content

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Contact Information

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Visuals

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Search and User Feedback

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Flexibility & Autonomy

An initial screen was introduced, with topics, a selection of the most frequently asked questions and contact information. The accordion structure was kept, but with tweaks on spacing and typography, and each question got its own url so that they could be directly linked elsewhere, such as the newly redesigned footer.

Turning around many missed opportunities on the main navigation.

IMPLEMENTATION RATE
90%
USER PROBLEMS

No hierarchy and effective categorization made the task of finding product types in the menu a lot harder than it should. It was also unintuitive, with many usability issues.

BUSINESS PROBLEMS

Some product categories were buried 2 clicks away from the user, which hurt product discoverability. Besides usability issues, the menu also didn’t reflect the brand’s look and feel.

Old Version
Process

No formal process to manage menu items, their placement or visibility. Items on the menu changed positions constantly and/or were taken down due to commercial reasons, making it harder for the user to pin down specific categories.

Usability & Navigation

On desktop, the trigger interaction for the menu to open was the click, which was a lot less agile for users to scan all the navigation content. Users had to click to open a top level section of the menu, click to view a subcategory (Bottoms › Skirts, Shorts, etc), the click to open another top level section, then another click to close the menu etc etc. On mobile, this meant users had to keep going back and forth through 3 navigation levels.

Hierarchy & Organization

No clear hierarchy between items, categories were grouped randomly and mixed with other items such as theme collections and gift cards.

Visual & Branding

The menu was visually poor and everything from the visual side was a little off from the branding guidelines, down to font weight, colors and backgrounds.

New Version

The process behind putting together a new menu was a lot more complex than just designing and handing off to development. It was a cross team effort with shared responsibilities between design, development, sales, marketing and SEO teams, which I led from start to finish.

Process

Since the daily maintenance of the menu wasn’t part of the product design squad’s responsibilities, establishing processes to be followed was crucial to guarantee that the menu wasn’t going to revert to the mess it was in time.

Usability & Navigation

Since the daily maintenance of the menu wasn’t part of the product design squad’s responsibilities, establishing processes to be followed was crucial to guarantee that the menu wasn’t going to revert to the mess it was in time.

Hierarchy & Organization

A new product hierarchy was proposed to help keep things tidy and predictable on the menu, while also helping users to get a good view of all types of products that the brand has to offer.

Visual & Branding

Since they’re always at hand, menus are great opportunities to communicate brand atributes and highlight products, categories, collection launches and etc. Farm Rio is a visual powerhouse, photography, products and illustrations play a great part in the brand’s voice, and none of it was being taken advantage. So, we brought an image section to the menu, flexible to accomodate 1 to 3 images per section, depending on the marketing and sales team’s needs.

Mobile menu improvements
Early site map and category mapping

Better tool for product hunting, better conversion rates.

IMPLEMENTATION RATE
70%
USER PROBLEMS

A large portion of users in ecommerce sites use the search function as their primary way of browsing products, but we had an ineffective and unintuitive search tool.

BUSINESS PROBLEMS

Users that search in average convert roughly 2x more than users that don't search, and generate 2.5-3x more revenue. Ineffective searching equals money wasted.

Search preview - Old Version

The search preview is the first step of the search, where the user might get product recommendations before seeing the full search results screen.

Search preview - New Version

The preview received a much needed lift in visuals, interactions and behavior.

Initial State

We introduced a section with trending search terms and another with suggested products also based on the most searched products. The copy was also reworked in a friendlier, more descriptive way.

Suggestions

Errors in positioning and layout were corrected, a new input component, specific for search, was designed, along with a helper element to clarify the interaction for the search results screen. Suggested terms and products were improved, both in behavior and visual.

Search results - Old X New Version

The Search results screen received improvements as well. The input component was replaced, the number of results was lacking, and filters were made less proeminent to bring focus to the search results. Pagination was replaced with a load more button, to give us feedback on the quality of the search results for the user.