Portfolio

Take control of your screen with one tap , uninterrupted gaming experience.

Take control of your screen with one tap , uninterrupted gaming experience.

One-click to control screen for an immersive gaming experience.

One-click to control screen for an immersive gaming experience.

01

Summary

OSD Remote App is a screen control mobile application launched by MSI, to replace physical buttons on the monitor. It enhances gaming fluidity and immersion, providing gamer with a better gaming experience. This app integrates multiple features, repackaging key functions from the original screen control software to ensure quick adjustments during gameplay. It includes game monitoring, game profiles, system settings, joystick control.

The original project was from 2018. Through recent product updates on the official website, I can sense that past design efforts have attracted more users and that the company is now willing to invest more resources in further optimization. Five years later, I also want to challenge my previous design.

To evolve from single-screen to multi-screen support and enhance the overall user experience, the entire design plan revolves around two core principles: design flexibility and experience optimization. I aim to integrate control for multiple monitors within the app, enabling seamless switching between screens. Additionally, through customizable settings and refined UI visuals, I hope to enhance both the overall feel and practical efficiency.

Duration

Jun 2017 - Jan 2018

My Role

UI Designer

Responsibility

UI Design

Visual Design

Remark

Part of the content and UI were updated in 2023

Objective

Based on the 2019 OSD Remote App goal—allowing gamers to adjust monitor settings anytime for the best gaming experience—this update refines the app’s UI and user experience based on the 2023 MSI Gaming Intelligence design style.

Role & Deliverables

In this project, I collaborated with the design lead to define the product direction, consolidating the existing OSD PC Control App into Mobile. After designing the new experience, we worked with the product team’s engineers to evaluate technical feasibility and delivery. (The project was redesigned in 2023 while maintaining its overall structure.)

Challenges

As a tool for gaming products, we needed to explore market trends and key applications for gamers. However, since gaming trends evolve yearly, the design must incorporate long-term adaptability and a flexible style to continuously enhance the user’s in-game experience.

Outcome & impact

We completed the new design and development within two months and gained 50,000+ users within six months. By 2023, the user base exceeded 100,000. Although we couldn’t evaluate the impact of the new design in 2023, we received significant recognition from long-term users, reaffirming the value of our improvements.

02

Product Architecture

The 2019 design structured the second level of IA into 'Adjustments,' 'Modes,' and 'Settings,' whereas the new IA is simplified into just 'Home' and 'Settings.' This new structure offers three key advantages:

•Users with multiple screens can switch between devices more smoothly.

•Users can focus and adjust device details quickly.

•The 2019 design was mainly for functionality testing. The 2023 design was adjusted based on usage frequency analysis, using data-

driven insights to reduce overall steps and minimize rework.

The 2019 design structured the second level of IA into 'Adjustments,' 'Modes,' and 'Settings,' whereas the new IA is simplified into just 'Home' and 'Settings.' This new structure offers three key advantages:

•Users with multiple screens can switch between devices more smoothly.

•Users can focus and adjust device details quickly.

•The 2019 design was mainly for functionality testing. The 2023 design was adjusted based on usage frequency analysis, using data-driven insights to reduce overall steps and minimize rework.

The 2019 design structured the second level of IA into 'Adjustments,' 'Modes,' and 'Settings,' whereas the new IA is simplified into just 'Home' and 'Settings.' This new structure offers three key advantages:

•Users with multiple screens can switch between devices more smoothly.

•Users can focus and adjust device details quickly.

•The 2019 design was mainly for functionality testing. The 2023 design was adjusted based on usage frequency analysis, using data-driven insights to reduce overall steps and minimize rework.

03

Project Planning

04

Project Overview

05

Persona

Gamers

Who play games on computers

During gaming, users are less sensitive to changes in the screen and focus more on the game itself. Therefore, they usually make adjustments once and don't frequently tweak settings during gameplay.

Professional Gamers

Make esports their profession

For users with high accuracy requirements for their screens, especially during gameplay, they tend to prefer intuitive and quick real-time adjustments. Stability is the highest priority, regardless of the settings being made.

Tech Enthusiasts

Passionate about experiencing new tech gadgets

Actively exploring the features of new products and diving into each one. Even if some features are not frequently used, they always try them out myself, take notes, and share my findings.

User pain points and demands

Unintuitive operation

Inaccurate settings

Response delay

Poor stability

Cumbersome operation

Lack of innovation

Insufficient information

06

Explore Design Styles

