Work Project
Client: Samsung Electronics
Revamp Global Websites with Standard Templates to Elevate User Experience and Efficiency
* Globally lanched service (83 websites across 60 countries). Worked as a full-time UX/UI designer for Duotone, a partner of Samsung Electronics.
Solution
Samsung.com, now available in 60+ countries, has completed its 6th revamp. We considered numerous variables and actively utilized a design system to create versatile scrns that cater to various situations and contexts. This approach allowed us to develop a common design template for crafting web pages. We made over 140 components and then used them to build responsive screens for PC and mobile devices.
Overview
Samsung Electronics embarked on a website redesign, establishing a design system and utilizing templates to revamp all global sites. This initiative aimed to enhance consistency, clarity, and efficiency across the board. As a result, users can enjoy a uniform experience across services, and the sites can be managed more effectively from a business perspective.
Role
Project Type
Responsive Website
Samsung.com ↗
Team
2 UXUI Director
4 Product Managers
30+ UXUI Designers
Duration
Jan 2020 ~ Oct 2022
Tools
Sketch
Adobe XD
Zeplin
Protopie
Keynote
Confluence / Zira
The Client & Service
Samsung Electronics, headquartered in South Korea, is a multinational electronics company and one of the world's largest manufacturers of smartphones, televisions, and other consumer electronics for global markets across diverse cultures and languages.
Samsung.com is the official e-commerce website of Samsung Electronics, serving over 60 countries. It showcases Samsung's products, enables online purchases, and provides related content. This project is about the 6th major redesign of the platform.
Challenge Prompt
How might we design and scale the platforms to be seamlessly flexible, sustainable, and valuable for a global users, achieving both user needs and business goals?
Design Audit
As part of our comprehensive design audit, we thoroughly analyzed the Samsung website and identified 15 primary page types. Through this process, we discovered 24 essential content elements that are used across the site. Our analysis yielded the following key insights:
#1. Content Usage Frequency
We determined which content elements are frequently used and which ones are used less often across the various pages of Samsung.com. This information helps prioritize content and guides design decisions to ensure that the most important elements are given appropriate prominence.
#2. Duplicate Content Identification
We identified instances where the same content appears on multiple pages within Samsung.com. This discovery highlights opportunities to streamline the site's content structure, reduce redundancy, and improve content management efficiency.
#3. Flexible Layout Opportunities
By considering flexible layout options for the existing content, we believe there is significant potential to enhance the user experience and cater to different user preferences. Implementing responsive and adaptable layouts can make the site more engaging and user-friendly across various devices and screen sizes.
Initial Design Flow
We found that it takes users 6 clicks to get from GNB to the Cart & Checkout page.
* Product Family Showcase: This page shows all types of products from certain categories e.g. Home Appliances → Refrigerators, AC,  Washer...
* Product Category Detail: This page shows all types of specific products families e.g. Refrigerators families → Smart Refrigerators, One Door Refrigerators...
Context
01.
There is only one template available per depth level of the website, regardless of the varying needs of stakeholders and their consumers.
LEVEL 2 - PFS Page
*Product Family Showcase
Designed for routing, not discovery
LEVEL 3 - PCD Page
*Product Category Detail
Does not allow for sub-types
LEVEL 4 - PF Page
Product Finder
Requires grid — even for single products
LEVEL 5 - PD Page
Product Detail
Does not support
flagship pages
02.
Current templates don’t meet marketing needs, requiring stakeholders' time and resources to build new custom pages.
LEVEL 2 - PFS Page
Product Family Showcase
LEVEL 3 - PCD Page
Product Category Detail
Build new custom pages for 
new marketing needs
LEVEL 4 - PF Page
Product Finder
LEVEL 5 - PD Page
Product Detail
Build new custom pages for 
new marketing needs
03.
The repeated creation of new marketing pages has compounded the amount of effort needed and created a lack of standardization. This tends to give users an inconsistent experience.
LEVEL 2 - PFS Page
Product Family Showcase
LEVEL 3 - PCD Page
Product Category Detail
LEVEL 4 - PF Page
Product Finder
LEVEL 5 - PD Page
Product Detail
04.
Additionally, while these marketing pages serve campaign needs they add an extra click for samsung.com users to get to purchase
LEVEL 2
Product Family Showcase
LEVEL 3
Product Category Detail
LEVEL 4
Product Finder
LEVEL 5
New Marketing Page
Requires additional clicks to reach the destination
LEVEL 6
Product Detail
Problem Summary
The Overarching Challenge
The existing site structure is too rigid and page types are too one-size fits all.
Stakeholders required to create new pages to meet their needs.
#1. Pain Point
No standardization across key page types, which leads to a lack of design consistency.
#2. Pain Point
Too many clicks required to reach a product leads to increased bounce rates.
#3. Pain Point
How We Solved
Breaking away from rigid structures, templates were utilized to create a flexible framework capable of accommodating non-linear consumer behaviors and diverse business needs. This flexible template allowed us to streamline the user journey, reducing the number of clicks required from 6 to 4.
Easily find what they need with fewer clicks
Users
Seamless and consistent journey experience from discovery to commerce
Business
Representation of key business priorities
Business
Atomic Design?
Everything begins with atoms, which combine to form molecules. These molecules then join to create more complex organisms, ultimately producing all matter. Additionally, the system progresses through stages from abstract concepts to concrete implementations.
The proposed strategy adopts the form of an atomic design system.
Inspired by a chemical perspective, atomic design is a methodology that emphasizes the creation of small, reusable components that are robustly designed to enhance efficiency and consistency. The common conventions established through repeating patterns significantly contribute to maintaining high productivity and quality.
Abstract
Concrete
Final Outcome
Pages can be variably and flexibly configured according to the specific intentions or objectives of each business unit or corporation, allowing for efficient operation without the need to allocate resources for new page creation.
→ This efficiency minimizes time, resource, and information loss, facilitating swift responses to business decisions.
01
Developing Flexible Templates with Modular Components
We created over 140+ modular components for various use cases that can be combined into flexible templates. By enabling or disabling components, a single template can accommodate multiple scenarios based on the requirements of different countries and business units.
Use a Template for Multiple Cases
Template
02
Implementing Responsive Design for Multiple Devices
We provided a responsive design that adapts to various screen sizes and devices, from traditional platforms to emerging technologies like tablets and foldable smartphones, ensuring an optimal user experience across all platforms.
03
Leveraging the Design System & Authoring Functional Requirements Document
We leveraged the Design System to create components while collaborating closely with the Design System team, as both projects ran concurrently. We efficiently developed the front-end design and Design System together, ensuring consistency. We also authored a comprehensive Functional Requirements Document (FRD) to guide development.
Components with Variant Cases
Functional Requirements Document
Impact
#1. Enhancing Website Operational Efficiency
Leveraging a design system, components, and templates significantly reduced time, resources, and errors.
#2. Streamlined Product Navigation Boosts Purchase Conversion
By simplifying the product navigation process, users can quickly find and reach their desired items, leading to an increase in purchase conversion rates.
Key Takeaways
#1. The challenges of designing at scale
Designing at scale introduces a variety of challenges. Each business unit, for example, has different processes and requirements.
Moreover, it took time and effort to understand different stakeholders’ requirements and reach alignment. It was a humbling experience to learn that sometimes things take long for good reasons.
#2. Comprehensive Understanding of UI Design Structure and Component Management
Delving into every aspect of UI design, from individual icons to comprehensive templates, provided a deep understanding of how website structures are composed. Serving as a component manager, I learned the importance of organizing and distributing components in a way that is easily recognizable and accessible to all team members. This role emphasized not only the technical aspects of UI design but also the significance of clear communication and effective management in ensuring consistent and coherent design elements across the platform.
You Might Also Like...
Smart Home App – Personalized Home for Enhanced Device Control & Monitoring and Content Discovery
School of Visual Arts X Jersey City Free Public Library – Enhancing ESL Program for Adult Immigrants