Year: 2021  |  Role: UX/UI Designer  |  Company: Folláin

‍

While working on Friday, I had the opportunity to participate in the redesign of Folláin's new website. Their goals were to create a unique e-commerce store that could process payments simply and easily, communicate their value through imagery, and provide a wonderful shopping experience that resonates with customers at every stage of the buyer's journey.

‍

The challenge

Apart from being a part of supermarket online shopping, the concept of buying and gifting jams and preserves online is relatively new. We were tasked with creating a truly unique online experience that allows users to buy and gift jam in a novel way while effectively communicating this unique idea to the user.

‍

The Recipes section of the website should be given a core focus.

‍

The user interface needed better navigation that matched how users typically search websites for products.

‍

The visual design needed to be more accessible.

‍

‍

‍

‍

Takeaways

• Information architecture (IA) needed to be restructured in a more intuitive way.

• The user interface needed better navigation that matched how users typically search websites for products.

• The visual design needed to be more accessible.

‍

Research process

• Conduct a competitive analysis of local competitors to determine the business case for a website redesign.

• Conduct user interviews to understand why, how, and what sort of products users prefer to buy.

• Perform a comparative analysis of other e-commerce websites for ideas on how to implement best practices of good information architecture and navigation.

‍

Competitive analysis

A competitive analysis was conducted to assess the business case for a website redesign. The following aspects were examined:

• A competitive market with high demand for jams.

• Other brands offer similar services.

• Websites of the other brands with similarly outdated and difficult user interfaces.

• An e-commerce website exclusively for this store, indicating that an easy-to-use website could help capture more market share.

‍

‍

Information Architecture

A sitemap was created to define how the information on the site would be linked to each other. The information was grouped based on the use of business-related information and e-commerce.

‍

‍

Wireframes

To layout all the information into the interface of the new site, wireframes were created. We started with pencil and paper to facilitate the visual hierarchies and structure of the screens, and then digitized them using Balsamiq.

‍

Visual design

The visual design process involved deciding on the visual identity of the product. We started by building a mood board to inspire us during the process and assist us in making styling decisions. The new website needed to feel wholesome and the typography should have an organic feel, giving customers the impression of almost tasting the Folláin products.

‍

‍

Usability testing

The visual design process involved deciding on the visual identity of the product. We started by building a mood board to inspire us during the process and assist us in making styling decisions. The new website needed to feel wholesome and the typography should have an organic feel, giving customers the impression of almost tasting the Folláin products.

Tested this high fidelity design prototype on the users who participated in the usability test. Based on the feedback from users:​​

• Most participants mentioned that photography of the website stands out, feels Irish, homemade, and artisan.

• Users have a good understanding of the meaning of ‘TR’ and ‘NBF’ on the website.

• Overall easy to navigate and use.

• All participants were very satisfied with the checkout and payment process.

• The visual design needed to be more accessible.

• Participants expected to see the shipping rate prior the checkout.

‍

Participants mentioned that they would like to see more video content on each recipe.​We did not have to change a whole lot from this testing phase, as we met the user’s need, making important information more easily accessible and getting rid of redundant information where possible.

‍

Check out the new site follain.ie

‍

‍

‍

‍