Singha Online
Singha Online
Singha Online
Revamping an e-commerce platform for Singha Corporation’s B2C and B2B customers.
Revamping an e-commerce platform for Singha Corporation’s B2C and B2B customers.
Role
Role
UX/UI Designer
UX/UI Designer
Project Industry
Project Industry
E-Commerce
E-Commerce
Platform
Platform
Responsive Web Design
Responsive Web Design
Desktop, Tablet Web, Mobile Web
Desktop, Tablet Web, Mobile Web
Timeframe
Timeframe
March to September 2022
March to September 2022
Working Teams
Working Teams
Morphosis Design Team
Morphosis Design Team
Boonrawd Brewery Marketing Team
Boonrawd Brewery Marketing Team
Tools
Tools
Visit Website
TL;DR
TL;DR
•
•
Redesigned Singha Online, the official e-commerce platform for Singha Corporation, into a subscription-ready platform that introduced the new Singha Online Easy Plan for fixed-price recurring deliveries and improved single-time purchases with clearer promotions, better order tracking, simpler e-tax requests, and a refreshed brand across devices.
Redesigned Singha Online, the official e-commerce platform for Singha Corporation, into a subscription-ready platform that introduced the new Singha Online Easy Plan for fixed-price recurring deliveries and improved single-time purchases with clearer promotions, better order tracking, simpler e-tax requests, and a refreshed brand across devices.
•
•
Worked as a mid-level UX/UI designer owning end-to-end user flows and key product decisions, collaborating closely with the client’s marketing team under tight deadlines to align design with revenue, retention, and operational goals.
Worked as a mid-level UX/UI designer owning end-to-end user flows and key product decisions, collaborating closely with the client’s marketing team under tight deadlines to align design with revenue, retention, and operational goals.
•
•
Tackled a major backend constraint by designing a scalable solution for shopping carts that keeps single-time and recurring orders separate in the system while still feeling like a unified, clear, and seamless journey for customers.
Tackled a major backend constraint by designing a scalable solution for shopping carts that keeps single-time and recurring orders separate in the system while still feeling like a unified, clear, and seamless journey for customers.
Problem and Context
Problem and Context
Singha Online is the official e-commerce platform for Singha Corporation and Boonrawd Trading, part of one of the largest food and beverage groups in Thailand. It has operated as an online shop for non-alcohol products since around 2012, when Singha Online Shop was first introduced as a direct-to-consumer channel for drinking water, soda, ready-to-drink beverages, and snacks.
Singha Online is the official e-commerce platform for Singha Corporation and Boonrawd Trading, part of one of the largest food and beverage groups in Thailand. It has operated as an online shop for non-alcohol products since around 2012, when Singha Online Shop was first introduced as a direct-to-consumer channel for drinking water, soda, ready-to-drink beverages, and snacks.
By 2022, the website clearly showed its age. The visual design and interactions felt outdated compared with modern Thai e-commerce sites, and the information architecture had grown in a patchy way, making key journeys such as promotions, order tracking, and e-tax harder than they needed to be.
By 2022, the website clearly showed its age. The visual design and interactions felt outdated compared with modern Thai e-commerce sites, and the information architecture had grown in a patchy way, making key journeys such as promotions, order tracking, and e-tax harder than they needed to be.
The client wanted to revamp Singha Online to modernize the site, improve usability, and prepare it for a new subscription model and more personalized promotions, while better reflecting the brand’s premium identity for both Thai and English speakers.
The client wanted to revamp Singha Online to modernize the site, improve usability, and prepare it for a new subscription model and more personalized promotions, while better reflecting the brand’s premium identity for both Thai and English speakers.
Before the redesign, the platform struggled with 4 main issues:
Before the redesign, the platform struggled with 4 main issues:
Unclear Promotions and Discount Codes
Unclear Promotions and Discount Codes
Promotions and discount codes were confusing. Customers often did not understand which promotion applied or why a code failed, which reduced trust at checkout.
Promotions and discount codes were confusing. Customers often did not understand which promotion applied or why a code failed, which reduced trust at checkout.
Limited Delivery Visibility and Tracking
Limited Delivery Visibility and Tracking
Delivery visibility was weak. Customers could not easily see when their order would arrive or how to track it, which is especially important for heavy items like water and for business stock planning.
Delivery visibility was weak. Customers could not easily see when their order would arrive or how to track it, which is especially important for heavy items like water and for business stock planning.
Complex and Manual E-Tax Process
Complex and Manual E-Tax Process
The e-tax process was difficult and required follow ups. Customers had limited self-serve options for requesting and tracking tax invoices.
The e-tax process was difficult and required follow ups. Customers had limited self-serve options for requesting and tracking tax invoices.
Subscription and Personalization Gaps
Subscription and Personalization Gaps
The platform did not fully support the new subscription model and personalized promotions that the business wanted to launch, and the brand identity needed a more modern, consistent expression across devices.
The platform did not fully support the new subscription model and personalized promotions that the business wanted to launch, and the brand identity needed a more modern, consistent expression across devices.
The redesign needed to reduce friction in these critical moments and support a new subscription service that allowed customers to schedule recurring deliveries at a fixed-price while still supporting single-time purchases with more personalized promotions.
The redesign needed to reduce friction in these critical moments and support a new subscription service that allowed customers to schedule recurring deliveries at a fixed-price while still supporting single-time purchases with more personalized promotions.
My Role and Ownership
My Role and Ownership
Our team included 1 lead UX/UI designer, 2 UX/UI designers and 1 UX researcher, where I owned large parts of the work end-to-end, including:
Our team included 1 lead UX/UI designer, 2 UX/UI designers and 1 UX researcher, where I owned large parts of the work end-to-end, including:
•
•
Translating marketing research, stakeholder input and business requirements into clear UX problems and product decisions.
Translating marketing research, stakeholder input and business requirements into clear UX problems and product decisions.
•
•
Co-owning the information architecture and user flows for both single-time purchases and subscription journeys.
Co-owning the information architecture and user flows for both single-time purchases and subscription journeys.
•
•
Designing key journeys and interfaces such as the Homepage, Product List Page, Product Detail Page, Shopping Carts, Checkout, My Account, and Singha Online Easy Plan management.
Designing key journeys and interfaces such as the Homepage, Product List Page, Product Detail Page, Shopping Carts, Checkout, My Account, and Singha Online Easy Plan management.
•
•
Helping shape the visual direction and design system, and collaborating closely with the client’s marketing and development teams under tight deadlines.
Helping shape the visual direction and design system, and collaborating closely with the client’s marketing and development teams under tight deadlines.
This project pushed me to operate much closer to a senior designer level. Our team had to connect flows to business outcomes and speak both “user” and “operations” language with stakeholders, and I grew a lot through that process.
This project pushed me to operate much closer to a senior designer level. Our team had to connect flows to business outcomes and speak both “user” and “operations” language with stakeholders, and I grew a lot through that process.
Users and Jobs to Be Done
Users and Jobs to Be Done
We focused on 2 primary segments.
We focused on 2 primary segments.
B2C Shoppers
B2C Shoppers
•
•
Busy office workers and households who want convenient home delivery at fair prices.
Busy office workers and households who want convenient home delivery at fair prices.
•
•
They do not want to carry heavy packs of water and expect clear promotions, reliable delivery, and easy repeat purchases.
They do not want to carry heavy packs of water and expect clear promotions, reliable delivery, and easy repeat purchases.
B2B Buyers
B2B Buyers
•
•
Local business owners and office admins who buy products in bulk for their shops or workplaces.
Local business owners and office admins who buy products in bulk for their shops or workplaces.
•
•
They care about stable prices, reliable delivery, and proper tax documentation for their accounting needs.
They care about stable prices, reliable delivery, and proper tax documentation for their accounting needs.
Across both groups, the core jobs to be done were to:
Across both groups, the core jobs to be done were to:
•
•
Find and compare the right products quickly.
Find and compare the right products quickly.
•
•
Understand the best promotion without manual calculations and guesswork.
Understand the best promotion without manual calculations and guesswork.
•
•
Trust delivery timing and order status.
Trust delivery timing and order status.
•
•
Repeat purchases easily, either through reordering or through a flexible subscription plan that feels safe and under control.
Repeat purchases easily, either through reordering or through a flexible subscription plan that feels safe and under control.
Key Constraints
Key Constraints
Backend and Subscription Logic
Backend and Subscription Logic
Subscription orders and single-time purchases followed different business rules for pricing, scheduling, and billing. The backend could not store both order types in 1 shopping cart. This constraint heavily influenced how we designed carts, checkout and subscription management.
Subscription orders and single-time purchases followed different business rules for pricing, scheduling, and billing. The backend could not store both order types in 1 shopping cart. This constraint heavily influenced how we designed carts, checkout and subscription management.
Tight Timeline and Budget
Tight Timeline and Budget
This was a large redesign tied to a brand refresh and a new subscription product. There was no budget for a full in-person design thinking workshop, so we relied on structured discovery conversations, written question lists, and iterative alignment with the Boonrawd marketing team.
This was a large redesign tied to a brand refresh and a new subscription product. There was no budget for a full in-person design thinking workshop, so we relied on structured discovery conversations, written question lists, and iterative alignment with the Boonrawd marketing team.
Limited Data and Analytics on the Legacy Site
Limited Data and Analytics on the Legacy Site
The legacy Singha Online website lacked robust analytics and clear funnels, so we had limited visibility into drop-offs or promotion performance. We could not fully make data-informed design decisions and instead relied on stakeholder input and competitive benchmarks.
The legacy Singha Online website lacked robust analytics and clear funnels, so we had limited visibility into drop-offs or promotion performance. We could not fully make data-informed design decisions and instead relied on stakeholder input and competitive benchmarks.
Balancing B2C and B2B Needs in 1 Platform
Balancing B2C and B2B Needs in 1 Platform
The site needed to serve both everyday consumers and business buyers within the same structure and code base. We had to design journeys that felt simple and coherent while supporting different expectations for volume, pricing, and documentation.
The site needed to serve both everyday consumers and business buyers within the same structure and code base. We had to design journeys that felt simple and coherent while supporting different expectations for volume, pricing, and documentation.
Design Process Overview
Design Process Overview
Instead of a workshop-heavy process, we followed a streamlined approach adapted to the client’s constraints.
Instead of a workshop-heavy process, we followed a streamlined approach adapted to the client’s constraints.
Design Discovery
Design Discovery
We started by clarifying scope, target users, pain points, and requirements with the Boonrawd marketing team.
We started by clarifying scope, target users, pain points, and requirements with the Boonrawd marketing team.
Because there was no budget for a big design thinking workshop, we used structured Q and A documents and focused discussions to:
Because there was no budget for a big design thinking workshop, we used structured Q and A documents and focused discussions to:
•
•
understand who currently uses Singha Online and how
understand who currently uses Singha Online and how
•
•
align on goals for subscriptions, promotions, and brand refresh
align on goals for subscriptions, promotions, and brand refresh
•
•
uncover operational constraints in logistics, payment, and tax
uncover operational constraints in logistics, payment, and tax
The outcome was a shared understanding of what success should look like before we opened Figma.
The outcome was a shared understanding of what success should look like before we opened Figma.
Website Audit
Website Audit
Next, we audited the existing Singha Online website.
Next, we audited the existing Singha Online website.
We:
We:
•
•
mapped the current sitemap and navigation paths
mapped the current sitemap and navigation paths
•
•
reviewed how key journeys actually worked, including promotions, checkout, order tracking, and e-tax
reviewed how key journeys actually worked, including promotions, checkout, order tracking, and e-tax
•
•
documented specific UX issues such as unclear coupon behavior, missing or weak tracking, and hard-to-follow e-tax steps
documented specific UX issues such as unclear coupon behavior, missing or weak tracking, and hard-to-follow e-tax steps
This required going through every major layout such as the Homepage, Product Pages, and Campaign Pages and understanding layout and content constraints. We repeated this for mobile layouts so that we knew both limitations and possibilities on different devices.
This required going through every major layout such as the Homepage, Product Pages, and Campaign Pages and understanding layout and content constraints. We repeated this for mobile layouts so that we knew both limitations and possibilities on different devices.
Competitive Benchmarking
Competitive Benchmarking
We used competitor research prepared by the client’s marketing team as a starting point and added our own review.
We used competitor research prepared by the client’s marketing team as a starting point and added our own review.
We looked at:
We looked at:
•
•
direct local competitors in water and beverage delivery
direct local competitors in water and beverage delivery
(for example Sprinkle and Nestlé Pure Life)
(for example Sprinkle and Nestlé Pure Life)
•
•
retail e-commerce sites such as supermarket and wholesale platforms
retail e-commerce sites such as supermarket and wholesale platforms
(for example Lotus’s and Big C)
(for example Lotus’s and Big C)
•
•
international best practice references from well-known online retailers
international best practice references from well-known online retailers
(for example Walmart and Instacart)
(for example Walmart and Instacart)
This snapshot shows a deeper audit of Walmart and Instacart, where we studied how they structure product discovery, promotions, carts, and checkout. We used these references as inspiration and then simplified and localized the patterns to fit Singha Online’s constraints and Thai users.
This snapshot shows a deeper audit of Walmart and Instacart, where we studied how they structure product discovery, promotions, carts, and checkout. We used these references as inspiration and then simplified and localized the patterns to fit Singha Online’s constraints and Thai users.
Our goal was to understand:
Our goal was to understand:
E-Commerce Flow Patterns
E-Commerce Flow Patterns
How other platforms handle browsing, carts, checkout, subscriptions, and promotions.
How other platforms handle browsing, carts, checkout, subscriptions, and promotions.
Existing User Mental Models
Existing User Mental Models
Which interface patterns and flows users in this context are already familiar with.
Which interface patterns and flows users in this context are already familiar with.
Positioning and Differentiation
Positioning and Differentiation
Where Singha Online needed to meet baseline expectations versus where it could differentiate.
Where Singha Online needed to meet baseline expectations versus where it could differentiate.
These insights helped us frame our solutions with realistic references and informed tradeoffs.
These insights helped us frame our solutions with realistic references and informed tradeoffs.
Brainstorming and Design Critiques
Brainstorming and Design Critiques
With discovery, audit, and competitive benchmarking in place, we ran internal brainstorming sessions and regular design critiques with the design team.
With discovery, audit, and competitive benchmarking in place, we ran internal brainstorming sessions and regular design critiques with the design team.
We used these sessions to:
We used these sessions to:
•
•
synthesize findings into clear UX problems and opportunity areas
synthesize findings into clear UX problems and opportunity areas
•
•
categorize use cases into logged in and guest scenarios
categorize use cases into logged in and guest scenarios
•
•
identify key templates to focus on, such as the Homepage and Campaign Landing Pages, Product List Page and Product Detail Page, Add to Cart and Checkout, and core My Account areas like orders, addresses, favorites, and points
identify key templates to focus on, such as the Homepage and Campaign Landing Pages, Product List Page and Product Detail Page, Add to Cart and Checkout, and core My Account areas like orders, addresses, favorites, and points
Throughout this phase, we shared work in progress in open design critiques to surface blind spots early, trade perspectives, and align on stronger solutions together. We kept critiques focused on clear problem framing and actionable feedback so the feedback loop stayed honest, respectful, and efficient.
Throughout this phase, we shared work in progress in open design critiques to surface blind spots early, trade perspectives, and align on stronger solutions together. We kept critiques focused on clear problem framing and actionable feedback so the feedback loop stayed honest, respectful, and efficient.
A large part of these sessions was exploring how to tackle the hardest UX challenges:
A large part of these sessions was exploring how to tackle the hardest UX challenges:
•
•
simplifying coupons and promotions
simplifying coupons and promotions
•
•
making checkout feel safer and more predictable
making checkout feel safer and more predictable
•
•
streamlining e-tax flows
streamlining e-tax flows
•
•
reducing confusion around how shopping carts should work for single-time and recurring orders
reducing confusion around how shopping carts should work for single-time and recurring orders
We captured current features, pain points, suggested solutions, and references, as well as “good-to-have” ideas that could help drive conversion when there is more time and budget.
We captured current features, pain points, suggested solutions, and references, as well as “good-to-have” ideas that could help drive conversion when there is more time and budget.
Information Architecture
Information Architecture
Once we aligned on problems and priorities, we moved into information architecture.
Once we aligned on problems and priorities, we moved into information architecture.
Sitemap
Sitemap
We re-designed a brand new sitemap that:
We re-designed a brand new sitemap that:
•
•
captured all pages required to support both single-time purchases and Singha Online Easy Plan subscriptions
captured all pages required to support both single-time purchases and Singha Online Easy Plan subscriptions
•
•
integrated supporting content, such as campaigns, promotions, help, and e-tax
integrated supporting content, such as campaigns, promotions, help, and e-tax
•
•
clearly defined what would ship in this phase and what would be deferred
clearly defined what would ship in this phase and what would be deferred
For example, a deeper integration with Singha Online Rewards would have required more backend work, so we documented it as a future phase rather than pushing it into this release.
For example, a deeper integration with Singha Online Rewards would have required more backend work, so we documented it as a future phase rather than pushing it into this release.
User Flow Charts
User Flow Charts
We created detailed user flow charts that mapped the full journey:
We created detailed user flow charts that mapped the full journey:
•
•
account access, location entry, and browsing
account access, location entry, and browsing
•
•
normal shopping cart, subscription shopping cart, and checkout
normal shopping cart, subscription shopping cart, and checkout
•
•
subscription creation, updates, skips, payments, and cancellation
subscription creation, updates, skips, payments, and cancellation
•
•
order tracking, returns, and support flows
order tracking, returns, and support flows
We mapped both user facing actions and system side behavior so developers could see what data and logic each step required.
We mapped both user facing actions and system side behavior so developers could see what data and logic each step required.
In total, we delivered 43 user flows including critical edge cases, giving the team a clear blueprint for how the platform should behave.
In total, we delivered 43 user flows including critical edge cases, giving the team a clear blueprint for how the platform should behave.
Wireframes and Wireflows
Wireframes and Wireflows
We produced high-fidelity wireframes early and turned them into wireflows that:
We produced high-fidelity wireframes early and turned them into wireflows that:
•
•
connected screens according to the sitemap and flows
connected screens according to the sitemap and flows
•
•
showed branches and edge cases
showed branches and edge cases
•
•
made the logic easy to follow for both the client and developers
made the logic easy to follow for both the client and developers
The 2 wireflows shown here illustrate how we used wireframes to define the structure of key journeys. Each flow identifies key entry points and maps out screens, decision points, and edge cases in a way that made it easier for the client and our team to align on the overall logic before we moved into visual design.
The 2 wireflows shown here illustrate how we used wireframes to define the structure of key journeys. Each flow identifies key entry points and maps out screens, decision points, and edge cases in a way that made it easier for the client and our team to align on the overall logic before we moved into visual design.
We reviewed these wireflows regularly with the marketing team and ran internal critique sessions to refine the navigation, flows and hierarchy before investing heavily in visual design.
We reviewed these wireflows regularly with the marketing team and ran internal critique sessions to refine the navigation, flows and hierarchy before investing heavily in visual design.
Usability Testing
Usability Testing
Given the time and budget constraints, we validated the concept using mobile-responsive high-fidelity wireframes instead of running multiple rounds of UI testing. We then turned those wireframes into a high-fidelity prototype with key microinteractions, which our UX researcher used for concept testing sessions.
Given the time and budget constraints, we validated the concept using mobile-responsive high-fidelity wireframes instead of running multiple rounds of UI testing. We then turned those wireframes into a high-fidelity prototype with key microinteractions, which our UX researcher used for concept testing sessions.
We tested with users who represented both household shoppers and business buyers and asked them to:
We tested with users who represented both household shoppers and business buyers and asked them to:
•
•
discover products and move through the mobile experience
discover products and move through the mobile experience
•
•
complete a single-time purchase
complete a single-time purchase
•
•
set up and review Singha Online Easy Plan subscription
set up and review Singha Online Easy Plan subscription
•
•
apply promotions and review the order summary and delivery details
apply promotions and review the order summary and delivery details
From these sessions we learned that:
From these sessions we learned that:
•
•
subscription entry points needed stronger visibility and clearer explanation
subscription entry points needed stronger visibility and clearer explanation
•
•
promotion areas worked better when we simplified language, reduced repeated fields, and surfaced savings more clearly
promotion areas worked better when we simplified language, reduced repeated fields, and surfaced savings more clearly
•
•
delivery information and order summaries needed to appear earlier and in more prominent positions
delivery information and order summaries needed to appear earlier and in more prominent positions
•
•
e-tax needed clearer expectations, especially for business users
e-tax needed clearer expectations, especially for business users
Essentially, we used these insights to refine labels, layouts, messaging, and interaction details before finalizing high-fidelity UI and the design system.
Essentially, we used these insights to refine labels, layouts, messaging, and interaction details before finalizing high-fidelity UI and the design system.
Visual Design
Visual Design
Visual design was built on top of the validated structure and flows.
Visual design was built on top of the validated structure and flows.
Concept Design
Concept Design
Our team explored 5 visual directions that could express the refreshed Singha Online brand and still work for an e-commerce platform. Each concept came with a defined mood and tone, visual and brand inspirations, and a sample Landing Page mockup to show how it could look in context.
Our team explored 5 visual directions that could express the refreshed Singha Online brand and still work for an e-commerce platform. Each concept came with a defined mood and tone, visual and brand inspirations, and a sample Landing Page mockup to show how it could look in context.
We presented these concepts to the client, gathered their feedback, and iterated until we aligned on a finalized direction. That selected concept then became the foundation for all key templates and guided the later UI design and design system work.
We presented these concepts to the client, gathered their feedback, and iterated until we aligned on a finalized direction. That selected concept then became the foundation for all key templates and guided the later UI design and design system work.
UI Design
UI Design
Using that direction and the usability testing feedback, we refined UI for:
Using that direction and the usability testing feedback, we refined UI for:
•
•
account access, location entry, and browsing
account access, location entry, and browsing
•
•
normal shopping cart, subscription shopping cart, and checkout
normal shopping cart, subscription shopping cart, and checkout
•
•
subscription creation, updates, skips, payments, and cancellation
subscription creation, updates, skips, payments, and cancellation
•
•
order tracking, returns, and support flows
order tracking, returns, and support flows
We continued to work in wireflow form and added annotations where needed so that both marketing and development teams could see the logic behind each interaction and state.
We continued to work in wireflow form and added annotations where needed so that both marketing and development teams could see the logic behind each interaction and state.
The 4 desktop wireflows shown here are examples of how we carried that logic through into detailed UI. Each flow started from an agreed user flow chart and was translated into high-fidelity screens with clear annotations for states, rules, and edge cases, so developers could implement with confidence.
The 4 desktop wireflows shown here are examples of how we carried that logic through into detailed UI. Each flow started from an agreed user flow chart and was translated into high-fidelity screens with clear annotations for states, rules, and edge cases, so developers could implement with confidence.
In total, this resulted in:
In total, this resulted in:
926
926
desktop screens delivered
desktop screens delivered
601
601
tablet screens delivered
tablet screens delivered
741
741
mobile responsive screens delivered
mobile responsive screens delivered
All of this responsive UI work was completed within roughly two and a half months, from mid July to the end of September 2022.
All of this responsive UI work was completed within roughly two and a half months, from mid July to the end of September 2022.
Design System and Visual Foundation
Design System and Visual Foundation
In parallel, we developed a design system and visual foundation to keep the experience consistent, scalable, and comprehensive across platforms.
In parallel, we developed a design system and visual foundation to keep the experience consistent, scalable, and comprehensive across platforms.
We defined:
We defined:
•
•
style guides for colors, typography, logos, icons, illustrations, shadows, grid layouts, and product detail guidelines
style guides for colors, typography, logos, icons, illustrations, shadows, grid layouts, and product detail guidelines
•
•
components such as buttons, navigation elements, calendars, alerts, input fields, dropdowns, checkboxes, radio buttons, toggles, tabs, filters, breadcrumbs, cards, notifications, images, banners, and tags
components such as buttons, navigation elements, calendars, alerts, input fields, dropdowns, checkboxes, radio buttons, toggles, tabs, filters, breadcrumbs, cards, notifications, images, banners, and tags
•
•
a support kit with flow names, wireflows, and connection arrows, which documented how screens link together and which states exist
a support kit with flow names, wireflows, and connection arrows, which documented how screens link together and which states exist
By the end of the project, the design system contained:
By the end of the project, the design system contained:
68
68
components
components
875
875
variants
variants
78
78
styles
styles
This gave the client a structured toolkit they can reuse to keep future pages, campaigns, and features consistent without rebuilding patterns from scratch.
This gave the client a structured toolkit they can reuse to keep future pages, campaigns, and features consistent without rebuilding patterns from scratch.
Design Handoff
Design Handoff
We handed off the designs in stages, working closely with both marketing and development.
We handed off the designs in stages, working closely with both marketing and development.
For Marketing and Content:
For Marketing and Content:
•
•
explained layout logic and how different sections could support campaigns, promotions, and search engine optimization
explained layout logic and how different sections could support campaigns, promotions, and search engine optimization
•
•
collaborated on English and Thai content so that copy matched the intended user experience
collaborated on English and Thai content so that copy matched the intended user experience
For Development:
For Development:
•
•
provided annotated screens, detailed wireflows, and design system documentation
provided annotated screens, detailed wireflows, and design system documentation
•
•
walked through flows and edge cases, including the 2-shopping-cart model, promotion behavior, and e-tax flows
walked through flows and edge cases, including the 2-shopping-cart model, promotion behavior, and e-tax flows
•
•
answered questions during implementation to preserve design intent while staying realistic about technical constraints
answered questions during implementation to preserve design intent while staying realistic about technical constraints
Key Design Solutions
Key Design Solutions
1. A 2-Shopping-Cart Model That Customers Can Understand
1. A 2-Shopping-Cart Model That Customers Can Understand
Technical constraints required single-time and subscription orders to be handled separately in the backend. To keep the journey clear, we designed a 2-shopping-cart model: 1 cart for single-time purchases and 1 cart for recurring Singha Online Easy Plan subscriptions.
Technical constraints required single-time and subscription orders to be handled separately in the backend. To keep the journey clear, we designed a 2-shopping-cart model: 1 cart for single-time purchases and 1 cart for recurring Singha Online Easy Plan subscriptions.
We used clear labels, consistent layouts, and predictable summaries so customers always knew what would be delivered once and what would repeat. Singha Online Easy Plan controls were designed to feel flexible, letting customers change delivery frequency, adjust quantities, and manage upcoming deliveries without breaking the overall shopping flow.
We used clear labels, consistent layouts, and predictable summaries so customers always knew what would be delivered once and what would repeat. Singha Online Easy Plan controls were designed to feel flexible, letting customers change delivery frequency, adjust quantities, and manage upcoming deliveries without breaking the overall shopping flow.
2. Promotions That Feel Fair and Understandable
2. Promotions That Feel Fair and Understandable
Promotions were a major purchase driver but also a major source of confusion. We focused on making promotion rules visible and understandable so customers do not have to guess why a discount does or does not apply.
Promotions were a major purchase driver but also a major source of confusion. We focused on making promotion rules visible and understandable so customers do not have to guess why a discount does or does not apply.
The redesigned promotion area helps customers discover relevant offers at the right time, see applied savings clearly, and understand error states in plain language. This reduced guesswork and made discounts feel more fair and predictable in a price-sensitive category like beverages and daily essentials.
The redesigned promotion area helps customers discover relevant offers at the right time, see applied savings clearly, and understand error states in plain language. This reduced guesswork and made discounts feel more fair and predictable in a price-sensitive category like beverages and daily essentials.
3. Better Order Tracking and Simpler E-Tax Requests
3. Better Order Tracking and Simpler E-Tax Requests
When customers cannot track orders or request e-tax easily, they lose confidence. Our team clarified order status and delivery expectations and added a more direct e-tax request path from order history so customers can self-serve instead of chasing support.
When customers cannot track orders or request e-tax easily, they lose confidence. Our team clarified order status and delivery expectations and added a more direct e-tax request path from order history so customers can self-serve instead of chasing support.
These improvements gave customers more control after checkout and reduced the need to contact support for basic questions about delivery or documentation.
These improvements gave customers more control after checkout and reduced the need to contact support for basic questions about delivery or documentation.
Outcomes
Outcomes
Even without direct access to post-launch analytics, we were able to deliver tangible outcomes.
Even without direct access to post-launch analytics, we were able to deliver tangible outcomes.
1. Subscription Launch and a Clearer Core Journey
1. Subscription Launch and a Clearer Core Journey
Singha Online successfully launched Singha Online Easy Plan as a subscription option alongside a clearer and more consistent single-time purchase experience across devices.
Singha Online successfully launched Singha Online Easy Plan as a subscription option alongside a clearer and more consistent single-time purchase experience across devices.
2. Reduced Friction at Critical Trust Moments
2. Reduced Friction at Critical Trust Moments
Promotions, order tracking, and e-tax flows became more transparent and self-explanatory, directly addressing pain points identified during discovery and usability testing and helping customers feel more confident about using the platform regularly.
Promotions, order tracking, and e-tax flows became more transparent and self-explanatory, directly addressing pain points identified during discovery and usability testing and helping customers feel more confident about using the platform regularly.
3. A Scalable Foundation for Future Optimization
3. A Scalable Foundation for Future Optimization
The detailed user flows, large-scale responsive UI and comprehensive design system gave the client a stronger foundation for future campaigns, experimentation, and feature development without sacrificing consistency.
The detailed user flows, large-scale responsive UI and comprehensive design system gave the client a stronger foundation for future campaigns, experimentation, and feature development without sacrificing consistency.
What I Learned
What I Learned
This project played a major role in my growth from a mid-level designer toward a senior designer mindset.
This project played a major role in my growth from a mid-level designer toward a senior designer mindset.
Business Alignment
Business Alignment
I learned how to connect UX decisions to revenue, retention, and operational constraints, especially around subscription economics, promotion strategy, and logistics. It taught me to think beyond screens and understand how design affects the business model.
I learned how to connect UX decisions to revenue, retention, and operational constraints, especially around subscription economics, promotion strategy, and logistics. It taught me to think beyond screens and understand how design affects the business model.
Designing with Constraints
Designing with Constraints
The 2-shopping-cart challenge showed me how to accept real technical limitations and still create a simple mental model and clear journey for customers. It reinforced that good UX often comes from working with constraints, not against them.
The 2-shopping-cart challenge showed me how to accept real technical limitations and still create a simple mental model and clear journey for customers. It reinforced that good UX often comes from working with constraints, not against them.
Leading Under Pressure
Leading Under Pressure
Working under tight deadlines while collaborating with marketing, research, and development sharpened my ability to prioritize, communicate tradeoffs, and keep diverse stakeholders aligned on what we could realistically ship.
Working under tight deadlines while collaborating with marketing, research, and development sharpened my ability to prioritize, communicate tradeoffs, and keep diverse stakeholders aligned on what we could realistically ship.
Systematic Thinking
Systematic Thinking
Through building and refining the design system at this scale, I discovered how much I enjoy systematic thinking. Designing and maintaining components, variants, and styles across hundreds of screens became one of the most satisfying parts of the project and reinforced my interest in design systems as a core part of my craft going forward.
Through building and refining the design system at this scale, I discovered how much I enjoy systematic thinking. Designing and maintaining components, variants, and styles across hundreds of screens became one of the most satisfying parts of the project and reinforced my interest in design systems as a core part of my craft going forward.
What’s Next?
What’s Next?
What’s Next?
