Overview
MangoMania US, an e-commerce venture spearheaded by Benke International and SM International, aims to provide mangoes sourced from India to the American market. Abhishek, CEO of Benke International and an acquaintance of mine, reached out to request a usability assessment for their website.
The Design Process
Initial Research
Prior to commencing the evaluation process, I opted to conduct preliminary research by engaging with the founders and delving into secondary resources. This approach aimed to enhance my understanding of the target user demographics and best practices in e-commerce platform design.
E-commerce best practices
Drawing from insights gleaned from Shopify blogs and additional resources, I compiled a brief checklist of key best practices to inform my evaluation:
Loading Time: Assessing the website's loading speed across various devices.
Precise Navigation: Ensuring seamless navigation that directs users accurately upon clicking buttons.
Mobile Friendliness: Evaluating the functionality and user experience on mobile devices.
Copywriting Clarity: Reviewing the comprehensibility of the website's written content.
Attention Capture: Analyzing the website's ability to engage and captivate users effectively.
Understanding target user groups
With Mango Mania's marketing strategy primarily revolving around YouTube content creators and supplemented by word-of-mouth, I identified two distinct user groups:
Social media users:
These individuals access the website through sponsored content creator advertisements. It's reasonable to assume that they already possess some understanding of the product and have chosen to visit the website because it aligns with their specific requirements.
Golden Task:
As per Shopify's established research, the primary objective of these users is presumed to involve exploring the website, seeking specific product details that further elaborate on their initial interest, and proceeding to the checkout process.
Returning/Advanced users:
These users have prior familiarity with our product, either through direct experience or through established trust via word of mouth. They do not seek additional information; rather, their aim is to locate the desired product swiftly and proceed to checkout.
Golden Task:
The primary objective for these users, is to efficiently locate the relevant product within the website's interface and complete the checkout process.
Current user flow
Performing the UX Audit:
Following the identification of User Group 1, consisting of individuals unfamiliar with the brand, I formulated the following tasks for their user journey:
Explore the Website:
Navigate through different sections of the website to get acquainted with its layout and offerings.
Engage with various features, such as menu options, search functionality, and product categories.
Find Details About the Interested Product:
Search for the specific product of interest using the provided navigation tools or search bar.
Examine the product details, including descriptions, specifications, pricing, and available options.
Seek additional information that may enhance understanding or inform purchase decisions.
Check Out:
Proceed to the checkout process after selecting the desired product.
Complete the necessary steps for payment, including entering shipping and billing information.
Confirm the order and finalize the purchase.
#1 The landing page hero section
On the landing page, specifically in the hero section, several issues have been observed:
The call-to-action (CTA) button blends in with the background, making it easy to overlook.
The text below the CTA button is also easy to miss because of its low opacity.
All text is overlaid on a complex hero image without a reduction in opacity, which affects readability.
#2 Information about Mango Mania section
The information provided in the Mango Mania section imposes a significant cognitive load on users as they explore the product. This is primarily attributed to the extensive amount of information addressing three distinct topics compressed into a confined space. Consequently, prospective users may skim through the content, potentially overlooking the key value propositions conveyed within this paragraph.
#3 Product information section
In the Product Information section, both depicted products appear virtually identical from an external standpoint. This similarity prolongs the time required for users to discern the disparities between the two items. Furthermore, the text hierarchy at the bottom lacks proper structuring, with the "sale" tag being easily overlooked due to the "pre-order" element's more prominent color and larger size.
Moreover, placing the pre-order tag within the image carries the risk of conveying misinformation, particularly if the product is indeed available for purchase. Such miscommunication could potentially incur costs for the startup.
#4 Product details page:
On the Product Details Page, there are a couple of notable issues:
The header remains sticky, which consistently reduces the screen space available to the user.
The drawer shares the same color scheme as the original website, causing it to blend in and potentially making it less noticeable to users.
Redesigning the Website
Creating a mood board
For the re-design, I crafted a mood board to steer the design direction, aiming to evoke the following themes:
Authenticity from India: Emphasizing the organic cultivation of the product in Indian farms and its delivery to the United States.
Exoticity: Highlighting the uniqueness of the product, particularly as mangoes are regarded as exotic fruits in tropical regions.
By synthesizing these elements, the mood board aims to convey a sense of authenticity, exoticism, and the vibrant cultural heritage of India, setting the tone for the re-designed product experience.
Color palette derived from the mood board
Updating the user flow
The introduction of the following new elements in the user flow aims to enhance user experience and streamline navigation:
CTA for Advanced Users on Home Page: Users already convinced of the product's appeal and ready to make a purchase are presented with an "Add to Cart" CTA directly on the Home Page.
Direct link to Recommended Product on the Product Page: For new users exploring product options, a section is included on the Product Page allowing them to seamlessly navigate to the details page of the recommended product, facilitating informed decision-making.
App Drawer for Cart Interaction: Instead of redirecting users to a separate checkout page, the "Add to Cart" button now triggers an app drawer. This enables both new and advanced users to view and potentially add the other product to their cart without leaving the current page.
These enhancements aim to reduce the number of clicks and page load times by three for each user category, thereby improving efficiency and user satisfaction throughout the browsing and purchasing journey.
The New Landing Page
The updated landing page incorporates several improvements to enhance usability and brand identity:
Wordmark Addition to Logo: The logo now includes a wordmark to reinforce brand identity. The introduction of the "Lobster" font family adds a distinctive touch, establishing a cohesive brand image.
Enhanced Readability and Visibility: To improve content visibility, the description paragraph has been split into two sections. Additionally, the layout now features a white background with high-contrast typography colors, enhancing readability and ensuring key information stands out.
Optimized Product Visibility: The product image has been simplified to a single, uncut image showcasing its usage (in this case, consumption). This adjustment increases product visibility and reduces image complexity, making it easier for users to engage with the product.
These changes collectively contribute to a more user-friendly and visually appealing landing page, fostering a positive user experience and reinforcing the brand's identity.
About Mango Mania Section
The content within the "About Mango Mania" section has been strategically divided into two parts. The initial segment is featured prominently within the landing hero section, offering users immediate exposure to essential information.
The subsequent section delves deeper into the product's authenticity, providing insights into its origins and the farms where it is harvested. By distributing the content in this manner, the cognitive load on users is minimized, enhancing the likelihood of engagement and comprehension. This approach increases the chances of users reading the content fully, thereby enriching their understanding of Mango Mania's authenticity and fostering a stronger connection with the brand.
Product Information Section
In the Product Information Section, several enhancements have been implemented to improve user experience and facilitate decision-making:
Increased Visibility of Price and Units: The price has been made more prominent through color adjustments, accompanied by the inclusion of relevant information regarding the quantity of mangoes provided. This addition serves as a convenient way for prospective new users to swiftly add the product to their cart without navigating to a separate page.
Inclusion of Add to Cart CTA: For advanced users or those already convinced of the product's appeal, an "Add to Cart" CTA has been introduced. This addition streamlines the checkout process, reducing the time required for users to proceed with their purchase.
Clear Colors and Enhanced Text-to-Image Ratio: Vibrant shades of pink and orange have been utilized to ensure a distinct differentiation between the two products. Recognizing that mangoes may be challenging to distinguish based solely on texture and color, a concise product description has been incorporated to aid new users in understanding the differences between the offerings.
These enhancements collectively contribute to a more user-friendly and informative product information section, catering to the needs of both new and advanced users while maintaining visual clarity and coherence.
Testing the homepage on Shopify
While testing the homepage design on Shopify, I encountered limitations in customization options, particularly due to the absence of a developer on the MangoMania team. To address this, I took the initiative to develop the website within Shopify's interface, employing custom CSS and JavaScript to establish a basic layout.
Upon conducting a subsequent audit of the website, I identified and addressed several issues:
Visibility of logo on navigation bar
The color scheme of the logo was adjusted to enhance visibility, particularly in smaller areas where the contrast ratio failed to meet WCAG standards.
Change in Typography
Shopify's constraints led to the utilization of the "Lobster" font family for all predefined header tags and sizes, resulting in readability issues for smaller headers with font sizes ranging from 16 to 24px.
To mitigate this, I replaced the font family with "PT Serif" to ensure legibility. In future iterations, I plan to customize the H1 font to "Lobster" or an equivalent using custom CSS. Currently, the H1 font remains as "PT Serif" to prevent excessive font loading, which could slow down the website.
The new Mango Mania website
Given the constraints of utilizing Shopify and a tight timeframe of two days, I had to adapt the designs to fit within Shopify's existing templates while prioritizing an optimized user experience (UX) and maintaining the brand's identity wherever feasible. It's important to note that prior to this project, I had no prior experience using Shopify, which added an additional challenge to the process.
Creating style templates for Shopify:
Shopify utilized a set of style templates for each of its droppable sections/elements. By recreating these style templates in Figma, I can easily reference and implement the defined color schemes and styles within Shopify's platform, facilitating a smooth transition and maintaining brand consistency across the website.
CTA for advanced users on home page
A Call-to-Action (CTA) for Advanced Users was implemented on the Home Page: To cater to users who were already convinced about the product and were ready to make a purchase, an "Add to Cart" CTA was incorporated directly on the Home Page. This feature streamlined the user experience, allowing advanced users to proceed with their purchase without navigating to a separate product page.
Direct link to recommended product on the product page
A direct link to the Recommended Product was added on the Product Page: For new users who were interested in both or the other variety of Mango and were on the details page of a product, a section was added to allow them to redirect to the other product page. This enhancement facilitated navigation for users exploring different product options, improving their overall experience on the website.
Cart Drawer, instead of redirection to check out
In the past tense:A Cart Drawer was implemented instead of redirection to checkout: For both new users and advanced users, the functionality of the "Add to Cart" button was updated. Instead of navigating to a different page upon pressing the button, a cart drawer was introduced, enabling users to view their selected items without leaving the current page. This enhancement aimed to streamline the user experience by allowing users to manage their cart contents seamlessly while browsing the website.
Future Scope
While the current design has taken the website from 0 to 1, I propose the following future updates and changes to further enhance the user experience, drawing inspiration from competitor websites:
Increase user engagement for new users
Implementing interactive features such as a short quiz to suggest suitable mango varieties based on user preferences. This personalized approach can help users who may be unfamiliar with mango varieties originating from India, providing valuable information to aid their decision-making process.
Provide a chart with product specs
Introducing a comprehensive chart detailing product specifications, including taste profiles, nutrient information, benefits, and ripeness indicators. This resource will empower users with the knowledge needed to make informed decisions about their mango purchases, considering the diverse preferences and expectations of consumers.
Experience beyond Website for Storage
Enhancing the user experience beyond the website by providing guidance on proper mango storage conditions. This could include attaching a pamphlet or sticker to delivery boxes, outlining optimal storage methods to ensure mangoes ripen properly and maintain their flavor. By offering this additional information, users can maximize their enjoyment of the mangoes and further establish trust and loyalty with the Mango Mania brand.
