top of page
Hub700-hero.png

Lenovo

Leading Lenovo's First Commercial SaaS Offering: ThinkSmart Hub 700

2016 - 2019  |  Lead Designer

As the world's largest PC company, Lenovo launched adjacent solutions for the enterprise space starting with office collaboration devices.

I led the design of our first hardware & software solution including UX, UI, and User Research. It was the first time Lenovo developed a HW+SW solution from 

Business Objective

Lead the launch of Lenovo's next Billion-Dollar business in Smart Office solutions including hardware, software, and services.

Design Objective

Provide design leadership across all products and experiences to get this new business off the ground and achieve revenue milestones.

csm_good-design-award-2019-01_d1b6d0d1d0.jpg
csm_2019_DC_RD_9d88b2617d.png
if_designaward2020_red_l_cmyk.jpg

WHY I CAME TO LENOVO

2016

I joined Lenovo to take on the challenge of turning an idea into a new business opportunity. My responsibility was to lead a new emerging business called Smart Office which focused on dedicated collaboration devices for the workplace. Working closely with the Next UX team, we brainstormed, ran workshops, reviewed competitor products, analyzed market trends, interviewed customers, and finally, designed the solution we knew would transform the collaboration industry.

We started with this question:

What do our customers actually want to do?

MARKET & USER RESEARCH

We visited several customers to listen to their pain-points, view their workspaces and technologies, observe their ways of working, and most importantly, identify their needs.

We can always solve issues, but our goal was to identify the correct ones.

From MK Smart Office Roadmap and Positio

Image Description: This was a photo of one of our customer's conference rooms. It's common to see various technologies, cables, devices, and information placards taking up most of the table.

We compared these learnings with our market research data. We found that companies were looking to improve their conference room experience and invest heavily in it over the next 5-10 years. Meeting room frustrations remained one of the top issues for office productivity and we wanted to find a way to solve it.

We also found that companies were looking to invest in smaller rooms called huddle rooms. These intimate workspaces were more popular than large conference rooms that are rarely fully occupied.

mrd1.PNG
1.jpg

Our focus was to provide the best holistic user experience to our customers. This meant that hardware and software had to seamlessly work together which also meant they had to be designed together.

This was the first time Lenovo would design the hardware and software together from the beginning. Our next step was to figure out how we would actually do it.

My role was to lead the design and strategy from idea to production.

The challenge was that this was new territory for Lenovo and I was literally on my own.

IDEATION

In the beginning, we explored several ideas using all sorts of mediums: white boards, sketching, prints, Post-its, videos, word play, charades - anything that could get ideas flowing and discussions moving.

THE GOAL

During our brainstorm sessions, our main goal was to establish our MMF list for Gen1. There were so many features we could cover, but we knew we had to focus on simplicity and evolve from there.

Here was our criteria:

  • What was critical to the success of this project and how would we measure it?

  • What features could we roll out as Over the Air (OTA) updates instead of squeezing it into Release 1?

  • What would make the rest of the industry nervous if we solved it?

2.jpg

LO-FI PROTOTYPING

From wireframing to mock-ups, I generated hundreds of layouts, grids, and frameworks focused on minimizing user friction and designing for the most common use cases. I knew that if we could predict what users would do most of the time, it would boost their positive experience with the product.

I studied several interaction models and created more than 10 different working prototypes for both internal review and external user studies.

The biggest challenge was designing for a large display that would be several feet in front of the user. It was similar to navigating a streaming service on a family room TV. We would need to design the experience to scale across different formats and form factors.

SO_Proto-A.gif
SO-Proto-B.gif

FORMATIVE USER TESTING

Next, I took my prototypes on a roadshow and ran demos for internal stakeholders, large enterprise customers, and formal user research participants. We gathered feedback on our product definition, MMF feature list, and recorded any specific use cases or environmental constraints we hadn't considered before.

SO-UX Day.jpg

1: FORMAL USER TEST

In April 2017, we ran an in-depth 15 person user research study to get initial feedback on the product, the user experience, workflows, features, and value proposition. It was conducted as a mixed methods, Talk Aloud, task-based study with SUS and NPS.

