myViewBoard 3.0: A Smarter Canvas

I’m currently designing the experience for myViewBoard 3.0 at ViewSonic, a major evolution of our digital whiteboarding ecosystem. Most recently, we introduced a new version improves tool discoverability and accessibility across teaching scenarios.

I led the design of new interaction models, enabling a more intuitive, inclusive, and engaging classroom experience.

My role:

UI/ UX Designer

Timeline

March 2023 - Present

Platforms:

Windows, iPadOS, Android

Challenges

myViewBoard 2.0 has established a stable user base in education. To address diverse teaching needs and market competition, we have to systematically upgrade the user experience while maintaining familiar operations and introducing more intuitive, efficient, and inclusive interactions.

⚡️ The problems

Unclear information structure and high learning threshold: The old version lacked logic in the arrangement of tools and categorization of functions.

Outdated interface and heavy visual burden: Failure to introduce a design system and modern visual language.

Lack of usability and accessibility considerations: no hints or feedback on functions, resulting in operations relying on guesswork.

Solutions

Our main challenge is to lower the learning curve for both new users and old users and design a new look and feel for our education scenarios. We have to make sure our service is accessible and stable in the classroom. To tackle this, I started from scratch and designed the new canvas layout through a set of toolbar modules, like the main toolbar, floating toolbar, and annotation toolbars.

We audit and restructure the V2 information architecture, leveraging Power BI to analyze data and feature usage frequency, which guided the optimization of these core areas including toolbars and menus:

Our primary challenge was to lower the learning curve for both new and returning users while redefining the visual language for education scenarios. At the same time, we needed to ensure the service remained accessible, stable, and reliable in classroom environments. To address this, I reimagined the core canvas experience from the ground up — designing a new modular toolbar system that includes the main toolbar, floating toolbar, and annotation toolbars, enabling a more intuitive, adaptable, and seamless teaching workflow.

01 Toolbar modules

Lagacy Design

The legacy tool arrangement lacks logical grouping and contextual flow, making it difficult to anticipate where functions will be located.

Lagacy Design

The legacy tool arrangement lacks logical grouping and contextual flow, making it difficult to anticipate where functions will be located.

Lagacy Design

The legacy tool arrangement lacks logical grouping and contextual flow, making it difficult to anticipate where functions will be located.

Lagacy Design

The legacy tool arrangement lacks logical grouping and contextual flow, making it difficult to anticipate where functions will be located.

New Design

Clearly categorize tools by real usage logic and adjust their availability through Power BI, ensuring users can quickly locate and apply functions.

New Design

Clearly categorize tools by real usage logic and adjust their availability through Power BI, ensuring users can quickly locate and apply functions.

New Design

Clearly categorize tools by real usage logic and adjust their availability through Power BI, ensuring users can quickly locate and apply functions.

New Design

Clearly categorize tools by real usage logic and adjust their availability through Power BI, ensuring users can quickly locate and apply functions.

02 File manager, Magic box

Lagacy Design

File manager and Magic box are core functions, yet unclear icons, lack of labels, and missing status feedback have made them the barrier for users.

Lagacy Design

File manager and Magic box are core functions, yet unclear icons, lack of labels, and missing status feedback have made them the barrier for users.

Lagacy Design

File manager and Magic box are core functions, yet unclear icons, lack of labels, and missing status feedback have made them the barrier for users.

Lagacy Design

File manager and Magic box are core functions, yet unclear icons, lack of labels, and missing status feedback have made them the barrier for users.

New Design

Restructure File manager into a side-menu interface, with contextual text and status visuals to improve operational clarity and user confidence.

New Design

Restructure File manager into a side-menu interface, with contextual text and status visuals to improve operational clarity and user confidence.

New Design

Restructure File manager into a side-menu interface, with contextual text and status visuals to improve operational clarity and user confidence.

New Design

Restructure File manager into a side-menu interface, with contextual text and status visuals to improve operational clarity and user confidence.

New Design

Introduce themed sections (e.g., Multimedia, Stationery, Classroom Interaction), supported by explanatory text to guide new users while enabling experienced users to navigate quickly.

New Design

Introduce themed sections (e.g., Multimedia, Stationery, Classroom Interaction), supported by explanatory text to guide new users while enabling experienced users to navigate quickly.

New Design

Introduce Magic box themed sections, supported by explanatory text to guide new users while enabling experienced users to navigate quickly.

03 Theme and Design system

The image of the Figma variable settings

The foundation of the design system is a component-based token library, assigning specific variables to each UI element. This approach enables precise control and maximizes flexibility across components.

Use Figma variables to switch between light theme and dark theme.

Before

Icons designed for myViewBoard 3.0 that bring K–12 energy. Cute, vibrant, and fun to explore.

Before

Icons designed for myViewBoard 3.0 that bring K–12 energy. Cute, vibrant, and fun to explore.

Before

Icons designed for myViewBoard 3.0 that bring K–12 energy. Cute, vibrant, and fun to explore.

Before

Icons designed for myViewBoard 3.0 that bring K–12 energy. Cute, vibrant, and fun to explore.

After

Design 100+ unique icons for ViewSonic Design System.

After

Design 100+ unique icons for ViewSonic Design System.

After

Design 100+ unique icons for ViewSonic Design System.

After

Design 100+ unique icons for ViewSonic Design System.

04 In-App tutorials

Designed in-app animation tutorials for first-time users to highlight key features, along with a quick update for returning users.

Long-press to use shortcut

Adding new tabs

Browsing Magic box

Outcomes

Pre-launch testing confirmed that myViewBoard 3.0 delivers excellent usability and a highly positive reception from educators, demonstrating strong user confidence and readiness before launch.

SUS (System Usability Scale) Score:

87.5%

Post-launch usage data shows a strong behavioral shift toward myViewBoard 3.0, with iOS usage increasing and Android transition rate within three months — clear evidence of improved user engagement and rapid adoption momentum.

Transition rate within 3 months:

(Android version)

62.8%

Daily usage trend:
(iOS version)

myViewBoard 3.0: A Smarter Canvas

Challenges

⚡️ The problems

Solutions

01

Toolbar modules

02

File manager, Magic box

03

Theme and Design system

04

In-App tutorials

Outcomes

87.5%

87.5%

87.5%

62.8%

62.8%

62.8%

+542%

+542%

+542%

Other projects

Designing AI-Powered Insights Dashboards

Designing AI-Powered Insights Dashboards

Designing AI-Powered Insights Dashboards

Designing AI-Powered Insights Dashboards

WCAG Audits for myViewBoard 3.0

WCAG Audits for myViewBoard 3.0

WCAG Audits for myViewBoard 3.0

WCAG Audits for myViewBoard 3.0