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
 

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

PRODUCT BRANDING

The ThinkSmart Hub 700 needed a brand. Traditionally, this responsibility falls under the branding team, but I decided to deliver one.

 

Below is the product icon I designed for the Hub app.

Columbia_Logo_1.png
Starting_Meeting.gif
Ending_Meeting.gif

The design was created to reflect a group of people coming together for a meeting. The huddling is a play off of the term "huddle room." I used the logo to create two separate loading animations:

Starting Your Meeting

Ending Your Meeting

These screens are important as many background tasks must be executed before the meeting can be properly joined or ended.

CUSTOM WALLPAPER CONTRAST STUDY

I also conducted design studies to ensure that different customer brands would work well within our app. We had a custom wallpaper feature in our Admin Console that allowed users to upload a background to the room UI. When the room was empty, the wallpaper would be used as marketing material. This exercise also helped define the final colors we used for our button states in order to:

  1. Ensure high-contrast for legibility and accessibility requirements

  2. Produce a distinctive hierarchy to highlight the in-focused CTAs

  3. Adhere to strict branding guidelines

2018-10-03-SmartOffice_Columbia-Updates_
2018-10-03-SmartOffice_Columbia-Updates_

Image Description: These are samples of customer wallpapers applied to the design. The first is from GE and the second is from Johnson & Johnson. When the room is not in use, the UI fades away and the wallpaper is left in full transparency as marketing material.

ACCESSIBILITY

It is critical to design for accessibility. Ensuring the app has high-contrast options for visually impaired users is an important part of my design philosophy. I proposed a separate development team work on a high-contrast version of the UI and designed the new offering in parallel.

2018-08-13-SmartOffice_Columbia-Updates_

When selecting colors, fonts, and other patterns, I checked them across various types of color blindness tests, which is an easy way to identify accessibility issues.

2018-02-02-SmartOffice-Columbia-Color_Bl

I ran a series of studies to understand how people with vision impairements would use my design and made adjustments to the colors and assets as needed.

2018-01-31-SmartOffice-Columbia-Prompt_L

I always design with language translations in mind. I use a set of languages for my baseline and adapt the English version as needed. As shown in this image, some translations stretch the design in many cases so ensuring the design adapts to these translations at beginning of the project will save a significant amount of time in the end when your product rolls out globally.

FORMATIVE RESEARCH TESTING

After we had a beta version of the software completed, we wanted to do more user research to see if there were any other UX gaps we had not addressed. In this study, we ran N=30 externally recruited participants with similar participant criteria as previous studies - a blend of online meeting experience (Zoom, Teams, WebEx, Chime, etc.), presents work in at least 3-5 times a week, and communicates with multiple stakeholders across the world.

DSC00113.JPG
DSC00112.JPG
DSC00121.JPG
DSC00110.JPG
DSC00107.JPG

RESULTS

The results from this study gave us confidence to continue developing the solution. Most users were able to perform all the tasks and only had minor issues with the system. We achieved a SUS score of 80 and hit many of our UX metrics. This was another important data point in convincing leadership we were close.

SCOPE CREEP: DIALING

Near the end of Release 1, we were told our original plan for a hardware dialpad device was canceled. Since the product needed to support dialing at launch as part of our MMF, we were left with solving the need with a fully digital experience.

The problem was that we only had TWO buttons to dial numbers and search for people.

As the designer, I was tasked to solve this problem and present solutions to the Executive Leadership Team within a month to keep the project on schedule.

Below are some initial dialing design mockups and prototypes I created.

2018-06-04-SmartOffice-Columbia-Telephon
2018-06-04-SmartOffice-Columbia-Telephon
2018-06-04-SmartOffice-Columbia-Telephon
2018-07-27-SmartOffice_Columbia-Updates_

After a couple of quick hi-fi prototypes and PoCs with real code, we ran several user studies. The results of the studies showed that this design was the clear winner:

2018-08-21-SmartOffice-Columbia-Dialing_
HID_Render.png

The beauty of this design was that it was reflective of the hardware and provided a nostalgic reference to old rotary telephones.

