Oldman Seafood

Oldman Seafood features a captivating UI/UX design that has seamless navigation, daily deals, and dynamic delivery calculations, enhancing the digital seafood shopping journey for users.

Overview

OldMan Seafood is an e-commerce platform designed to facilitate the seamless purchase of fresh seafood. The website includes key features such as user-friendly navigation, a dynamic product catalog showcasing a variety of seafood, a secure payment gateway, order tracking, and a streamlined checkout process. Additionally, it offers personalized user accounts, enabling customers to manage their orders, save favorite products, and track purchase history. The platform's responsive design ensures a smooth experience across devices, making it accessible to a wide audience. The goal of the project was to enhance the customer journey from product discovery to checkout, providing a comprehensive and efficient online shopping experience.

Problem Statement

How can we design an e-commerce platform that tackles the challenges of ensuring a seamless seafood purchasing experience, including real-time inventory updates, transparent delivery tracking, and efficient customer support, while also providing an intuitive interface that simplifies product discovery and enhances customer satisfaction from order placement to fulfillment?

Roles & Responsibilities

As the lead UI/UX designer for the OldMan Seafood e-commerce platform, I was responsible for overseeing the design process from concept development through to final delivery. I ensured that the platform met the needs of both end-users and the business by conducting thorough research and translating insights into user-centered designs. Throughout the project, I collaborated closely with stakeholders to define clear objectives and worked with developers to ensure the seamless implementation of designs. I also conducted regular usability tests, iterating based on feedback to enhance the platform's functionality and user experience. My goal was to create an intuitive, efficient shopping journey for seafood buyers.

Phase 1 : Discovery & Research

For the OldMan Seafood project, I aimed to gain a deep understanding of customer preferences when purchasing seafood online. Through a mix of user surveys and interviews, I explored their concerns about product freshness, delivery reliability, and ease of use. I also analyzed competing platforms to uncover common shortcomings and opportunities for improvement. The insights gathered allowed me to define key user profiles and craft scenarios that highlighted critical touchpoints, ensuring the design solution would effectively address user needs while aligning with the business’s objectives.

Phase 2 : Design & Iteration

In this phase, I translated user research into actionable designs, starting with low-fidelity wireframes that focused on simplifying the shopping process. Once the structure was defined, I moved on to creating high-fidelity prototypes that emphasized clarity in navigation and product presentation. Throughout the process, I worked hand-in-hand with developers to ensure that every design detail, from the layout to interactive elements, was executed as intended. User feedback played a crucial role in refining the designs, allowing me to make adjustments that improved both usability and overall customer satisfaction.

Tools & Methods

I utilized Figma to craft the initial design concepts, focusing on addressing the specific challenges identified during user research. The tool allowed me to rapidly prototype and test different ideas, ensuring the interface was both functional and visually appealing. As feedback came in, I iterated on the design, making adjustments to enhance usability and ensure the experience felt seamless for users.

Interview Insights

Through interviews with potential users of the OldMan Seafood platform, I uncovered key insights into their shopping habits and concerns. Many users emphasized the importance of knowing the origin and freshness of the seafood, as well as having clear delivery timeframes. Some users expressed frustration with existing platforms due to complicated navigation and unclear product descriptions, which led to hesitation during the purchase process. Additionally, there was a clear demand for real-time inventory updates to prevent disappointment from unavailable items. These insights were crucial in shaping the design and ensuring the platform addressed these pain points directly.

User Persona

I created the following persona based on insights gathered during user interviews in our initial research phase.

Persona 1

Rajesh Kumar

IT Manager

Tech-Savviness: High

Goals:

  • Provide his family with high-quality, fresh seafood.

  • Ensure the ordering process is quick and efficient, especially during his busy workdays.

  • Access promotions or loyalty rewards for frequent purchases.

Behaviour:

  • Prefers ordering online after work or during breaks via mobile apps.

  • Shops in bulk, especially around festive seasons like Deepavali.

  • Frequently compares prices and reads reviews before making a purchase.

Pain Points:

  • Frustrated by delivery delays, especially when planning family dinners.

  • Dislikes unclear or incomplete product descriptions (e.g., lacking origin or freshness).

  • Finds it inconvenient when products are out of stock after being added to his cart.

