New Country Organics
Industry: E-Commerce
Platforms: Web/Mobile
Role: UX/UI Designer
Team:
3 Developers
Product Manager
Project Manager
New Country Organics is a trusted source for organic poultry and livestock feeds, as well as responsible animal bedding, soil, horticulture products, and health products over the years. They have become the online wholesale and retail marketplace connecting organic farmers, enthusiasts, and green gurus to super premium products.
My role was to transition their B2B system to direct-to-consumer. In addition, I was responsible for developing a strategy for maintaining and increasing user conversion/user retention. Finally, I designed a user interface that was engaging, informative, and aesthetically pleasing.
Overview
The Challenge
Due to the global pandemic, New Country Organics decided to switch to direct to consumer model, mitigating the problem of purchasing their items from a wholesaler. However, many users had difficulty understanding the high price of shipping costs, resulting in user drop off.
The Goal
The goal was to create an interface that was upfront and engaging with users concerning shipment costs and weight of product. In addition, imagery/copy was updated to reflect the new direct to consumer model.
The Solution
The solution was a full desktop redesign that reflected the new direct to consumer business model. We also put an emphasis on the value NCO’s shipping services.
Information Architecture
This diagram of information architecture helped distinguish the organization of data flows and controls, logical design, and physical implementation.
The hierarchy planning of the site serves as way of dictating the end user’s success. By determining the user behaviors and achieving the ultimate goal of user retention and user conversion, the team was able to decide the common behaviors of these users.
The process of finding a product, selecting a product, entering it in the cart, and proceeding to shipping/payment is conceptualized through this graph.
Workflow Chart
Workflow Steps
Login using existing account information
If after one hour, the payment hasn't been completed, then abandon check out
If the payment is completed, then proceed to shipment
If the payment is partial, trigger a partial payment task
If the customer has paid too much, then the overpaid task is triggered
If the payment is declined, then the checkout is stopped.
Wireframes
In order to accurately develop a feasible, aesthetically pleasing, and usable design, I created a couple of different wireframe variations. These wireframes helped both designers and programmers think and communicate about the structure of the website.
These wireframes were useful in providing stakeholders with layout options as well. The team was able to come to a final conclusion as to how the layout was formatted. From there, we were able to input high-fidelity imagery and components.
High Fidelity Mockups
Landing Page
Mini Mega Menu
Free Shipping Items Banner Dropdown
Item Added to Cart
Detailed Shipping Banner Dropdown
Products Page
Detailed Product Page
Customer Login
Shopping Cart
Shipping Info
Payment Method
With the help of the marketing team at New Country Organics, the screens were updated with high resolution imagery, components, and functions that were then transferred to the development team. Additionally, these screens were presented to all stakeholders for feedback.
The style guide and color pallet were predetermined by the marketing team. However, some of the CTA’s needed some adjustment in order to be in alignment with the primary, secondary and tertiary functionalities.
Mobile Prototype
After finalizing the screens with high resolution imagery and components, I created a functional prototype that displayed the functionality, imagery, and workflow for the end user. This prototype gave all stakeholders a look at the functionality of the site. Additionally, this helped confirm the final design choices that were then given to the development team.
Desktop Prototype
After finalizing the screens with high resolution imagery and components, I created a functional prototype that displayed the functionality, imagery, and workflow for the end user. This prototype gave all stakeholders a look at the functionality of the site. Additionally, this helped confirm the final design choices that were then given to the development team.