20170427_120852.jpg
20170426_163551.jpg
20170501_102251.jpg
20170426_092527.jpg
Project Kick-Off

Participants​ were asked to comlete a series of tasks without instruction, using a mouse and keyboard for navigation while viewing the interface from a large display placed at an appropriate distance from them. We tested legibility, workflows, errors, and had participants walk through what steps they expected to perform the tasks.

Participants varied in experience with collaboration tools and online meeting platforms such as Slack, Skype, and WebEx. Most worked in office settings where they were expected to share content remotely at least 3-5 times a week.

We achieved an 88 SUS score in our test, which was one of the highest scores we've ever recorded. We were now ready to pitch our idea to leadership for investment.

PROJECT KICK-OFF

Over the next few months, I demoed the software prototype to several key executive stakeholders across Hardware and Software Development, Strategy, Research, Investment, Operations, and Customer Experience.

 

In September 2017, we received official approval for the project and off we went. A couple of days later, I flew to Yokahama, Japan to formally start the project. Over the next several months, I designed the entire software platform focusing on core design principles and keeping the customer at the center of my design process.

2018-10-03-SmartOffice_Columbia-Updates_

It would be an understatement to say that

designing this software was difficult.

HARDWARE LIMITS SOFTWARE

A simple way to describe the job is that I had to design every feature that Skype and Zoom could do, but I could only use two buttons to do it. This was because we decided on overly simplified hardware controls. The idea was to mimic the iconic interface of the iPod to reduce user confusion and place the user's attention towards the front of the screen during the meeting.

Lenovo ThinkSmart Hub700 mid.jpg
Lenovo ThinkSmart Hub700 HID.jpg

The hardware was designed with the focus of "making meetings simple."

With a powerful i5 Intel processor, an array of mics and sensors, high-quality LEDs, and premium Dolby Voice Audio, the ThinkSmart Hub 700 is one of the most powerful and premium conference room devices in the market.

PROJECT SCOPE

Based on the project definition, we knew we needed a full turnkey solution.

2017-12-14-Columbia_Use_Case-01-04.png

For software, there were four main components:

1. Room User Interface

(application on the hardware)

2. Companion App

(application on Windows client devices such as PCs)

3. Companion App

(application on Android client devices such as mobile phones)

4. Administrative Management Console

(web-based management platform)

I led the strategy, design, and implementation of all these products.

ADMIN CONSOLE

Device deployment, management, and maintenance would be driven by an administrative management console built on a web-based platform. The Portal provided device customization parameters, meeting and device telemetry, and customer account information including billing and licensing.

We agreed to start with Boostrap libraries and a prefab template to meet the aggressive timeline and our MMF Release 1 scope.

2019-02-21-Smart_Office_Award_Images11.p
Admin_Console4.PNG
Admin_Console3.PNG
Admin_Console2.PNG

THINKSMART MANAGER

After Release 1, I was in charge of scaling the detail of this Admin Portal to a new suite of Cloud-based enterprise products under a new Cloud portfolio. Visit my case study on ThinkSmart Manager to see how I redesigned this product, launched a new Enterprise Design System, and helped build Lenovo's Cloud Services.

DETAILED DESIGN WORK

I knew we had to make this product look as elegant and refined as the rest of our Think portfolio so I concentrated my effort on a few screens that would be used the most.

I focused on the following:

1. My preliminary wireframes and prototypes

2. Corporate branding guidelines

3. Market and customer data

4. UX research study results

5. Fundamental UX Design Principles

2017-10-24-SmartOffice_Columbia_Framewor

I spent the very first day doing lots of math.

I used a 4K HD resolution canvas and created my column-grid structure to fit within the pixel constraints. I used a 4 column grid with 2 half columns on each side nestled within equal outer padding. I wanted to ensure that the last CTA was visible enough so users would know content existed beyond the visible interface.

This screen shows the number of connected content and a preview of that content. I also needed to ensure the text was visible from several feet away and the contrast was acceptable by users with vision impairements.

I ran multiple calculations to ensure all the content would fit within the grid and confirmed the app would scale, adapt, and respond correctly across various display resolutions and devices. I tested these with several monitors we had in our lab and in several of the conference rooms on-site.

