Smart_Office_3.jpg

Lenovo

Lenovo's First Commercial SaaS Offering

2018 - 2019  | Lead Designer

In 2018, when we kicked off the new Smart Office project, it included a Cloud-based Management Console where devices could be claimed, managed, and deployed.

I led the initial concept and in 2018, did a full tear-down and redesign to turn it into what it looks like today. In the process, we established a new Enterprise Design System for our Cloud services.

Business Objective

Create a SaaS Management Console that will claim, manage, and deploy ThinkSmart devices and provide real-time telemetry to IT managers..

Design Objective

Lead the design of the new company initiative including the UX, UI, UR, MVP feature set, and future backlog. Establish a new Enterprise Design System that can scale across new Cloud offerings.

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

BUILD A SOLUTION, NOT A PRODUCT

In 2018, the new Smart Office business set out to create a new platform that would help IT Administrators manage their conference rooms. The vision was to launch a Software-as-a-Service (SaaS) solution that would scale across numerous devices and businesses within Lenovo starting with Smart Office.

ThinkSmart_Manager_1.png

BACKGROUND

The first version of the portal was created from bootstrap libraries so we could understand the product positioning, the feature set, and get customer feedback. We updated this template accordingly, but realized quickly it wouldn't scale and didn't reflect the Lenovo brand. As the product matured, I took ownership of it and had to redesign it from the ground up.

The offering would be the first of many new Cloud-based solutions that would run off of Lenovo's new Cloud Platform. These enterprise solutions are important for IT administrators to track devices, gather telemetry data, and adjust their IT investments based on these insights.

2019-07-19-ThinkSmart_04.png

GETTING STARTED

The current prototype and customer feedback showed that significant improvement was needed before we could launch the project. In the images above, the framework was not scaleable and there were many UX issues such as hidden menus and information and inability to quickly make important changes.

I started with some basic wireframes to explore some general layouts. I referenced many admin console templates and designs and chose this simple grid with a left column navigation.

2019-03-18-Smart_Office_Console_Design_V1_Device List V1 Gray.png
2019-03-18-Smart_Office_Console_Design [Recovered]_Device List V1 Gray.png

QUICK MOCKUPS

After studying the layouts and graphical assets, I did more explorations for other pages of the console to get a sense of consistency and workflow. I added color to get a sense of branding, but my main goal was to see if this new design would stick.

2019-03-18-Smart_Office_Console_Design_V1_Issue List.png
2019-04-05-Smart_Office_Console_Design-03.png
2019-03-18-Smart_Office_Console_Design [Recovered]_Device List V1.png

LAYERED INFORMATION

One of the biggest challenges was to provide enough information at first glance without overwhelming the user. I also had to ensure that information could be acted upon instead of confusing the user with inactionable CTAs and alerts. A firm balance between color and visual hierarchy was needed to achieve the appropriate experience for our users.

After many peer reviews, I applied this framework to more pages and workflows. I also needed to get the Software Development Team's buyin since this new framework would force them to rewrite a lot of the underlying codebase.

2019-03-18-Smart_Office_Console_Design [Recovered]_Issue List copy.png
2019-03-18-Smart_Office_Console_Design [Recovered]_Issue List copy 4.png
2019-03-18-Smart_Office_Console_Design [Recovered]_Issue List copy 3.png

REPORTS EXPLORATION

Another aspect that I thought was missing was more visuals to help convey important information quickly. Since this was an admin console, IT admins were looking for new insights to help them make better and more informed decisions. When I explored ideas for a new Reports section, I made sure to include visual graphs.

2019-03-18-Smart_Office_Console_Design [Recovered]_Device List V2 copy 5.png
2019-03-18-Smart_Office_Console_Design [Recovered]_Device List V2 copy 2.png
2019-03-18-Smart_Office_Console_Design [Recovered]_Device List V2 copy 3.png

PREFERENCE TESTING

After I mocked up a few of the new designs, I wanted to get an idea of what users thought about the usability so I ran a quick N=30 online preference test via UserTesting.com. In this short survey, I provided some basic instructions for users on how to evaluate the designs including a Talk-Aloud task based activity, one section on aesthetics ratings, and one comparing the previous design with this one.

Overall, the results were extremely positive. We gained valuable insights about workflows and what pieces of information was the most meaningful for IT admins. We had enough information to continue with the redesign.

INITIAL WIZARD

One of the first things I tackled was the Initial Wizard that helped new users get started. There is a lot of information that must be collected before users can jump in so the Wizard was important in making a good first impression. It was also one of the first components needed to code so another reason I started with this experience.

I designed two options: one with a horizontal progress bar at the top and one with a vertical progress bar utilizing the left column.

