This was a responsive web design project I took on for an alcoholic beverage e-commerce retailer, AlphaWine. I designed and built their e-commerce website using WordPress, Elementor Pro and WooCommerce.
Duration: 6 months (May 2022 - October 2022)
Responsibilities: Responsive Website UX/UI Design + Low-Code Development + Project Management and Stakeholder Management
Quick Links: AlphaWine Website
Software Used: Figma, WordPress, Elementor Pro, WooCommerce, Adobe Photoshop
ⁱ A Google Slides deck consisting of information gathering and visualisation tools that helped inform my design process.
AlphaWine is a B2C business that believes a good wine shared in the company of friends and family can be good value for money too. They offer a broad selection of beverages that consist mostly of wines and other accompanying products like glassware.
My client’s beverage business was newly established in Q1 of 2022. They were looking to set up an e-commerce website store to display their products on the store’s front-end and to manage their inventory on the back-end.
Many existing customers would place orders with my client through WhatsApp. The goal was to set up an e-commerce website to enable existing clients to purchase directly from the online store and to expand their customer base.
My client had chosen WordPress as their Content Management System and WooCommerce as the e-commerce plugin. They also had a company logo designed and a domain URL ready to go.
I surveyed a few competitors’ websites to understand what their main features and functions are. In this way, I can also get a sense of what users expect of such wine retailer websites.
Figure 1. Screenshots of Competitors’ Web Pages (Mobile and Desktop Versions)
This survey of competitor sites shows how important it is for AlphaWine to have a clear and well-defined information architecture for their website so that users are able to easily navigate the website and not get confused about their wide range of productsⁱ.
The information architecture should reflect the mental models users have of common alcohol categories and related products. It is also important to make particular products and price offers visually appealing and obvious to the users.
The inclusion and placement of this button streamlines the checkout process by reducing the number of clicks to complete a purchase.
I placed the WhatsApp icon in a fixed position at the bottom right corner of the desktop and mobile screen so that users can contact AlphaWine for queries about specific products with ease.
I set up a form as an alternative way for users to get in touch with the business via email if they prefer this channel of communication.
AlphaWine offers a range of products. My client provided the information architecture of the website based on their knowledge of the products and what customers typically look out for. They are mainly divided into categories that are grouped according to characteristics such as price range (i.e. Premium Collection and Promotions) or type of alcoholic beverage (i.e. Wines and Sakes). The remaining product categories encompass non-beverage products such as glassware and drinking accessories.
Since AlphaWine has an extensive selection of wines, they were further sorted into sub-categories. Customers tended to look for wines by its type or by its country and region of origin/production. The wines from France were also further split into regions (e.g. Burgundy, Rhône).
I placed the search feature as the first element on the navigation menu to allow users who know what they want to quickly find their desired product(s).
I chose an AJAX-powered search plugin as it offers live product search; the auto-completion and suggestions makes the process of searching for specific products more efficient and accurate.
This is one of the most crucial user flows for the website as a well-designed and set up checkout process will translate into higher conversion rates. I decided a multi-step checkout was the more user-friendly option between the two styles of e-commerce checkouts (i.e. Single Page vs. Multi-Step Checkouts).
The data fields and layout of the default WooCommerce checkout renders as a long form on a single web pageⁱ. The progressive disclosure that comes with a multi-step layout will ensure users are not overwhelmed with the data fields.
Figure 9. Three-Step Checkout (Desktop Version - High-Fidelity Prototype)
To reduce drop-off rates associated with multi-step checkouts, the user must be well-oriented in the checkout process. I made the progress bar conspicuous and positioned it at the top of the form to indicate where users are in the checkout process, making them more likely to complete a purchase.
Moreover, for products like alcohols that come with higher price-points, it is better to have a multi-step checkout so that users can ensure their order and payment details are correct before going through with the purchase.
I built the website using Elementor Pro without having to hard-code with HTML, CSS and Javascript. These tools allowed me to translate my designs to a live website and keep true to my high-fidelity wireframes as much as possible.
However, using WooCommerce and other supporting e-commerce plugins meant that I had to work with pre-set templates and forms. I worked around these constrains by customising the plug-ins via their settings and used CSS to fine-tune the details of certain UI elements to fit my designs.
Developing a strong visual identity for AlphaWine is essential for customers to be able to identify the company as a unique player and to identify with AlphaWine.
They want to be seen as a reliable and affordable retailer for a wide range of quality alcoholic beverages, especially for their selection of wines. The choices made to establish the business’ visual identity seeks to convey a brand that is curated, tasteful and relatableⁱ.
Based on Google Analytics data, these numbers indicate the performance of AlphaWine's website to date (i.e. 13 August 2023 as of last writing) since its launch on 26 September 2022:
According to Noble Intent Studio and Adobe Experience Cloud Blog, the Engagement Rate and Average Engagement Time per Session for AlphaWine's website is above the average engagement levels for B2C websites. The Bounce Rate is also lower than the average BRs for ecommerce sites.
These numbers indicate that the website is doing decently well by B2C standards (although there is always room for improvement).
Much to my relief, the website seems to have been well-received by my client's business contacts as well as her customers. We did run into some issues after launching the website; our biggest challenge was with the slow website speed.
We engaged a third-party developer to help us resolve the speed issue and had the site running optimally soon after.
The journey to building and launching AlphaWine’s website was an on-going process of learning, experimentation and implementation. I hit some roadblocks along the way. During such episodes, I wondered if taking on the project was beyond my Goldilocks zone of growth; in these instances, I often felt overwhelmed and unable to engage with the tasks at hand.
I typically take some time off to re-collect my thoughts and seek help from the most suitable individual. With the help of plug-in developers and external contract developers, all of the major issues have been resolved.
Nevertheless, I learnt a lot about UX best practices for e-commerce websites and low-code development by consulting various resources on YouTube, online articles from all corners of the Web, and starter guides for plug-ins.
Due to the constraints imposed by the project's timeline and deliverables, I was not able to run the entire end-to-end design process to optimise the user experience for the website's users. It would be interesting to consider how users actually sort and search for wines, and also to actually run usability tests on the website.
