Buyer Application Interface

Below is the design of how in-app elements look to shoppers in our e-commerce app.

Navbar

The goal of the Navbar is to ensure that users have an easy and convenient browsing experience. It can help them quickly find what they need, from finding their favorite products, checking their cart, managing their account information, tracking their order, to accessing virtual outfit fitting room, adjusting personal settings, and being able to log out simply and efficiently.

Figure 1. Navbar design

Figure 2. Navbar design when menus are expanded

Navbar design promotes simplicity, accessibility, and desirability in UI/UX design. At the same time, the menus are also crucial and useful as the users can get to many important pages from anywhere on the platform. That completes the user experience, making it more comfortable and convenient while also meeting the requirements for searchability and identification.

Home

This is where buyers can access most of the platform's features once logged in. The page includes sections for advertisement banners, popular categories, recently accessed products (if available), flash sale products, hot stores, and best-selling products.

Figure 3. Advertisement banner carousel design

Figure 4. Popular categories & Recently accessed products

Figure 5. Flash sales & Hot shops

Figure 6. Best-selling products

The homepage impresses with its sophisticated and modern interface design. The sections are logically arranged, and the information is balanced, ensuring users are not overwhelmed when entering the platform. Additionally, the combination of various layouts makes interactions more engaging and appealing, enhancing user accessibility.

Shop detail

The store page displays general information about the store, personalized booth, product lists, and collection lists.

Figure 7. Shop's booth design

Figure 8. All shop's products with filter and search bar

Figure 9. Shop's collection list design

Figure 10. About shop design

The store page contains a moderate amount of information, preventing users from feeling overwhelmed upon access. Additionally, the combination of various layouts makes interactions more engaging and appealing, enhancing user accessibility. The navigation menu is intuitive and flexible, paired with product categories presented in a spacious and attractive manner. Featured products and promotions are highlighted subtly, drawing immediate attention. Convenient filtering and sorting functions help users quickly find suitable products.

The page comprehensively gathers all store information, clearly and logically distributed across the main sections. This reflects the principles of searchability and discoverability. Personalized storefronts by sellers create a desire for eye-catching stores, fulfilling one of the key UI/UX design principles.

Product detail

When accessing the product information page, users can view all the product's features, including general information, detailed specifications, compatible products, review lists (and comments if available), AI-assisted review summaries, and similar products.

Figure 11. Product's general information design

Figure 12. Product combo design

The combo product section provides suggestions for items that are often paired together, helping users to have a more complete experience with the product.

Figure 13. Product's detailed information menu design

The description section is where sellers can manually craft detailed information using a support tool, allowing the inclusion of images, videos, and text with various fonts and layouts.

The review overview section includes all product reviews, comments on reviews, the average star rating of the product, and an AI-generated summary of reviews (featuring comments and a pie chart representation of positive, negative, and spam reviews).

Figure 14. Product's review summary and list

Each product detail page is carefully designed, providing comprehensive information and high-quality images, creating a perfect online shopping experience. The clear and logical layout across the main sections of the page adheres not only to usability principles but also reflects principles of searchability and discoverability.

Furthermore, users can check reviews or AI-generated review summaries. The AI assistant can process and analyze thousands of user reviews in a short time, providing an accurate and objective overview of the product or service. This helps consumers save time and effort when searching for information, enabling them to make smarter purchasing decisions.

Cart and Checkout

The checkout flow begins by adding a product to the cart from the homepage, the product information page, or the store's product list.

Figure 15. Cart design

The cart interface is designed to be incredibly convenient and user-friendly. At first glance, users will immediately be impressed by the neat and easy-to-understand layout. Products in the cart are clearly displayed with images, product names, quantities, and prices, making it easy for users to track and manage their orders. The functions to update product quantities or remove items from the cart are intuitive and quick, providing a seamless shopping experience. Additionally, the cost summary, including taxes and shipping fees, is presented transparently, allowing users to accurately grasp the total amount to be paid. The checkout interface is simple yet comprehensive, with clear steps that create a sense of security and convenience for customers as they complete their orders.

Chatbot - Virtual Assistant

The chatbot is always accessible on the platform by clicking the "Assistant" button in the bottom right corner of the screen.

Figure 16. Chatbot button design

Figure 17. Chatbot default interface design

Figure 18. Chatbot expanded interface design

Overview About UI/UX Design Seller Application