WCD from Sharp

UI/UX DESIGN | PRODUCT MANAGEMENT 

ABOUT PRODUCT

Windows Collaboration Display (WCD) from Sharp is a new type of interactive display for meetings and teamwork. It is the next generation 4K 70” interactive display that enables better space utilisation and more productive collaboration in meetings, boardrooms and almost anywhere else. Complying with Microsoft specifications, this WCD combines Sharp’s award-winning touch technology with IoT sensors that monitor conditions like temperature and air quality.

Built with IoT sensors, this Windows Collaboration Display can work with Microsoft Azure Digital Twins to monitor and optimise your smart meeting room environments and collaboration spaces. 

THE CHALLENGE

This product required our team to collaborate with different stakeholders. Our tasks were to research and identify the solutions to create a great user experience along with providing elegant user interfaces that are scalable and easy to manage. 

MY WORK

At the very first stage, we were a small team of fewer than ten people, but in charge of entire product development. With limited resources, we all had to play multiple roles before we the company hired more people, which then allowed us to focus on our areas of expertise. In these early days of the project, I’ve got involved in almost every step in the process from end to end, mainly with testing and improving user experiences by conducting research about users, their journeys, information architecture, etc… and providing the complete interfaces design including design system, prototype, animations, and so on.

DESIGN ROLE

UX Research, Information Architecture, Visual Design, Prototyping, Testing.

DESIGN DELIVERIBLES

User Testing, Personas, Competitive Analysis, User Stories & Flows, Mid-fidelity Wireframes, Visual Design, High-fidelity Prototype.

TOOLS & SOFTWARES

Pen and Paper, Sketch, Abstract, Adobe Suite, Zeplin, Invision, After Effect.

THE PROCESS

01. STUDY

Users Research, User Interview, Competitor Research, Technology Learning, Users Experiences.

02. ANALYSIS

User personas, User Stories, Hypotheses and Assumptions, Define Direction. 

03. CONCEPT

Wireframes, Users Flow, Protopype, Testing, Redefine Idea.

04. OUTPUT

Complete User Experiences and User Interfaces.

STUDY & ANALYSIS

COMPETITOR ANALYSIS

First of all, we did some research about products that are similar to our WCDs: have large touch screens, used for smart meetings, etc. Unfortunately, there were not many in the market at the time. We found some potential ones, but most of them either had not been launched yet or had different use cases. Because of limited references, we had to make our own assumptions then test them.

WHO ARE THE USERS?

Our external partners had a hypothesis on user personas, which we took as references and also did some user interviews on our end to come up with our own user personas and stories. Further down the process, I kept referring back to these personas as a guideline for design decisions and priorities making sure design always addressed the users' needs and expectations. Below are two examples of the personas.

​USER STORIES

THE CONCEPTS

I was thinking it’s pretty similar to a TV in terms of screen size. Hence, I explored many articles and design guidelines for TV. 

The goal was to have some directions that can be displayed on the devices for users to interact with, so we can learn from their gestures and behavior. With this in mind, I came up with these initial concepts.

PROBLEMS

From our observation of users interactions and follow-up interviews, we realized some problems as below:

- Users were not able to see the whole screen when standing too close to the screen, given its large size.

- The screen was blocked when users stood in front of the device to play with the touch screen.

- Users had to walk around to interact with the devices.

SOLUTIONS

After considering pros and cons of a few different approaches to the above issues, we came up with these solutions:

- Create a safe zone to design where the users are able to interact easily.

- Create an action bar on one side of the screen, mostly all of the actions are started from it. 

- Give the action bar the flexibility to be switched between both sides of the screen.

DESIGN PROCESS 

Choosing the right user experience directions is an important move for us. From here, I collaborated with another designer to implement and improve user interfaces.

​I was responsible for developing a design process given three challenges. First, the process has to be clear to let the team get familiar easily. Second, it should allow our internal team to manage and collaborate efficiently. And on top of that, the design flow must enable quick feedback from and easy hand-off to the engineering team.

Here is the final design process we developed. Basically, we used Sketch App for designing, Abstract for management, storage, feedback, and Zeplin for the engineering team to get assets and previews.

DESIGN SYSTEM 

We used the atomic design methodology to create a design system. It’s a solution to manage your design systems by creating reusable assets, components from very small to big, atoms (label, icons,...) to molecules (small components) to organisms (medium or big components). This methodology gave us an easy to manage and flexible design structure. When we wanted to change the components, it automatically applied the changes to all of the applicable design. On top of that, this methodology allowed the engineering team to scale and implement our designs with ease.

OUTPUT

WCD DESIGNS V1

We received great feedback from our partners about the user interface, however, our team wasn’t fully satisfied with the visuals. We thought the design could be improved. Thanks to the flexible design system that we created in V1, we were able to redesign in V2 without having to start from scratch. 

WCD DESIGNS V2

Home screen instructions

WCD is always ready for wireless casting connection.

The instruction screen is to help users get the necessary information.

Idle Screen

The device switches to the idle screen after not being used for a while, tapping on the screen takes the user from idle to the home screen.

Quick Settings

Clicking the setting button will bring up the setting panel. From here, users can make setup or configuration choices.

OOBE (Out-of-box experience)

Settings for the first use product. 

System Settings

System settings contain Accessibility, Date/Time, Screen idle/sleep time.

The sensor app 

The sensors feedback data to internet cloud-based services so it helps IT administrators and builds managers monitor a wide range of options, including meeting occupancy, air quality levels, temperature, and even humidity. This spatial intelligence offers the chance for better heating, cooling, and meeting room booking systems which together create a more comfortable meeting room environment.

AND 300+ OTHER SCREENS

THE PRODUCT IS

RECOGNIZED BY

EXPERTS 

The WCD product has been showcased at some prestigious technology exhibitions such as ISE, Infocomm, Computex, Ignite. The feedback was positive and the product received important awards, such as:

 

2019 Top New Technology (TNT) Award for displays - CE Pro and Commercial Integrator magazines.

 

Best New Collaboration Board in the 2019 Best of ISE Awards - rAVe publications.

THANKS FOR SCROLLING!

Made with a lot of coffee and music.