Key Features Desired:

  • Real-time inventory updates to avoid purchasing unavailable items.

  • Clear product origin and freshness indicators.

  • Fast checkout process and loyalty rewards or discounts for repeat customers.

Persona 2

Wei Li

Marketing Executive

Tech-Savviness: Moderate

Goals:

  • Quickly purchase seafood for her weekly meal prep with minimal effort.

  • Find reliable reviews and information about product quality.

  • Ensure her orders arrive within the promised time frame.

Behaviour:

  • She shops online regularly and compares products across multiple platforms.

  • Prefers browsing on her desktop but occasionally uses mobile apps while on the go.

  • She likes to pre-plan her meals for the week, making time-sensitive purchases.

Pain Points:

  • Frustrated by websites that lack user reviews or detailed product information.

  • Annoyed by inconsistent delivery times that disrupt her meal prep.

  • Prefers a more straightforward shopping experience

Key Features Desired:

  • Detailed product descriptions, including quality and sourcing information.

  • Customer reviews and ratings to help her make informed decisions.

  • Reliable delivery tracking and transparent delivery times.

Persona 3

Aisyah Binti Ibrahim

Stay-at-home mom

Tech-Savviness: Low to Moderate

Goals:

  • Find fresh and affordable seafood for her family’s weekly meals.

  • Simplify her online shopping experience without overwhelming complexity.

  • Secure promotions or offers for frequent purchases to save on household expenses.

Behaviour:

  • She shops mostly on weekends when planning family meals for the week.

  • Prefers using mobile apps but finds complicated platforms frustrating.

  • Saves products or repeats previous orders to save time.

Pain Points:

  • Finds overly complex websites and apps difficult to navigate.

  • Dislikes delivery fees that are unclear until checkout.

  • Frustrated by inconsistent product availability when placing orders.

Key Features Desired:

  • Easy-to-use interface with minimal steps for completing orders.

  • Saved order history or favorites for quick re-purchases.

  • Affordable delivery options and clear pricing upfront.

Harith Abdullah

Fitness Trainer

Tech-Savviness: High

Persona 4

Goals:

  • Incorporate more nutritious seafood into his diet to support his health.

  • Easily identify seafood options that align with his fitness goals (low fat, high protein).

  • Order seafood on short notice with reliable, quick delivery.

Behaviour:

  • Shops mainly through his mobile device, as it fits his busy, on-the-go lifestyle.

  • Looks for clear nutritional information and product details when purchasing seafood.

  • Frequently orders last-minute when planning his meals for the week.

Pain Points:

  • Struggles to find platforms that provide detailed nutritional data for seafood.

  • Frustrated by limited same-day delivery options when making quick orders.

  • Annoyed by websites that don’t offer a variety of payment methods.

Key Features Desired:

  • Nutritional information and health benefits displayed for each product.

  • Flexible delivery options, including same-day delivery for fresh seafood.

  • Multiple payment methods, including digital wallets and credit cards.

Challenges & Scope

One of the key challenges was creating a user-friendly interface for OldMan Seafood that could handle the complexities of bulk seafood orders while maintaining a simple and intuitive experience for everyday consumers. Ensuring clear product information, real-time inventory updates, and seamless order tracking required careful planning to avoid cluttering the interface. Although bulk ordering functionality was initially out of scope, we worked closely with the developers to integrate this feature without compromising usability. Balancing the needs of casual shoppers and restaurant owners was crucial, ensuring that both could navigate the platform with ease while accessing the specific features they required.

Design Goals

  • ✺

    Ensure a streamlined shopping experience that allows users to easily navigate and complete purchases with minimal steps.

  • ✺

    Provide clear and detailed product information, including origin and freshness, to build trust and confidence in the seafood quality.

  • ✺

    Design an intuitive checkout process that supports multiple payment methods and offers transparency in pricing and delivery fees.

  • ✺

    Create a responsive interface that delivers a consistent user experience across mobile and desktop platforms.

  • ✺

    Incorporate real-time inventory updates to keep users informed of product availability during the shopping process.

  • ✺

    Develop a visually engaging design that highlights seafood products while maintaining a clean and clutter-free layout.

Design Process

