MyQM Mall | Portfolio

e-commerce project

A gateway to an exceptional shopping experience

Let’s shop at MyQM Mall

Download the MyQM App

digital marketplace exclusively for QM Gold members.

is an e-commerce platform that offers a B2C and B2B

Overview

Product

Role

Duration

Year

Team

Tools

Live website & mobile app

Ui/ UX Designer + brand designer

8 months

2024

Ui/ UX Designer, Product manager, CMO, IT team

Figma, Adobe Photoshop, Adobe Illustrator

How we did it?

Background

With the growth of e-commerce usage and the increasing demand for B2B business models adoption in Malaysia, MyQM Mall seeks to harness this potential by creating an e-commerce platform for 600,000 registered QM members across Malaysia.

I'm the sole Ui/UX designer of an early-stage startup

I joined QM Innovations as a Ui/UX Designer in a small team consisting of the CMO, 1 product manager, 1 QA tester and 6 engineers. I led the Ui and UX design, branding concept, and graphic design for the project. I am truly grateful to be a part of the journey, as it has allowed me to grow tremendously through exposure to the entire product development process, from concept to final production.

Some of my key achievements in this project are:

Research and design, Communications

Designed user-centric interfaces for a B2C and B2B e-commerce platform from concept to production across mobile apps and websites
Developed wireframes, interactive prototypes, and high-fidelity interfaces in Figma to enhance user experience and define the product’s interaction flow
Performed competitive analysis to guide and inform design decisions

Systematic workflow, Collaboration and Leadership

Developed and maintained a design system to ensure visual and functional consistency across all products
Led the migration of the product’s design interfaces from Adobe XD to Figma to streamline workflows and enhance team collaboration
Collaborated cross-functionally with the team to align the project with user needs and business objectives

Why we do it?

Issues and potentials

Issue

Potential

#1
e-commerce growth:
Lack of adoption of e-commerce among businesses in Malaysia

According to Malaysia Digital Economy Corporation (MDEC),

e-commerce in Malaysia is growing, but many businesses have yet to adopt it.

To address this, MDEC introduced the National E-Commerce Strategic Roadmap 2021-2025, outlining methods to boost adoption.

The government sees e-commerce as a key driver of business growth.

Issue

Potential

#2
E-Commerce Business Models: B2C & B2B

E-commerce includes various models, with B2C and B2B being the most common. B2C (Business-to-Consumer) involves direct sales to consumers via platforms like Amazon (Sohaib et al., 2021), while B2B (Business-to-Business) facilitates transactions between companies for bulk orders and supply chain management, as seen in Alibaba and SAP Ariba (Shankar, 2022).

B2B Potential & Adoption Challenges

B2B e-commerce can enhance trade efficiency and global market integration, benefiting developing countries (Monroe et al., 2022; Alsaad et al., 2018). However, adoption among SMEs in Malaysia remains low (Hamad et al., 2018; Shanmugam et al., 2022).

Given the potential of both B2C and B2B, this platform will cater to both models in Malaysia’s e-commerce landscape.

Potential

#3
Gold as Currency

Paper money faces issues like inflation, which weakens prosperity and socio-economic stability. Gold, however, offers a stable alternative due to its durability, divisibility, portability, and inherent value. It also protects property rights and serves as a reliable international exchange medium.

Target Users

The app, with 600,000+ users in Malaysia,

enables digital gold trading via Quantum Metal’s platform. Integrating e-commerce with QMGold creates an opportunity to use gold for transactions, making QM members the primary target users for this initiative.

How we did it?

Design process

I collaborated closely with the CMO, product manager, and developers throughout the entire product development lifecycle—from concept to launch. Every issue raised was carefully evaluated, discussed as a team, and prioritized for resolution, ensuring a strong and well-executed final product.

Research

Design development

Whitepaper research
Competitive analysis

Design interfaces development
Presentation to product and management
Design revision

Design production

Presentation to IT team
Passed the design to developers for production
Design revisions

User testing

Live

Usability testing

What are offered by our competitors?

Competitors analysis

B2C and B2B

4 out of 5 competitors focus on B2C, while 1 (Alibaba) focuses on B2B.

Product variations

Besides Alibaba, Shopee offers B2B but mainly with single-product variations, making it less visible among B2C listings. Alibaba, however, clearly caters to bulk buyers, as seen in product thumbnails and details.

Gold currency

Currently, no platform enables

e-commerce transactions using gold currency.

Although PG Mall is supported by Public Gold Marketing, which facilitates gold trading, gold transactions are not integrated into the platform.