We believe that by providing an intuitive and streamlined UI while ensuring real-time interacte, and also reduce the user's learning curve, enhance operational fluidity, and enable users to make screen adjustments instinctively during gameplay, achieving the optimal gaming experience.

07

Color Guidelines

08

Typography Guidelines

09

Logo Design

10

Wireframe

11

UI Component

Most of the components in the OSD Remote App are derived from the PC version of the control software, forming a unified set of standardized components. This serves as a foundation for reuse and modification across other related products. For MSI, this requires a thorough evaluation process. In the past, our focus was primarily on PC products, with limited applications for mobile devices. However, with the increasing popularity of mobile devices and the diversification of gaming experiences, integrating the component library will be a long-term cost-reduction tool. It enables designers to efficiently utilize standardized elements while ensuring consistent updates and a seamless user experience.

12

Design Deliverables

Why Redesign?

Challenge New Skills, Establish a New Style

On one hand, it’s about reflecting on past work—learning from years of hands-on experience and striving to enhance the quality of the original design. On the other hand, previous designs were limited by technical constraints, allowing users to connect only a single screen and adjust basic parameters to optimize their gaming experience. However, as player demands evolve, we now need to address multi-screen requirements, diverse gaming experiences, and different operational goals—leading to the need for a new design.

Connect with devices

A single phone to connect to multiple devices

When users have multiple screens in their environment or identical screens in the same area, they can use a PIN code to pair their phone with the screen. Once recorded on the phone, the system will automatically match the devices.

Multiple screens

Starting with gamers

As the information industry evolves, many users are no longer satisfied with a single-screen experience. During the 2023 redesign, we evaluated this shift—limiting connectivity to a single screen restricted market potential and failed to meet the needs of modern users (e.g., financial analysts). We returned to the app’s original purpose: to help users enhance efficiency, improve experiences, and expand multitasking capabilities.

Multiple screens

Starting with gamers

As the information industry evolves, many users are no longer satisfied with a single-screen experience. During the 2023 redesign, we evaluated this shift—limiting connectivity to a single screen restricted market potential and failed to meet the needs of modern users (e.g., financial analysts). We returned to the app’s original purpose: to help users enhance efficiency, improve experiences, and expand multitasking capabilities.

Multiple screens

Starting with gamers

As the information industry evolves, many users are no longer satisfied with a single-screen experience. During the 2023 redesign, we evaluated this shift—limiting connectivity to a single screen restricted market potential and failed to meet the needs of modern users (e.g., financial analysts). We returned to the app’s original purpose: to help users enhance efficiency, improve experiences, and expand multitasking capabilities.

Real-time status adjustment

Immersive adjustment

OSD Remote App users often require quick and precise parameter adjustments during use, which is especially crucial for professional gamers. To enhance usability, we replaced dropdown with switches and increased button sizes for better accessibility. This allows users to develop intuitive control after just a few interactions.

Real-time status adjustment

Immersive adjustment

OSD Remote App users often require quick and precise parameter adjustments during use, which is especially crucial for professional gamers. To enhance usability, we replaced dropdown with switches and increased button sizes for better accessibility. This allows users to develop intuitive control after just a few interactions.

Real-time status adjustment

Immersive adjustment

OSD Remote App users often require quick and precise parameter adjustments during use, which is especially crucial for professional gamers. To enhance usability, we replaced dropdown with switches and increased button sizes for better accessibility. This allows users to develop intuitive control after just a few interactions.

Switching between different modes

Prototype + Competitor analysis

Apart from the original gaming users, we introduced additional modes for users to choose from. In the initial 0-1 phase, we established preset parameters through two approaches: first, by creating a simple MVP for user testing; second, by analyzing competitor settings and user feedback to identify widely accepted market standards, which served as the foundation for our initial configurations.

Switching between different modes

Prototype + Competitor analysis

Apart from the original gaming users, we introduced additional modes for users to choose from. In the initial 0-1 phase, we established preset parameters through two approaches: first, by creating a simple MVP for user testing; second, by analyzing competitor settings and user feedback to identify widely accepted market standards, which served as the foundation for our initial configurations.

Switching between different modes

Prototype + Competitor analysis

Apart from the original gaming users, we introduced additional modes for users to choose from. In the initial 0-1 phase, we established preset parameters through two approaches: first, by creating a simple MVP for user testing; second, by analyzing competitor settings and user feedback to identify widely accepted market standards, which served as the foundation for our initial configurations.

Multi-Screen and Multi-View

Reducing Switching