Next, I designed several frameworks to see if the grid would hold up for all our use cases.

2017-10-25-SmartOffice_Columbia_Calendar

The most important factor to the grid was ensuring proper legibility at various sizes and distances from the display since this interface would be displayed on a large TV in a room.

It was easy to test this by projecting the UI on a room display and letting users read the content at different locations and distances from the TV. I used anthropometric data to define the distance of readability and compared the results to several literature reviews and human factors guidelines and standards.

2017-10-24-SmartOffice_Columbia_Framewor

THINKSMART HUB 700 TEASER

Here is a short video I created of designing the calendar view for ThinkSmart Hub 700.

WIREFRAMES & WORKFLOWS

I sketched out several wireframes to ensure that I incorporated all the features and content correctly then used them across workflow maps and user flows to map out various use cases and user behaviors. I spent months discussing the various use cases in detail and then used that list to serve as our SW feature backlog.

I ran through the use cases many times to test the logic and map decisions, clicks, navigation, and overall ease of use. We referred to these workflows throughout the development process to identify if there were any missing interactions. The workflows were also used by our Quality Team to test the code against my design specifications.

workflow-1.png
workflow-1.png

Using these workflow explorations, I was able to run various permutations to find the path of less resistence, the least amount of clicks, the most intuitive steps, and the most predictive behaviors.

These were important in finding the ideal solution and defending design decisions. They also helped to optimize my designs and compare them with competitor products and solutions.

workflow-1.png

PROOF OF CONCEPTS

I ran endless design studies, workflow explorations, design critiques with both people on and off the team, and numerous formal user studies. But some interactions needed something more to get right. For these complex workflows, we had to build mini proof of concepts (PoCs) to test out the interactions. For example, if something required a timed event that couldn't be simulated through prototypes or if we wanted to test the quality of a specific feature like streaming content from a phone.

I worked closely with a few developers to quickly create and build these PoCs so we could evaluate the design and use them in formal user studies.

V3.PNG

This is an example of an art board that explored various options on selection.

Over the course of the project, I created hundreds of art boards to detail user interactions, workflows, and designs of each screen across several use cases and behaviors.

Design studies focused on not only various display resolutions but also various types of information that might be displayed at any given time during the experience.

 

For example, considerations were made for long names, maximum use cases (max number of devices and users sharing in one meeting), various time formats, legibility, accessibility, and language translations.

Meeting_Header_Study2.PNG
2018-02-12-Smart_Office-Site_Map-01.png

I created a site map outlining the overall UX architecture. These site maps were extremely important in getting everyone on the same page, especially all the developers who worked across the world.

After seeing the site map, stakeholders realized how simple the interface was and found ways to optimize the code based on this UX architecture saving not only time, but computing power.

DESIGN SPECIFICATIONS

The next few months were dedicated to creating detailed design specifications that would outline fonts, colors, behaviors, interactions, assets, and even audio behaviors.

Here is the transformation from prototype to final design.

SO-Proto-4.PNG

Room UI Prototype

SO-Proto-client-3.PNG
SO-Proto-client-1.PNG

Companion App Prototype

2018-10-03-SmartOffice_Columbia-Updates_

Room UI Final

2018-02-20-Smart_Office-Windows_Client-V
2018-02-20-Smart_Office-Windows_Client-V

Companion App Final

STYLE SHEET

One of the most important parts of the project was translating my designs into detailed specifications.

This was one of the most challenging tasks of my career: to create a single document that would be robust enough to handle millions of data points and could be updated frequently as the design changed throughout the development process.

2018-08-20-SmartOffice_Button_States_CLI

The final draft of my Master UX Specification consisted of more than 1800 pages of detailed user behaviors, spacing, features, assets, fonts, colors, interactions, audio, and animations.

I decided to stick with a traditional design specification for this project because of all the stakeholders around the world. Some parts of the spec could have been created using a live prototype, a technique I've used on most of my UX projects, but our software quality team needed to have a physical reference guide to check the various use cases we had to design.

2018-03-12-Smart_Office-Meeeting_Lobby-D

Image Description: Example of the Overlay Menu layer design