[Design Story] Behind the Design of One UI 4

“The society and environment we belong to are constantly changing. With this change, users desire more complex and diverse experiences. In today’s world, there is also a constant influx of innovative products based on advanced technologies that change our everyday lives. In the midst of all this change, One UI will always listen to the voices of customers and continue to evolve so that our users can comfortably and joyfully experience their everyday lives.”

– Yoojin Hong, Head of UX Team for Samsung Electronics Mobile eXperience Business

Samsung Electronics designed the brand identity for One UI 4 as a seamless mobile experience that is able to harmonize with any device or story. The delicate yet flexible elements of the interface help users freely express their individuality while providing the tools to make everyday life more convenient and secure. In any situation, One UI 4 elevates the user’s lifestyle to a new level thanks to its expansive possibilities.

Samsung Newsroom sat down with Samsung’s UX design team to learn more about the user-first design process behind One UI 4.

Simple and Streamlined Style

It’s easier to focus on what matters most when unnecessary items are removed from view. One UI 4’s clear visual hierarchy guides your eye to the most important elements on each page at a single glance.

One UI 4 arranges colors and text so users can understand information intuitively. By simplifying the color system and readjusting the font size and thickness, One UI 4 delivers a clearer and more cohesive visual experience.

The new version of Samsung UI also organizes information into a system of streamlined, updated cards to enable instant understanding of facts and figures. By removing visual distractions and categorizing data into layers, users can now effortlessly navigate through their device to find whatever they need, whenever they need it.

Q: What was the reason for the color system re-organization and which part of the task did you focus on?

The key theme behind this color system re-organization was ‘Clean up’. We carried out the task by applying color to the most important information first and keeping less important information more monotone.

Q: Functional colors with similar meanings have also been unified, specifically red and green.

Red is usually associated with the ideas of Stop, Delete, Remove, Reject, or Decrease. Before One UI 4, the colors of features with a similar purpose were all slightly different. We focused on unifying the theme by using only one shade of red so that users could clearly understand the context of each function. Additionally, we slightly increased the brightness and saturation to enhance visibility while combining all the different reds and greens into their single respective colors.

Q: It seems that the font was tidied up all around through letter spacing and boldface type. Please explain how this was implemented.

We focused on making the presentation of information more prominent than before by adjusting the visual contrast based on the priority of information. We created optimal negative space by altering the dynamics of the font size and thickness according to the content’s importance.

Q: The overall Weather app has been upgraded with a clean, stylish look along with a new weather icon.

What people consider to be important information varies from user to user. For instance, the current weather is important to some people, while changes in the weather throughout the day are more important to others. While this information was previously mixed in the upper main card, One UI 4 now displays ‘current weather’ and ‘today’s weather’ separately. The essential data, current temperature, location and weather icons were revamped with stylish visuals and placed at the top to enhance readability.

Q: How has the Calendar app been reorganized to provide the date and calendar events more easily?

Based on our data, most users create between one and three calendar events a day. With that in mind, we designed a screen that looks seamless, even without any events scheduled for the day. We also allowed users to pay better attention to key information such as the month, day and schedule by replacing the previous gray background with a clear white background. The updated UI features centered text for a stable layout, and we added horizontal lines to create a clear view of information sorted by week.

Q: What kind of efforts were made to effectively communicate data in Samsung Health without looking complicated?

Samsung Health expresses information in three main ways. We used a simple bar chart to describe any range, progress, or status information, such as the number of steps, heart rate, stress, or blood sugar level. We used a symbol to communicate information such as food intake, sleep state or water consumption since cumulative data in this category is more important than progress. Lastly, we included a text-only type that displays a number without a graph when it’s important to know the figure on its own.

Q: Delivering concise and accurate information seems crucial for the newly-introduced Samsung Wallet since it contains important user data.

The Quick Access tab, the first screen of Samsung Wallet, is divided into a stacked view and an expanded view. While in the stacked view, 35% of each overlapping card can show information. With this in mind, the design team made the most of the space by efficiently placing the logo in the upper left corner while displaying the card properties in the upper right. Information with similar characteristics on each card was grouped together for an easy search. By contrast, functions and information with different features, such as usage history and running tasks, have been separated visually.

Safe, Comfortable and Secure Usage

As more time is spent on smart devices, there are more things to keep in mind, such as security and health. One UI 4 values the importance of people using smart devices to stay safe and comfortable anytime, anywhere, without worries or inconvenience. It is natural for users to feel anxious about having their personal information leaked through their smart devices. One UI 4 has been implemented with various features to protect users with high standards for security and privacy.

Every detail was carefully examined to help users conveniently use their smart devices in any setting. Dark mode reduces visual fatigue down to even the smallest detail. Additionally, a consistent visual design has been applied to provide comfortable usability even across multiple devices.

Q: Users can check when the camera or microphone is turned on with an icon. Where did you get this idea?

User interest in privacy and security has increased significantly in recent years. We applied the same newly-added function to the Android 12 OS, keeping the users’ best interests in mind.

Q: The Permission Dashboard shows where and how often the camera, microphone and location data have been used. Can you tell us more?

Malicious apps that access and exploit various sensors and data after gaining access to personal information have recently become a problem. The Permission Dashboard can now check and block apps that request unnecessary permission for personal information, even while the app is inactive.