The design process for OldMan Seafood began with a deep dive into user research, where we gathered insights from interviews and surveys to understand the needs and pain points of both casual shoppers and business buyers. From there, I sketched out initial concepts and created low-fidelity wireframes to map out the user flow, focusing on a seamless navigation experience. After gathering feedback from early usability tests, I refined these wireframes into high-fidelity prototypes that prioritized clarity in product presentation and ease of checkout. Continuous iterations followed, incorporating user feedback at every stage, ensuring that the final design was both functional and user-friendly. Collaboration with developers throughout the process ensured smooth integration of features like real-time inventory updates and bulk ordering options.

Style Guide & UI Design

The OldMan Seafood platform incorporates a vibrant and dynamic color palette, with rich blue and yellow tones that evoke freshness and attention, while red is used strategically to highlight special offers and calls to action. The user interface emphasizes simplicity and clarity, making it easy for users to browse and make purchases. Icons are intuitive and guide users through processes such as selecting products and completing transactions. The use of Roboto font ensures consistency and readability throughout the platform, creating an approachable and engaging user experience while maintaining the professionalism expected in an e-commerce setting.

Final Design

The OldMan Seafood website features a modern, user-friendly design that delivers a seamless shopping experience across devices. The homepage prominently displays high-quality imagery of fresh seafood, along with a clear "Shop Now" button to encourage immediate purchasing. The navigation bar offers easy access to key sections like categories, account management, and the shopping cart. Additionally, a search function is integrated for quick product discovery, and popular categories are visually highlighted to guide users through the most sought-after items. The design balances aesthetics with functionality, ensuring a smooth and enjoyable experience for customers.

Additionally, the OldMan Seafood website extends its seamless shopping experience through well-organized category pages, making it easy for users to filter products by type, price, and availability. The “Deal of the Day” section showcases promotions, encouraging customers to take advantage of special offers. The About page provides an engaging look at the company’s story, reinforcing trust and transparency. A detailed shopping cart interface allows users to review their purchases, adjust quantities, and proceed with secure checkout effortlessly. Additionally, the contact page offers multiple ways for customers to get in touch, ensuring accessible support and enhancing the overall user experience.

Comprehensive Design

This platform offers a comprehensive design that guides users through a seamless shopping experience from start to finish. With well-defined categories, users can easily browse through products, view detailed descriptions, and manage their shopping with features like wishlists and personalized accounts. The interface also provides informative sections that highlight the brand's values, helping to build trust and transparency. Whether users are exploring deals, checking product availability, or getting in touch through the contact page, every step is thoughtfully designed to ensure an efficient and user-friendly experience across all devices.

  • Designed a dedicated bulk ordering system that streamlines large purchases, with tailored pricing, delivery options, and an easy-to-use interface for frequent buyers.

  • Implemented a real-time inventory management system that syncs across desktop and mobile platforms, ensuring that users always see the latest product availability.

  • Optimized image loading through lazy loading techniques and compress image files to maintain website performance without sacrificing visual quality.

✺ Navigating Hurdles✺

  • Highlighted customer reviews, trust badges, and the company’s story prominently on the homepage to create credibility and trust from the moment users land on the site.

  • Integrated a clear and easy-to-use filter system that allows users to sort products by price range, ensuring they can quickly find items that fit their budget.

  • Designed a responsive layout that adjusts smoothly to different screen sizes, making sure the website performs optimally on mobile, tablet, and desktop.

Conclusion & Outcome

Conclusion & Outcome

The final OldMan Seafood platform successfully delivers a seamless online shopping experience, allowing both casual consumers and restaurant owners to easily browse, order, and receive fresh seafood. With a user-friendly interface, clear product categorization, and a smooth checkout process, the platform effectively meets customer expectations. Features such as detailed product descriptions and real-time inventory tracking enhance the shopping experience, while responsive design ensures consistent usability across all devices.

By prioritizing user needs and leveraging iterative design practices, the OldMan Seafood platform caters to a wide range of customers, making seafood shopping more accessible and efficient. The inclusion of flexible ordering options and clear navigation aids in creating a hassle-free experience, fostering customer satisfaction and loyalty.

Reflecting on the project, early alignment on design goals and frequent communication with stakeholders helped ensure a streamlined process and minimized redesigns. User feedback played a key role in shaping the final product, allowing us to refine the platform to best serve its diverse audience. The end result is a platform that simplifies seafood shopping while maintaining high standards for usability and performance.