2021-22 work experience
UX Design Guidelines
Structuring for Consistency Across 189 Products
Video created by Interaction Studio Team of NAVER
Designers
Including UX, UI, Product, Interaction, Branding, Graphic Designers
Products
Across various industries such as Search, Commerce, Social, etc.
Market Share
The most dominant software company in Korea, often referred to as 'the Google of Korea'
my Role
My team, 'Forward Lab,' was created for the sole purpose of building UX guidelines for NAVER's designers. It aims to define the design principles of NAVER and produce consistent and trustworthy user experiences across all products.
As a proactive contributor, I took on the crucial role of creating the UX Writing guidelines and NAVER Design System.
Team
Woosung Park
Eunjin Kim
UX Lead
Duration
1 year (June 2021~May 2022)
Project Type
App Icons that Naver is currently providing
What is “Good Design”?
UX Writing in Korean
The Dilemma of Strictness vs Flexibility
Balancing between flexibility and the strictness of rules is a challenge since we provide more than 190 products. Therefore, it was crucial to set expected usage, and iteration is also essential to strike this balance, as it's an ongoing process of refinement.
What is ‘UX Writing’?
UX writing is the craft of helping customers use and understand digital experiences through words, which highly affects usability and brand personalities.
UX Writing for Usability
With regard to usability, UX Writing should contain concise information to help the user clearly understand and quickly reach the user goal.
Username
@naver.com
apple
Clearly specifying what type of username to input helps users efficiently resolve error situations.
Username
@naver.com
apple
Not specifying what type of username to input leads users to give up without completing the login process.
UX Writing for
Brand Personality
With regard to brand personality, UX writers can establish a voice and tone strategy. Below are examples from the same industry but with different brand personalities being conveyed.
‘Amazon’ uses a formal tone to convey a trustworthy personality.
‘Deliveroo’ uses a conversational tone akin to conveying a friendly personality.
Why Does NAVER Need UX Writing Guidelines?
Dark Patterns in UX writing
Dark Patterns refer to “tricks that make users do things that they didn't mean to, like buying or signing up for something.” This will likely result in long-term losses such as negative brand perception and loss of users’ trust.
‘Confirm shaming’ is one of the most representative examples.
This page is from a music streaming app, 'NAVER Vibe.' When a user cancels their premium subscription, the provider shames the user for feeling like they are giving up their benefits.
I found a significant number of Dark Patterns in NAVER’s products, such as in the case above. This was necessary to raise awareness of Dark Patterns’ negative effects and also to suggest ‘Writing Principles for Good Design’.
Products with Inconsistent Usability
Each designer consisted of different information in the same component, even if it conveyed the same message, which made it challenging to achieve consistent usability. Additionally, there have been instances of using expressions that are not intuitively understandable.
Examples of dialogs with the same messages but different writing from various products
These are all confirmation dialogs that prompt the user to confirm actions such as deletion or unsubscribing. However, due to the different writing used in elements such as titles, descriptions, and buttons, users may experience inconsistency and confusion.
The Archive of NAVER’s Writing Cases
We archived most of the interfaces from all products in NAVER. Then, I grouped them according to their writing tone, usages, and components. Through this process, I could find out specific patterns of good writing. From these resources, I organized the content of the guidelines.
Establishing the Structure of the Guidelines
I classified the patterns from references and structured the guidelines into 3 parts based on feasibility and the scale of impact.
As we ascend to the apex of the triangle, we approach the fundamental principles of UX design, exerting a significant influence throughout NAVER.
Conversely, descending below the triangle, we delve into practical content that designers can directly apply, acquiring knowledge to use in this part.
Design Systems on the Web,
the Ultimate Hub for Designers
We aimed to create a hub where all designers could access these guidelines at any time. Therefore, we developed a website which is restricted to internal designers only and built a Markdown language editing system for easy content uploads.
Video created by Interaction Studio Team in NAVER
LNB Structure of the UX Writing Guidelines
The chapters of the UX writing guidelines, grouped into 3 parts, can be accessed through the LNB (Left Navigation Bar) under the GNB (Global Navigation Bar) category 'UX Writing.'
The Flow of Readers' Understanding of the Chapter
I focused on writing each chapter to help other designers understand what the message is and how to write properly with less effort. Therefore, I built a structure of sections that started with educational content and ended with practical templates.
Part 1: Principles of UX Writing
With Eon Kim, the Head of Design, we formulated the Principles of UX Writing. This has contributed to delivering sustainable, accessible, and trustworthy value.
The principles consist of four key aspects, each supported by checklists that aid designers in their practical implementation. The following presents the detailed content.
Providing Examples for Each Checklist
For each checklist, I have included “do” and “don’t” cases, along with real examples, to facilitate better understanding. Below is an example.
Ensure all necessary informations are included
Do
Don’t
content
Part 2: Writing for Communication
This part provides 5 chapters of message writing for usability. The messages are the most representative types used in digital products, and I organized them based on the research of NAVER's actual cases.
Chapter 1.
Chapter 2.
Chapter 3.
Chapter 4.
Chapter 5.
UI Component Practices
UX writing cannot be separated from UI. The most useful section of the content would be 'UI Component Practices' since it instructs how to write for each element in various UI components. Below is an excerpt from that.
Example of the chapter 'Comfirmation Messages'
A confirmation message prompts the user to double-check whether they want to proceed with an action, preventing them from unintentionally taking a step they didn't intend to.
Example of the chapter 'Error Messages'
Error messages communicate to the user what problem has arisen, explain the reason for the issue, and provide a solution or guidance on how the user can resolve the problem.
content
Part 3: Writing for Accuracy
This part provides 5 chapters regarding writing accuracy that most designers frequently miss out on. In addition, users receive various types of data such as price, date, and the number of likes. I structured these data into ‘Time’ and ‘Number’ and gave guidelines that enhance accuracy.
Chapter 1.
Chapter 2.
Chapter 3.
Chapter 4.
Chapter 5.
Time
‘Absolute Time’ is the format of displaying dates, days, and times in the international standard (ISO 8601) Gregorian calendar. It's widely used in features where conveying precise timing is crucial for objective information delivery.
‘Relative Time’ is the format of displaying past time based on the current time. It's widely used in features where emphasizing freshness is essential, such as comments or posts generated by user.
Number
1,234
Full number
Number+Unit
Number+Plus
Maximum Digit
1.2K
1,200+
999+
1
2
3
4
Explosive Expansion Beyond the Guidelines
Feedbacks from Collegues
After publishing, I got a lot of valuable feedbacks from colleagues regardless of their positions and jobs.
Frontend Engineer
Thank you for raising importance of establishing guidelines to achieve consistency.
Product Designer
I would like to know more about providing friendly and engaging tone.
Project Manager
Thanks for providing a template to standardize for announcements, as it was quite varied before.
Backend Engineer
I look forward to seeing templates into a full-fledged code system as we continue to refine it.
Diverse Topics including Accessibility
Automation Representation with React Code
This image is an example of React code formatting numbers and dates
© Jeongmin Lee 2024