Q: How did the design details come together for Dark mode?

We tried to find an appropriate level of darkness to enhance visual comfort without compromising each app icon’s aesthetics and striking features. As a result, we decided upon the current darkness level that naturally and uniformly tones down the entire app icon color, prevents glare from white space and satisfies the visual balance between home screen elements.

Q: How do you ensure that various Samsung devices can be smoothly and comfortably used together or individually?

One UI 4 applies a single visual language to various Galaxy products, including smartphones, tablets, smartwatches and PCs. Devices can be used comfortably through unified elements such as icons, rounded corners, components, menu styles, layouts and more, even when changed.

Self Expression, Centered on You

For today’s users, smart devices have become a tool for expressing one’s emotions and individuality. One UI 4 expands the range of choices and customizable features to match every user’s unique lifestyle and tastes.

From personalizing their devices with different wallpapers to using the Color Palette function to change the visual theme of each device, users can reflect their individuality and taste to the fullest.

Customization and self-expression have never been easier or more enjoyable than in One UI 4. Users now can combine two emojis into one or use AR Emoji to reveal their virtual selves. One UI 4 expands the user experience through new options for users to make the device their own, from smartphones to smartwatches. For instance, users can customize their smartwatch to fit their lifestyle through various unique watch faces, or they can stay up to date with updated widgets. No matter how a user experiences One UI 4, there are limitless opportunities to add their personal touch.

Q: How did the wallpaper’s ‘Particle’ concept come about?

We researched different design elements that can be freely expressed on a variety of products. In the process, we discovered the potential and scalability of a material called ‘Particle’.

Taking the Galaxy Z as an example, we were inspired by the art of paper folding when conceptualizing the message we wanted the product to communicate through its foldable structure. We believed this type of art’s versatility, strength, continuity and expandability represented the Galaxy Z Fold’s characteristics. The Galaxy Z Flip was also designed in a similar context, but we differentiated the two by highlighting a more fashionable and unique product image for the latter.

Q: The Color Palette extracts five colors from the wallpaper and changes the visual theme of the device. How was it implemented?

The color palette is a function that integrates Android 12 Material You – Dynamic Color based on One UI. It uses five colors extracted from different wallpapers to support Google and other apps.

While researching color palettes, we collaborated with designers researching the best method to extract color from an image. Together, we discovered an optimal color extraction method that analyzes the original image, divides it into color groups, and then develops a prototype that recognizes the distribution of extracted color.

Q: Why was the decision made to tone down the colors from the original version?

The design was revised to convey the overall mood of the wallpaper for users to focus on and comfortably view the content. In the final version, the background color saturation was lowered, and the buttons were adjusted for colors to stand out without straining the eyes.

Q: The Emoji Pair, which expresses two different emojis in various animations, is a new and entertaining concept.

Emojis expressing complex emotions such as ‘sad-laugh’ and ‘laughing but not laughing’ have never existed before. The need for these complex emotions was confirmed through user interviews. Thus, the Emoji Pair was born.

Q: The concept has been expanded from ambivalence to complex emotions. What was the reason?

When the first concept was ambivalence, we decided that the situation of combining emojis with similar emotions without opposition should also be considered, since forcing the user to create emoji combinations is an impossible task. This is why the concept’s scope has since expanded from ambivalence to providing more complex emotions.

Q: The sophisticated movements of AR Emojis’ witty gestures are very eye-catching. How are these animations made?

Simple movements and expressions have been carefully worked on by animators one at a time using the keyframe method. They also collaborated with famous artists to create high-quality motion graphics, such as professional dance moves.

Q: How do the preferred AR Emoji stickers differ by country or age?

AR Emoji stickers were produced based on voting in four countries: South Korea, Brazil, the United States and the United Kingdom. While there was no significant difference in overall preferences between the countries, there was a slight difference among the age groups. People in their twenties preferred more caricature and exaggerated stickers than those in their thirties. Most users wanted to give off a funny and pleasant impression, rather than being serious when using stickers. For example, ‘I wanted to exaggerate my laughter while laughing and not be too serious when I’m sad.’

Q: Which part of One UI 4 watch face did you focus on?

When the Galaxy Watch 4 was released, we focused on expanding the spectrum of the Expressive face type. We completed a three-dimensional lineup by adding characters of various styles to the watch face, such as a vegetable character for a healthy diet or a bear character for challenges.

Q: What standards or systems do you refer to when designing various watch faces?

The design system was built by referencing the types and designs of Indexes, Hands and Sub Dials of real analog watches to create consistency between the watch faces. The color of the strap and its surroundings was selected as the primary color to blend with the Galaxy Watch strap, and the remaining colors were chosen based on the international color system.

Q: The One UI 4 widget gives off a neat impression overall.

After continuous consultation and effort, changing the widget shape collectively within Android became possible. We applied the One UI visual language to both Samsung and third-party widgets to enhance their appearance.

The widget area is not wide compared to the information provided by the widget. It was designed to provide visual contrast for information to be seen at a glance while focusing more on what needs to be emphasized. By changing the background color to 100% white, we’ve enhanced the minimalist feel and allowed the user to more easily focus their attention on each widget content.

* The images shown are for illustration purposes only and may differ from the actual product. Product specifications may vary by country, region, model and carrier.

Source: Samsung Mobile Blog
—