After a year of failing to launch their site due to poor project management and improper platform selection, Nordic Naturals — a supplier of vitamins, health and fish oil products — found a new partner in Optaros, the eCommerce offering of MRM McCann who brought me aboard to design the mobile responsive aspects of the new site…an important feature that Nordic’s old site had never possessed. The challenge lay in creating a frictionless mobile experience for a content-rich site, presenting 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.
Working from provided visual designs, I partnered with another UX lead (who handled the desktop version of the site) to establish basic patterns that included collapsible drawers and carousel controls, allowing Nordic to present as many products or as much information without forcing the user to scroll through everything to select content pertinent to their needs. Streamlining the product listings and pages, as well as the checkout experience, tertiary information pages and navigation to work within the new Magento eCommerce platform, resulted in an informative, user-friendly mobile shopping experience that includes meaningful customer interactions.
Nordic had previously contracted a third party to establish the visual language for the new website. When I came aboard, the discovery phase had already been completed, so after quickly absorbing all written and recorded materials from the client, the project's UX Lead partnered with me to swiftly establish a set of basic patterns to be carried throughout the site, including fonts, colors, components and modules
Drafting wireframes and visuals in Sketch, and working from traditional out of the box Magento features, I spent a week per each set of five batches of design, including documentation for both the client and front end development, adding a week for each set of revisions based on client feedback. My key tasks were to offer feedback to the UX Lead as regards the overall visual language / logic of the site (including the desktop version) and reformatting it for a mobile responsive experience that would not require endless scrolling for Nordic's users — a challenge for an experience heavy with information paramount to conveying Nordic's value to its users.
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 does not detract from the site's purpose nor overpower the content, shopping or navigational experience.
Of course, the keys to any successful shopping experience are well-designed Product 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 experience above-fold, 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.
Combined with a UGC social feature in a stacked horizontal footer, along with custom data visualization throughout, Nordic's new site is the first step in a direction that will allow greater conversion from Home screen to Point-of-Sale, and leverages them onto a platform that can allow greater social implementation, a Loyalty Rewards program among other features to improve engagement, revenue and most importantly, positioning their brand for a bold new evolution. As development on Phase 1 was wrapping, our team returned to Nordic to discuss a second phase with the aim of pivoting them away from focusing on telling their story, and instead focusing on the user's story— what they want and need from Nordic, why they're coming to the site. To that end, I supplied a quick series of revamped desktop designs in which existing functionality has been reorganized on the Home screen and within the layered navigation to better focus the user toward their own needs versus Nordic's perceived value ("I want to see better).