The 2018 design already featured multi-view functionality, indicating that users have a need for multiple display views on their monitors. Therefore, in the redesign, I not only considered multi-view requirements but also addressed the need for multi-view when connecting multiple monitors and computers. A commonly used approach for this is PbP (Picture-by-Picture) or PiP (Picture-in-Picture).

•PbP：Allows multiple input sources to be displayed side by side on the same screen, treating them as separate windows.

•PiP：Overlays a smaller secondary window on top of the main display, enabling users to monitor another source while focusing on the primary content.

Multi-Screen and Multi-View

Reducing Switching

The 2018 design already featured multi-view functionality, indicating that users have a need for multiple display views on their monitors. Therefore, in the redesign, I not only considered multi-view requirements but also addressed the need for multi-view when connecting multiple monitors and computers. A commonly used approach for this is PbP (Picture-by-Picture) or PiP (Picture-in-Picture).

•PbP：Allows multiple input sources to be displayed side by side on the same screen, treating them as separate windows.

•PiP：Overlays a smaller secondary window on top of the main display, enabling users to monitor another source while focusing on the primary content.

Multi-Screen and Multi-View

Reducing Switching

The 2018 design already featured multi-view functionality, indicating that users have a need for multiple display views on their monitors. Therefore, in the redesign, I not only considered multi-view requirements but also addressed the need for multi-view when connecting multiple monitors and computers. A commonly used approach for this is PbP (Picture-by-Picture) or PiP (Picture-in-Picture).

•PbP：Allows multiple input sources to be displayed side by side on the same screen, treating them as separate windows.

•PiP：Overlays a smaller secondary window on top of the main display, enabling users to monitor another source while focusing on the primary content.

Custom function for PUBG

Deep Dive into the Game to Gain Player Support

According to a 360.cn research report, since 2014, the growth rate of per capita sales revenue for mobile games has been declining, while PC games have maintained a high growth rate, which continues to accelerate. Among them, PUBG, which supports both mobile and PC platforms, saw a rapid increase in search volume in 2016, indicating immense potential. By October 2017, major players like Tencent had also entered the market.

Based on this trend, we believed that launching additional features tailored for PUBG as part of our marketing strategy could attract more players and generate greater interest in our product.

13

Effectiveness Analysis

100,000

+

Downloads: Over 50,000 in One Year, 100,000+ in Three Years

The 2018 design surpassed 100,000 downloads in just three years, indicating that over 100,000 users purchased a single monitor model and were willing to download the app for operation. However, at that time, the app only supported a single monitor model, which might have contributed to the stagnation in downloads and product updates after three years.

In 2023, I redesigned the app with the goal of integrating MSI's monitor lineup and enhancing app compatibility, creating greater flexibility and new business opportunities.

14

Reflection and Learning

2018, we drove peripheral technologies and services based on market trends.

2023, I drove business opportunities through design flexibility.

As a brand centered around the esports market, MSI successfully integrated the mainstream game 'PUBG' into its marketing goals, aligning product positioning with the game’s needs. Against the backdrop of the game's rapid growth, the company's esports monitor sales also performed well, significantly enhancing the gaming experience for players.

However, back in 2018, I was still a Junior Designer, responsible for conducting player interviews alongside researchers. Despite being involved in user research, I was often in a passive execution role during the design process. The product's UI style and functional direction mainly followed the approach of 'just make it the same as the PC version,' lacking a deep analysis of mobile device characteristics. While this strategy simplified the design process, it failed to address cross-device operational differences and user pain points, leading to overlooked potential risks.

Reflecting on the regrets from that design, I chose to redesign the app and re-evaluate the issues. For example, why was only one of the company’s many products able to connect with mobile devices? Was this design focusing the user experience or creating unnecessary distractions? Did the brand style meet the needs of diverse users? To address these questions, I conducted desktop research, returned to the user perspective, and re-downloaded the game to analyze player feedback, uncovering new areas for improvement."

During the redesign, I deeply realized that design is inevitably accompanied by risks, and the pursuit of 'perfection' or 'zero risk' is unrealistic. Therefore, I focused on improving the usability and flexibility of the design, optimizing clicks and processes, while also considering future devices and user scenarios. This not only created value for users but also enhanced business opportunities. This challenge required balancing design, business, and user experience, and taught me the importance of evaluating resources and risks, which made me realize that design is no longer limited to 'aesthetics' or 'what I want to do.'

