I was tasked with a responsive redesign of NexLoop's website website. I worked with their team to redesign, devise content, and build the website. The site needed to introduce the product prototype, give insight into their biomimetic design process, and offer education around biomimicry (design and regenerative innovation inspired by nature).
Nexloop's harnesses water from atmospheric sources such as rain, fog, and humidity. Their product, AquaWeb, captures, stores, and distributes water into local food production. Using biomimicry they build products and systems based on the functional principles and strategies of organisms and ecosystems.
Right off the bat, we introduced the environmental problem of water facing out planet, then segued into the product and solution. This led into benefits for users and modularity of the product displayed using iconography. Next, we dove into the product design and which aspects of nature it mimics. Additionally, the site included About, Events, Press, and Contact sections.
The client wanted the site to convey nature, therefore we chose color scheme of blue and green, as well as brought in imagery of nature relevant to the product's biomimetic function.
In order to assess the functionality of Eataly's current website, we performed usability testing and completed a heuristic analysis across key areas of the site. The results concluded:
Busy Layout with overwhelming amount of options. The important information users need is often presented secondary, often masked by large images, unnecessary spacing, and repetitive promotions.
Eataly has complex, confusing global and service navigation. It holds 10 options in the global and 10 options in the service navigation.
Users have difficulty finding what they are looking for, particularly locating specific products, brands, recipes, restaurants and reservations.
Semi-functional searchability, where the majority of searches were not producing any results.
It was clear that the delightful and beautiful in-person experience was not translating to Eataly online.
We performed analysis with brands in the similar high-end Grocerant (grocery + restaurant) sector, such as Whole Foods, Le District, and Dean & Deluca, and with those offering high-end speciality kitchen retail, such as Williams-Sonoma. These businesses offered a much simpler approach in layout and navigation with accurate product searchability.
On desktop, Whole Foods offers a shoppable Recipe section, where users can add ingredients from each recipe to their cart. This got us thinking, if Eataly customers want to recreate Italian dishes at home, then why was that experience so difficult to execute on Eataly's website? Eataly was missing out on a natural opportunity to increase sales while improving the ease of trying new Italian dishes at home for their customers.
During the research phase, we had performed open and closed card sorting using Optimal Sort, in order to understand how users could most efficiently navigate the site. We had users sort 100 of Eataly's products and services into categories. This gave insight into how users categorize information in a way that makes sense to them, which in turn informed the new site navigation.
In an effort to remedy the repetitive nature of the homepage and simplify the experience, I tapered down the number of service navigation options from 10 to 4. The categories of less priority were transferred to the footer.
I moved the Recipes section, previously found within the homepage content, into the global navigation to increase the findability. In order to reduce the breadth of the global navigation, I tucked every e-commerce item under a Shop category. which allowed me to significantly reduce the category options from 10 to 4.
I started the screen design process by sketching out variations of Maggie and Chelsea's task flows. Below is Chelsea's product purchase flow.
I simplified the layout and navigation, as well as gave the UI an updated, less harsh aesthetic. In order to improve search functionality, I would recommend implementation of proper tagging within site.