In conclusion, while both B2C and B2B models are in demand, few e-commerce platforms support both. Moreover, no platform currently enables gold-based transactions. To address this gap, we aim to develop a platform that integrates both business models and facilitates transactions using gold.

Who are we building for?

Target users

#B2C
General Consumers

General Consumers are everyday individuals who purchase products or services for their own personal use, rather than for business or resale. These buyers make up the majority of B2C transactions and typically shop for necessities, entertainment, or lifestyle products.

#B2B
Retailers & Wholesalers

Retailers and wholesalers purchase goods in bulk from manufacturers or distributors and resell them to other businesses or end consumers. They use e-commerce to streamline bulk purchasing, supply chain management, and transactions.

What are our approaches?

Design statement

to design an e-commerce platform that supports both B2C and B2B models, enabling gold-based transactions for the QM members in Malaysia.

"

Design requirements

Business goals

Provide an e-commerce platform connecting sellers and buyers.
Offer both B2C and B2B business models.
Enable payment integration using QM Gold

Visual aesthetics

Reflect company branding with a gold metal theme.
Ensure clear and intuitive navigation.
Implement a functional and simple design interface.

Adaptability

Ensure seamless adaptability across various screen sizes and devices, including:

desktop
tablet
mobile

Target users

QM Gold members

B2C- General consumers
B2B - Retailers and wholesellers

How does the flow work?

Information architecture

Katrina (2024)

The user journey starts at the mall's landing page. Once the user selects a product, they enter the product details to see its details. If the user decides to buy the product, they can either 'Add to cart', go to 'Wishlist', or 'Buy now', which will take them directly to the 'Checkout' page. From the 'Checkout page', the user proceeds to payment.

After payment, the user can track the shipment's progress at the 'My Order' page. The platform offers 'Return/ Cancellation' if the user requests to cancel or return their purchased items.

How do we integrate B2C and B2B business models into the design?

B2C and B2B implementation

Integration of multiple variations and mix-and-match features in the business models

Implementing both B2C and B2B models is a challenge for me as it requires a fundamental understanding of how each business model operates in real life. I’m familiar with B2C purchasing since I often buy products through platforms like Shopee and Lazada, but B2B purchasing is less common in my experience. To explore the design, we conducted a brief design process, as outlined below:

Understand users' needs and motivations
Lay out business strategies
Develop the interface design

Understand user’s needs and motivations

Based on the analysis above, we can say that the product details page is one of the most crucial pages, as it is where the user decides whether to purchase a product. The flow from the homepage to checkout needs to be user-friendly—simple, informative, and with clear wayfinding.

In the purchasing process, viewing product specifications is the most crucial part of the design, as it helps users understand the product and ultimately decide whether to buy it. To design this effectively, we first need to understand the business goals for the product.

Lay out business strategies

As part of the marketing strategy, the product manager has proposed integrating product variations and mix-and-match features for B2B products to expand purchasing options for users.

The strategies are as follows:

#1
Providing Product Variations

Product variants are different versions of a product that share core characteristics but offer distinct options in size, colour, material, style, or other attributes (Shopify, 2024). It aims to cater to diverse customer preferences, increase sales and revenue and boost customer satisfaction and loyalty.

This platform will support the following variation options:

No variation
Single variation
Two variations

#2
Mix-and-Match Features

Mix-and-match functionality allows flexibility in bulk purchases, where selected product variations impact the pricing tier.

Pricing Structure:

Mix-and-match enabled: The final price per item is based on the total quantity purchased.
Mix-and-match disabled: The final price per item is based on the individual variation.

This feature is exclusive to B2B products.

Product/

Number of variation

B2C

B2B

No variation

Mix & match

Not allowed

1 variation

Allowed

2 variations

The table above shows the integration of multiple variations and mix-and-match features in the business models of MyQM Mall.

Design interface approaches

Based on our competitive analysis and business goal, designing B2C with multiple variations is quite straightforward, as most e-commerce platforms offer it. However, the challenge lies in designing for B2B—combining multiple variations with mix-and-match features.

For mix-and-match, Alibaba only offers the "allow mix-and-match" feature for two variations. So, I worked with the product manager to design a "not allow mix-and-match" option for one and two variations and discussed the technical aspects with developers.

Below are examples of the design thinking behind these products.

B2C - 1 variation

Showcase fix price/ price with range depends on the product variation's price setting

Displays the product variation that includes:

variations offered
Price of each variation
'Add quantity' features

B2B - 1 variation, allow mix-and-match

