Remodelling an Ecommerce platform
Executive Summary
Nature's Way's commitment towards sustainability and comfortable living with quality fabric attracts new and regular customers. Nature's Way's new website design communicates its values with customers better and achieves comfortable shopping with simple and user-friendly navigation. The website is designed to build the overall tone to bring awareness to the importance of ethical and sustainable sourced materials and the joy of choosing textiles that suits each person's needs.
Consistency is the key to setting the tone of Nature's Way's value. The user interface is consistent throughout the website, which will help users to familiarise themselves with the options of materials and the way to choose the suitable one for them. The consistency of the layout guides users to find the information they want. The same utility bar, header, and footer were placed in the same position. Taking pride in providing a range of materials is recognisable on each page of the website by consistent designs focussing on the textiles. It also enhances the brand identity and builds trust (Hawley, 2018).
Personalisation is another essential element of the redesign. Each page is structured to support the user's journey of finding suitable fabric to choose materials that match their needs. The report found that customers have different focuses - some are looking for eco-friendly materials, and others are looking for non-allergy clothes. Therefore, the category and search results page contain filter components to assist in navigating users to their desired products. Personalised results will also drive users with more confidence in choosing suitable materials and products.
The content and tone of the redesign are important factors that help educate users about their values. This website is designed with familiar terminology and images to show the story of each material, including how it is made, how it is sustainable, and the benefits of choosing it. The ‘best-fit guide quiz' on the landing page displays suitable material for each user, a material guide that educates them about it, and the product detail page gives them the detail of each textile used to make a product. Although customers cannot touch actual products, this website flow allows customers to make informed decisions that satisfy their values.
Everlane's (n.d.) and Patagonia's (n.d.) websites were used as a source of inspiration as these brands' focused on the ethical sourcing of materials and promoting sustainable manufacturing methods. Both websites presented ‘benefit cards' on the product detail page and included sustainable keywords and distinctive icons for users to familiarise themselves with the benefits associated with a particular product. Although Nature's Way is a local brand in Melbourne, promoting sustainable clothing is a global effort to fight climate change. Thus, a global design pattern used in Everlane and Patagonia's ‘benefit cards' was also reflected throughout the redesign of Nature's Way. The new website of Nature's Way was structured more simply than these inspirations to achieve precise and effective navigations throughout the website, which was recognised as one of the main problems in the log analysis phase.
Further Research
User testing will be beneficial to improve the best-fit quiz to discover if the result page is concise and if the design motivates users to complete the quiz (Moran, 2018b). It will allow us to decide if the use of words and images is appropriate and if it will give users enough information to make a decision to purchase the products. Further user interviews or testing will be recommended to check fine details on the website.
Justification
The landing page has two main sections: the best-fit quiz and the material guide (Image 1). The best-fit guide quiz was introduced above the fold to get all the users' attention. It is the best way for new users to find the most suitable material for their needs. For example, Kim, a user persona with an allergy, stated that she struggled to find the best material for her. This quiz gives her the best suggestion, leading to more motivation to purchase their products. This quiz will also be helpful for regular customers who are willing to try new ethical and sustainable sourced fabric. Material guides are also designed for both returning and new shoppers. This is to educate new customers about their materials and attract returning shoppers to buy materials they have not tried before. Jennifer, another persona, has family members with different preferences for their garments and would be benefitted from developing a good understanding of each material so that she has more choices when she buys Nature's Ways products for her family. The interactive page (the best-fit quiz) was placed above the material guide to encourage users to scroll down (Schade, 2015). After finding suitable material for users, they want to know more about it, which encourages them to go down to learn about this material.
Navigation - global design (header and footer) and Search/Search result page
The header and footer were designed to guide users to the needed information. Both are used throughout the website to show consistency. The header was designed to be simple but includes all the essential links, including product pages, search, login, and shopping cart. All users can navigate quickly to the target section. Having a megamenu makes the header cleaner without sacrificing the navigation purpose. Users can go to a specific category, such as a T-shirt or non-allergic products, through this navigation (Image 3). This function improves the navigability of the website and leads to an increase in sales (Nilsen & Li, 2017). The research shows that users find it easy to use when company detail, delivery and other important information are displayed in the footer (Hardianto, 2019). Also, such design is an industry convention established already, and following the pattern achieves usability heuristics of the interaction design (Nilsen, 2020).
A search overlay will appear when users click the search button (Image 5). It has filters with a drop-down menu, and they can easily see the options they can choose. They can see the filters chosen and delete them with one click. A filter is an essential navigation tool for users to access the product they need (Moran, 2018a). Materials and style filters help those who want to try new genres of clothes like Jennifer. Search results will be initially shown in the order of relevance (Image 4). A product card on the result page shows colours, availabilities and a quick-add function for users' convenience. Filter and sort functions allow users to narrow down the search result and find what they want effectively. Each filter has user-friendly words to prevent customers from misinterpreting (Kaplan, 2022).
Product detail page and Category page
Product detail pages and category pages are structured to reduce user interaction costs. The product detail page is designed to display each product's detail (Image 6). It includes multiple photos of each product and has a zoom-in feature to check the details. Benefits cards with images instantly show the features of materials such as recycled, allergy-friendly and animal welfare. The details written here will help customers to make decisions without investing too much time (Sherwin, 2019). The above fold of this page has all the information, available colour, size, and in-stock and customers can add it to the shopping cart without scrolling to reduce the interaction cost. Each category page has the same structure with a sidebar on the left to be consistent with competitors' websites (Image 7). Each product card has an image, colour, price, and availability. When a user hovers a mouse on a card, it shows a size list, and they can buy the product without going to the product detail page.
Nature's Way's redesign is not an attempt at trying to reinvent the wheel or to be overly ambitious to deter potential customers away from the website by introducing unfamiliar and unconventional web design practices. Customers of already established brands in the eCommerce space that are known for their efforts towards fighting climate change would feel safe and comfortable in the overall experience of purchasing from Nature's Way.
References
Everlane. (n.d.) Everlane. Retrieved October 20, 2022, from https://www.everlane.com/
Kaplan, K. (2022). Enriched site-search suggestions: Rarely used. Nielsen Norman Group. Retrieved October 20, 2022, from https://www.nngroup.com/articles/enriched-site-search-suggestions/
Hardianto, Z. I. P. (2019). Analysis and Design of User Interface and User Experience (UI/UX) E-Commerce Website PT Pentasada Andalan Kelola Using Task System Centered Design (TCSD) Method. In 2019 Fourth International Conference on Informatics and Computing (ICIC) (pp. 1-8). IEEE. doi: 10.1109/ICIC47613.2019.8985854.
Hawley, J. (2018). Brand Identity is All About Consistency in Design. Mighty Fine Design. Retrieved October 20, 2022, from https://www.mightyfinedesign.co/brand-identity-consistency/
Nielsen, J. (2020). 10 usability heuristics for user interface design. Nielsen Norman Group. Retrieved October 20, 2022, from https://www.nngroup.com/articles/ten-usability-heuristics/
Nielsen, J., & Li, A. (2017). MEGA menus work well for Site Navigation. Nielsen Norman Group. Retrieved October 20, 2022, from https://www.nngroup.com/articles/mega-menus-work-well/
Moran, K. (2018a). Helpful filter categories and values for better UX. Nielsen Norman Group. Retrieved October 20, 2022, from https://www.nngroup.com/articles/filter-categories-values/
Moran, K. (2018b). How to test contents with users. Nielsen Norman Group. Retrieved October 20, 2022, from https://www.nngroup.com/articles/testing-content-websites/
Patagonia. (n.d.) Patagonia Outdoor Clothing & Gear Australia. Retrieved October 20, 2022, from patagonia.com.au
Schade, A. (2015). The Fold Manifesto: Why the page fold still matters. Nielsen Norman Group. Retrieved October 20, 2022, from https://www.nngroup.com/articles/page-fold-manifesto/
Sherwin, K. (2019*). UX Guidelines for Ecommerce Product Pages*. Nielsen Norman Group. Retrieved October 20, 2022, from https://www.nngroup.com/articles/ecommerce-product-pages/