Go Back to my Work

Nordic Naturals | B2C Mobile Responsive Website

Owning 40% of the fish oil market, Nordic Naturals struggled with a secure and stable online environment—nor did they have a mobile version of their website. They hired Optaros by MRM McCann to design and build a Magento 2, B2C eCommerce experience that could scale to support 1 billion in online revenue

My Role: UX, UI, Visual and Interaction Design

WHAT ARE WE BUILDING AND WHAT NEED DOES IT SOLVE?

Optaros guided Nordic Naturals to select the ideal eCommerce platform based on their goals, requirements and user needs, advocating for a mobile-first approach. The proposed new site would be an informative, user-friendly shopping experience that includes meaningful customer interactions, social feeds, subscription ordering and a more modern design aesthetic.

DISCOVERY: WHAT ARE THE NEEDS OF NORDIC'S END USERS?

Optaros brought me aboard originally to design the mobile responsive aspects of the new site…an important feature Nordic’s old site had never possessed. The challenge lay in creating a frictionless mobile experience for a content-rich site, presenting Nordic's wealth of scientific information in a navigable way that worked with the new platform and also did not require the user to continuously scroll in order to access the information.

By the time I came aboard, the discovery phase had already been completed by the Experience Strategy Director and Dev, so after quickly absorbing all written and recorded materials from the client, I partnered with the project's UX Lead to divide our efforts in crafting the new Magento experience.

DEFINITION: HOW EASILY CAN NORDIC'S USERS IMPROVE THEIR HEALTH?

The first task that lay ahead was streamlining the site map, taking care to focus on the way users navigated to the categories and products via both the Home page and main navigation. Additionally, Nordic had previously contracted a third party to establish a new visual style for the new website and we were provided with mockups in Photoshop, though no proper pattern library or consistent visual guidelines. Working with our director, I took on the site map and also established a basic set of patterns with defined language that would keep all components, styles and colors consistent throughout.

DESIGNING MOBILE-FIRST.

My key tasks were to keep the UX Lead (who undertook wireframes on the desktop side only, as we both partnered on functionality across the site) on track as regards overall visual language while working independently to reformat the experience for mobile. The strategy was to create a UI that would not require endless scrolling for Nordic's users — a challenge for an experience heavy with information paramount to conveying Nordic's respected, scientific value to its growing community of consumers.

Drafting high-fidelity wireframes and visuals in Sketch, and working with traditional out of the box Magento features, I spent a week per each set of five batches of design, including documentation for the client and front-end development, adding a week for each set of revisions based on client feedback. Finally, I annotated each set of screens to call out functionality, styles, patterns and interactions.

Ultimately, I employed several methods in which to condense information in a way that decreased depth from the experience yet still kept it available to users engaged enough to consume. Adding collapsible drawers, carousel controls, tabs and toggles to the experience not only compartmentalized and hid pertinent information until needed, but also increased the ability for users to interact with the site in a natural yet interesting manner...but in a subtle manner that did not detract from the site's purpose nor overpower the content, shopping or navigational experience.

A FUNCTIONAL, EASY TO NAVIGATE SHOPPING EXPERIENCE.

The keys to any successful shopping experience are well-designed  Listing and Description pages. Thankfully, Magento 2.0 provides a cohesive structure in which to work but I did my best to adjust module spacing and reorganize the placement of sort / filter buttons in order to bring as much pertinent information to the top of the experience, decreasing the need to scroll. Sorting was tied into the device's specific picker functionality, while filtering became a custom full-page overlay, much like the menu navigation, a departure from standard Magento filtering functionality. In addition, I continued to employ collapsible drawers for supplemental description and research materials that gives users additional information in order to educate them about the product, but are not vital to the purchasing experience — it's there if you need it, but you don't need to expand if you want to make a quick buy.

Nordic's new site is the first step in a direction that allows greater navigation from Home screen to Point-of-Sale, and leverages them onto a platform that can allow greater conversion to sales, a more robust social implementation, and a Loyalty Rewards program among other features to improve engagement, revenue and most importantly, positioning their brand for a bold new evolution

ITERATING: ADVOCATING FOR THE USER, IN PARTNERSHIP WITH THE BRAND.

As development on Phase 1 wrapped, we returned to Nordic for a UX workshop to discuss a second phase with the aim of pivoting the focus of their site away from telling Nordic's story and value, instead highlighting the user's immediate need from the moment they arrive on site—why is the user here, and what do they want or need from Nordic Naturals?

I was asked to undertake a quick audit of the in-progress site and advocate for ways to increase quicker conversion into the shopping experience. To that end, I supplied a series of revamped desktop designs in which existing functionality was reorganized on the Nordic Home screen and within the layered navigation to better focus the user toward their specific needs versus Nordic's perceived value ("I (i.e., the user) want to see better" instead of "Nordic delivers, etc"). As Nordic Naturals continues to mature their eCommerce solution and hone in on the needs of their users, they will iterate toward a website that satisfies both efforts to broadcast the company's mission and its desire to increase sales and subscriptions, both of which will be achieved by providing a frictionless shopping experience that advocates toward the needs of its user.

JAFRA

B2B CONSULTANT APP

NORDIC NATURALS

MOBILE RESPONSIVE WEBSITE

THE TOPPS COMPANY

MOBILE COLLECTING APPS

MATH DONE WRITE

EDUCATIONAL APP

VIRTUSA

MOBILE CHECKOUT REDESIGN