the one unit price of a product will reflected based on total quantity of product added

Lead time

to inform the period between when a user places an order and when the supplier ships the product

Selected items table

to show a summary of the product

B2B - 2 variations, not allow mix-and-match

Concept:

The final price per item is based on the individual variation.

To differentiate the selected second variation from the rest of the options, we introduced different colour coded to represent each variation

Price colour represents different quantity of second variation selected

1st variation

The user can only select one variation. If the user changes the first variation, all data input will be erased, and the settings will revert to the default.

2nd variation

The user can add quantity for each option accordingly
Once the user enters the quantity, the quantity will automatically be shown under the second variation button accordingly. The top price tier will also highlight the price accordingly.

How will the platform look aesthetically?

Look and feel

Gold metal embodies the company's branding, symbolizing wealth, power, and exclusivity. Its reflective nature naturally draws attention, representing wisdom, luxury, and success in color psychology.

Inspired by my architecture background, I applied a similar approach to develop a design concept in Ui/UX. I analysed the process of manufacturing gold from raw gold to a finished product, where each process serves its own purpose to produce high-quality gold. I then studied the application of gold in interior design and synthesised these finding into Ui/UX design.

Below are results of the findings.

In conclusion, the reflective and eye-catching nature of polished gold conveys luxury and exclusivity.

However, since e-commerce platforms serve users from diverse backgrounds, they must also create a welcoming and inclusive shopping experience. Therefore, balancing luxury with approachability is essential.

Based on the analysis, the following design language has been highlighted:

Use gold in small details, such as buttons, borders, and fonts.
Harmonize gold with complementary colors, such as white and dark gray
Infuse sleekness with smooth curvatures

Colour

Gold is the primary color of the design, complemented by dark gold and dope black to enhance its richness. Shades of gray have also been incorporated to maintain visual hierarchy and balance.

Primary - Gold (with gradient)

Linear #E6C86A

Primary - Gold (Plain)

#dbaa55

Primary - Dark Gold (Plain)

#674a16

Tertiary - Dope black

#2d2f34

Neutral - white

#ffffff

Neutral - light grey

#c4c4c4

Neutral - dark grey

#7e7e7e

Neutral - black

#111111

Font

The sleek nature of polished gold conveys elegance, reflected in the fluidity of elements. Smooth curves combined with simple geometric lines define the main design language, applied to fonts, icons, and other design elements.

Icons

To enhance usability and user experience, we selected commonly used icons from competitors, as they are instantly recognizable, reducing cognitive load and improving navigation.

We then adapted these icons to our design language—simple lines with smooth corners. Some icons include text for added clarity in specific contexts.

General components

Whitespace and a gray background harmonize the gold gradient with the overall design. Gradient gold is reserved for key elements, such as gold bar-inspired coupons.

Informative page

For pages that require user attention, a clear and concise design is implemented to highlight important messages.

Approaches include:

Utilizing lines as dividers to enhance clarity—thickness varies based on functionality.
Providing adequate whitespace for improved readability

Marketing products

I was also involved in creating a range of marketing materials, including product pitch decks, seller registration decks, business cards, app store screenshots, email footers, banners, and posters. Each design was aligned with MyQM Mall’s design principles.

App store screenshots

Banners

Posters

1 design-Partner Finder Program poster.jpg

Business card

Key takeways

Screen Responsiveness

Currently, the design is tailored for mobile and desktop screen sizes. Moving forward, we need to consider a fully responsive design that also accommodates tablets and smaller laptops. To achieve this seamlessly, planning for responsiveness should begin in the early stages of the project.

Design System Consistency

At present, I use two different design systems for web and mobile apps, which is time-consuming as I need to manage two separate systems for the same design. In the future, adopting a unified design system—such as Google Material Design—could improve efficiency and ensure consistency across all screen sizes.

Optimizing Figma Plugins & Ai powered features

Exploring and implementing relevant Figma plugins, especially those powered by AI, can enhance productivity and streamline workflows. Leveraging these tools will help reduce manual effort and speed up the design process.

Some of the AI-powered features I use include:

Figma AI Tools:
- Automatically renaming layers
- Adding relevant content
- Prototyping in a single click
- Generating AI-powered image outputs
Design System: Google Material Design System
- Material Theme Builder (AI integration for seamless theme generation and customization)

Implementing Auto Layout

Applying Auto Layout to all elements and components ensures a structured and flexible design. Minor adjustments throughout the process can impact the overall layout, and Auto Layout helps maintain consistency while saving time and effort.