People just got it.

After I received Executive approval, I was off trying to make this design interface work. I carefully crafted the UX architecture and wrote out backend logic for the developers to follow. This included timing, interactions, algorithms, and information hierarchy.

The only gray area was what the SDK could provide in terms of dialing features which we would only know once we started to code it.

Dialing Workflow - Updated.png

I also recommended we add a dialing feature into the companion app, which meant I had to design the new feature and map out the workflows on how the app and room would seamlessly integrate and work together.

This task was incredibly challenging because there were several unknowns.

2018-06-08-Smart_Office-Windows_Client-V
Dialing-android.PNG

SOLVING NON-DESIGN PROBLEMS

Throughout the project, I worked closely with developers to not only help them design the app, but also to help them code it correctly. We added a lot of "smarts" into our solution from meeting management to when the help animation would appear. All these little behaviors required lines and lines of code, which I helped write.

Below is one example where the team asked me to help them with the logic behind our meeting countdown timer across the various use cases.

Timer 1.jpg
Timer 2.jpg

MORE USER RESEARCH!

When you develop a brand new technology, you also create a brand new experience.

Our biggest question was if this new experience was intuitive for users and how adoption would affect the overall experience.

We understood there would be a learning curve to our solution. How steep the curve, we didn't know. Throughout the project, we conducted several usability tests from preference testing, exploration and concept testing to in-depth task analysis utilizing standards like SUS and NASA-TLX. We tried several mixed methods research activities to uncover usability issues and identify UX gaps.

 

For all our all studies, we recruited specialized users such as IT Decision Makers as well as general users with experience across various Unified Communications platforms. We also recruited across other demographics such as location, age, race, gender, education, and even company industry.

20180726_151819.jpg

In this study example, we asked IT Decision Makers to conduct a typical meeting using our solution. They had little to no instructions on how to get started and even tried new ways to run the meeting as they discovered new features along the way.

 

This picture was taken behind a single-sided mirror in our usability lab. The users were given all the devices they typically use in a meeting or brought their own devices to the study.

NEW USER INSIGHTS: LEARNING CURVE

Our hypothesis was correct in identifying a new learning curve. However, the results weren't as steep as we had expected. Once the user learned the controls of the hardware, they were able to navigate the system with ease and because we designed the UX to be "forgiving," mistakes had little to no consequences to the experience, which made users feel comfortable clicking and exploring new features at will.

So how do we lower the learning curve?

Our first thought was to provide printed marketing materials, but we also knew that many users would not read the instructions prior to using the solution. Knowing this, I designed a Quick Start Guide that would be shipped with the device so that companies could place it near or around the device in the room. I wanted to design something unique instead of another heavy-text IT placard.

It worked. It worked very well.

2018-10-04-Quick_Start_Placard-01.png

VIDEO TUTORIALS

Then, we decided to take it a step further and invest in professional tutorial videos. We hired an agency to film 30-second videos for the most common user tasks and use cases. These tutorials were placed into a Help Section in all the applications and also posted online.

 

I volunteered to be in the tutorial videos. What they say is true: videos speak louder than words.

IMG_20181129_132645.jpg

Here are some of the marketing promo videos that were released with the launch. Many were produced and sponsored by Intel.

Smart Office
Lenovo Hub 700 - Battleground 30
00:30
Play Video
Lenovo Hub 700 - Solo Act 30
00:30
Play Video
V1 Basic Hub Controls
00:52
Play Video

FINAL USER TESTING

After integrating the tutorial videos into the app, we ran several more studies that focused strictly on intuitiveness to address the learning curve issue we identified in the usability research study. We ran a very similar stury so we could correlate the test results to see if there were any significant improvements.

Our results significantly improved with the added HELP content. This was reflected in a significant increase in the SUS score (per task and product) as well as the overall NPS.

We had solved one of the last remaining UX issues and were ready for launch!

Introducing

THINKSMART HUB 700

2019-07-19-ThinkSmart_02.png
2019-07-19-ThinkSmart_03.png
Hub700-hero.png