2019-04-16-Smart_Office_Console_Design_V2_2 Wizard 2.png
2019-04-16-Smart_Office_Console_Design_V2_Wizard 3.png

We decided to proceed with the left column vertical progress bar. I felt this was the most consistent design based on the underlying framework.

Here is the following initial Wizard workflow.

Users are asked to fill out required information before proceeding. Once the correct information is inputted, the system would recognize the organization and direct the user into the correct portal with the right level of access. Each user must create their own profile in order to access the organization account.

2019-04-16-Smart_Office_Console_Design_V2_Wizard 1.png
2019-04-16-Smart_Office_Console_Design_V2_Wizard 2.png

I designed specific error states for incorrectly filled fields. I rolled this into the final Design System.

2019-04-16-Smart_Office_Console_Design_V2_Wizard 3 Errors.png

The final couple of screens deal with privacy. This was not a functional request, but a UX driven one. I knew that we would be dealing with user information so I proposed adding this screen to the workflow instead of hiding it in one of the information sections buried in the platform. I felt this was important as an IT Admin user.

2019-04-16-Smart_Office_Console_Design_V2_Wizard 2 Errors.png
2019-04-16-Smart_Office_Console_Design_V2_Wizard 4.png
2019-04-16-Smart_Office_Console_Design_V2_Wizard 5.png

CLAIMING A DEVICE

One of the most important tasks in the console is to "claim" a device or add a device to the account. There are a bunch of background tasks involved where the console and the device communicate to each other - similar to Bluetooth pairing a device. Since security and privacy are at the forefront of this solution, this step ensures that the owner has the right to claim the device and that the device can be claimed by said owner.

One of the ideas I proposed was providing animations to show the progress of claiming (feedback that something is happening). Sometimes this task can take up to a couple of minutes, so having feedback is critical to a good user experience.

WORKFLOWS

While I design this part of the experience, I had to build and update the workflows since there were many complicated parts. If an error occurred, I needed to understand where to put the user or how to inform the user on how to fix the issue. These workflows were used in our daily standup, grooming, and sprint ceremonies to keep us all on the same page.

2019-05-04-Claiming_Prompts_Workflow-01.png

CLAIM PROMPTS

The prompts started easy and got more complex as we supported different types of devices. Since I created the unique animation, I was the only one that could update it to support the new form factors and devices we supported later in the project.

2019-05-07-Smart_Office_Console_Claim_Prompts-01.png
2019-05-07-Smart_Office_Console_Claim_Prompts-02.png
2019-05-07-Smart_Office_Console_Claim_Prompts-04.png
2019-05-07-Smart_Office_Console_Claim_Prompts-07.png
2019-05-07-Smart_Office_Console_Claim_Prompts-03.png
2019-05-07-Smart_Office_Console_Claim_Prompts-08.png
Success_9N.png

Here is the animation you'll see when you successfully claim a device. The image on the left is the ThinkSmart Hub 700. We also support the ThinkSmart Hub 500, ThinkSmart View, and ThinkSmart Core amongst other devices.

Claim-Prompt-Animation_V1.gif

The prompts are placed on the console over a transparency layer. Here are screens showcasing the final placement and design.

Asset 73P.png
Asset 74P.png

DESIGN SPECIFICATION

View my detailed design specification below. It was critical to get the details right so I chose to deliver a pixel-perfect spec over a live-spec (prototype-based).

LISTS

Here are the screens from the Device List (shown in light) and the User List (shown in dark). These lists use the same column-grid structure so that users have familiarity navigating the columns while developers can reuse many of the components. Both received a tad different visual treatment since I had not locked the Style Guide down at this point.

Asset 14MOI.png
Asset 49W.png

REPORTS

The next section I tackled was the Reports. At this point, we only had two options: Device Status Report and Rooms Issue Report. The information on each of the reports were very different so I had to explore what layouts made the most sense for each report. Here are two options for the same report.

Asset 8W.png
Device Status - 14x.png
Device Status - 24x.png

MOCKUPS

Working through mockups, I tried to understand the usability of the layouts and what we could contain from a development standpoint.

2019-05-06-Smart_Office-Console-Reports-Device_Status-05.png
2019-05-06-Smart_Office-Console-Reports-Device_Status-06.png
2019-05-06-Smart_Office-Console-Reports-Device_Status-08.png
2019-05-06-Smart_Office-Console-Reports-Device_Status-10.png

I felt like we were missing a critical filtering system. Most reports have the ability to quickly and easily filter through the data to find something specific and we were asking users to comb through the data fairly manually. I added an option here with a left-hand filtering navigation.

2019-06-14-Smart_Office-Console-Reports-Device_Status_NEW-05.png

This option, broke the sections into separate cards to keep the information clunked together.

2019-06-14-Smart_Office-Console-Reports-Device_Status_NEW-07.png