Finally, this product has not been updated on Google Play for a while, which may be related to adjustments in the company’s strategy. For me, seeing the project I contributed to, from 0 to 1, stagnate is undeniably regretful. However, this experience was incredibly meaningful for my early design career—it not only expanded my design thinking but also taught me how to find balance in team collaboration. This journey was undoubtedly a valuable learning and reflective experience.

14

Reflection and Learning

2018 年我們以市場趨勢帶動周邊技術與服務，

2023 年我以設計彈性驅動商業機會

As a brand centered around the esports market, MSI successfully integrated the mainstream game 'PUBG' into its marketing goals, aligning product positioning with the game’s needs. Against the backdrop of the game's rapid growth, the company's esports monitor sales also performed well, significantly enhancing the gaming experience for players.

However, back in 2018, I was still a Junior Designer, responsible for conducting player interviews alongside researchers. Despite being involved in user research, I was often in a passive execution role during the design process. The product's UI style and functional direction mainly followed the approach of 'just make it the same as the PC version,' lacking a deep analysis of mobile device characteristics. While this strategy simplified the design process, it failed to address cross-device operational differences and user pain points, leading to overlooked potential risks.

Reflecting on the regrets from that design, I chose to redesign the app and re-evaluate the issues. For example, why was only one of the company’s many products able to connect with mobile devices? Was this design focusing the user experience or creating unnecessary distractions? Did the brand style meet the needs of diverse users? To address these questions, I conducted desktop research, returned to the user perspective, and re-downloaded the game to analyze player feedback, uncovering new areas for improvement."

During the redesign, I deeply realized that design is inevitably accompanied by risks, and the pursuit of 'perfection' or 'zero risk' is unrealistic. Therefore, I focused on improving the usability and flexibility of the design, optimizing clicks and processes, while also considering future devices and user scenarios. This not only created value for users but also enhanced business opportunities. This challenge required balancing design, business, and user experience, and taught me the importance of evaluating resources and risks, which made me realize that design is no longer limited to 'aesthetics' or 'what I want to do.'

Finally, this product has not been updated on Google Play for a while, which may be related to adjustments in the company’s strategy. For me, seeing the project I contributed to, from 0 to 1, stagnate is undeniably regretful. However, this experience was incredibly meaningful for my early design career—it not only expanded my design thinking but also taught me how to find balance in team collaboration. This journey was undoubtedly a valuable learning and reflective experience.

14

Reflection and Learning

2018, we drove peripheral technologies and services based on market trends.

2023, I drove business opportunities through design flexibility.

As a brand centered around the esports market, MSI successfully integrated the mainstream game 'PUBG' into its marketing goals, aligning product positioning with the game’s needs. Against the backdrop of the game's rapid growth, the company's esports monitor sales also performed well, significantly enhancing the gaming experience for players.

However, back in 2018, I was still a Junior Designer, responsible for conducting player interviews alongside researchers. Despite being involved in user research, I was often in a passive execution role during the design process. The product's UI style and functional direction mainly followed the approach of 'just make it the same as the PC version,' lacking a deep analysis of mobile device characteristics. While this strategy simplified the design process, it failed to address cross-device operational differences and user pain points, leading to overlooked potential risks.

Reflecting on the regrets from that design, I chose to redesign the app and re-evaluate the issues. For example, why was only one of the company’s many products able to connect with mobile devices? Was this design focusing the user experience or creating unnecessary distractions? Did the brand style meet the needs of diverse users? To address these questions, I conducted desktop research, returned to the user perspective, and re-downloaded the game to analyze player feedback, uncovering new areas for improvement."

During the redesign, I deeply realized that design is inevitably accompanied by risks, and the pursuit of 'perfection' or 'zero risk' is unrealistic. Therefore, I focused on improving the usability and flexibility of the design, optimizing clicks and processes, while also considering future devices and user scenarios. This not only created value for users but also enhanced business opportunities. This challenge required balancing design, business, and user experience, and taught me the importance of evaluating resources and risks, which made me realize that design is no longer limited to 'aesthetics' or 'what I want to do.'

Finally, this product has not been updated on Google Play for a while, which may be related to adjustments in the company’s strategy. For me, seeing the project I contributed to, from 0 to 1, stagnate is undeniably regretful. However, this experience was incredibly meaningful for my early design career—it not only expanded my design thinking but also taught me how to find balance in team collaboration. This journey was undoubtedly a valuable learning and reflective experience.

Copyright © 2024 Dukelee

Copyright © 2024 Dukelee

Copyright © 2024 Dukelee

Copyright © 2024 Dukelee