VISUAL CHARTS

Finally, I wanted to make sure we had visuals in these reports so I provided some concepts on how we could add simple visual charts that would be meaningful to our users.

2019-06-14-Smart_Office-Console-Reports-Device_Status_NEW-10.png

This one proposed the use of algorithms to predict future behavior which was a key insight in one of our early formative user studies.

2019-06-14-Smart_Office-Console-Reports-Device_Status_NEW-08.png
Report revisions_weeks.png
2019-06-14-Smart_Office-Console-Reports-Device_Status_NEW-09.png
2019-06-14-Smart_Office-Console-Reports-Device_Status_NEW-03.png

Charts would be interactive and the data could be adjusted using the filtering system on the left. I also played with the idea of "pinning" one of these charts to the main dashboard for easy access and use.

EXECUTIVE DASHBOARD

The product definition did not call for an Executive Dashboard, but it was persistent in all my user research. In each study and conversation with customers, the need for an Executive Dashboard was at the top of everyone's list. They wanted one place to view all their data so they could grab the necessary information and present it upwards to their leadership without having to dig for it.

 

Also, many executives wanted access to the portal even though they wouldn't necessarily use it. An Executive Dashboard would give them a place to safety view the data without accidentially making unintentional changes.

Here are a few of my Executive Dashboard concepts which were used in the official definition of the products to customers and our internal leadership.

2019-06-20-Smart_Office_Console_REDESIGN_V2_Device List V1 Gray.png
2019-06-20-Smart_Office_Console_REDESIGN_V2_Device List V1.png
2019-06-20-Smart_Office_Console_REDESIGN_V2_Issue List copy.png

I explored various card layout options including the use of customization and personalization. Users would be able to drag and drop components into the grid and they would snap in place. Lists updated dynamically and would show which devices had issues and which users were currently online. This would serve as a one stop shop for IT Administrative Leaders.

OUT OF BOX EXPERIENCE

Less exciting parts of the experience were designing aspects such as the Out-of-Box Experience (OOBE) where special prompts and screens were needed to help users navigate their first time boot sequences. I would typically help create a flow diagram with the engineers and translate it into a UX workflow.

OOBE-2.png
OOBE-3.png
Claim-1.png
Claim-2.png
Claim-4.png
Claim-3.png

These experiences are sometimes difficult to design because they require the cooperation of our strategic partners and often blend the two brands together. In this case, we use part of Microsoft's boot sequence and have to use their design language to create specific prompts since they are loaded on the device.

ENTERPRISE DESIGN SYSTEM

It was time to pull all the designs together to create a unique Lenovo Enterprise Design System specific for our Cloud Services. Since this product offering was so different from other software we had designed, I needed to create it all from scratch.

I used the Design System methodology called Atomic Design to deconstruct the visual design and reconstruct the system in a coherent and meaningful way. This process tears the design into atoms and forces the designer to build the system one layer at a time. This was the first time we would apply this methodology to our work.

The first step was to create the "Atoms," the smallest parts of our Design System. These Atoms would be the building blocks to our interfaces. From there, we would develop Molecules, Organisms, Templates, and Pages.

States.png
Fonts.png
User notifications.png

USER TESTING

After we pulled together the initial Beta release of the software, we tested it across several user studies. These formal user tests were conducted with externally recruited IT Administrators that met a range of participant criteria including experience, size of company, gender, ethnicity, age, location, and dis/ability such as vision impairements. At least 2 participants in each study were red-green color-blind in order to check our designs for accessibility. We used a lot of red and green so we wanted to make sure the solution was still usable by this group of users.

FINAL DESIGN

Here is the final design. We have iterated the design a few times since launch, but the underlying framework hasn't changed. This framework was used for more than 8 different Cloud offerings after the launch of ThinkSmart Manager.

ThinkSmart Manager remains one of our most successful Cloud services.

Smart_Office_1.jpg

MOBILE APPLICATION

In 2021, we launched a Mobile App version of the Console.

Smart_Office_2.jpg

FUTURE CONCEPTS

As with any project, I created many future concepts that explored new technologies, new features and services, and different visuals. Here are a few of those concepts which we often share with our customers to get feedback.

The following explores groupings and foldering, global maps with analytics, more in-room telemetry data specific to online meeting information, and room and cubicle status based on proximity detection.

2019-10-09-Console_Redesign_Mockups_2.jpg
2019-10-09-Console_Redesign_Mockups-9.jpg
2019-10-09-Console_Redesign_Mockups-5.jpg
2019-10-09-Console_Redesign_Mockups-6.jpg

DESIGN EXCELLENCE

This design has won several global design awards and has been recognized as one of Lenovo's best new products. In 2020, several internal teams used the design to explore new service offerings such as the new Accessories Management Portal.

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