Chen Zhang Design Portfolio
Monitor Web App Banner 2.png

Monitor Web App

Design a comprehensive and simple solution to provide visibilities of MobileIron deployments to enterprise IT teams


Problem Statement & Product Value 

Any enterprise solutions without a monitoring or reporting features is not a complete enterprise-ready solution. Our competitors are far ahead of us for these two features for a while. 


It’s a long-time pain point for our customers to use our products without any monitoring capabilities. One of the typical complaints from our customers is: 

We recently had our Core crash due to running out of hard drive disk and we had no warning alerts... 



Most of our customers use Splunk as a third-party tool to generate reports for their MobileIron deployments. However, it needs extra configurations and it's expensive.  Also, Splunk cannot provide EMM-specific information, such as MDM certificate expiry date. 

Design for scale

The target customers usually have large-scale complex deployments. The average number of servers we estimated for our target customers is 50 servers (20 Core, 30 Sentry).  Designing a robust UI system which can facilitate all all kinds of enterprise-level monitor data and actions is one of our design challenge. 


Users and Audience

Mobility IT admin/operation

They work with other functions inside the IT team, such as network admin, Active Directory admin etc. 

IT managers, CIO and CFO

High-level executives don’t have time to do hands-on IT daily job, but they care more about the holistic MobileIron ROI. 


Business Strategy & Success Metrics 

The first success business strategy is to retain the existing top 10 strategic customers that complained to us about their crash experience. 

The second monetization strategy is to introduce this new product to our Platinum bundle to help other customers expand and upsell. 

For our initial product launch, we defined a few product success metrics to match with our core product value propositions: 

  • With MI Monitor, strategic customers can proactively monitor the KPI status (Memory, Current CPU, Q Activation etc) for their MobileIron deployment; 
  • With MI Monitor, strategic customers can receive the notifications and share with other IT teams in case of emergency; 
  • With MI Monitor, strategic customers can create a on-demand report; 
  • With MI Monitor, strategic customers can create scheduled report and deliver the report to C-level key decision makers;
  • With MI Monitor, strategic customers can customize their own reports based on their contexts and requirements.   


Overview Dashboard

System Dashboard

Alert Activity

Alert Detail


Product Release Impact

We released the product to the market in December, 2016. (MobileIron official announcement)

More than 70 of the strategic MobileIron customers have proactively showed interest and joined the beta program for this product. By the time we launched this new product, we already had a few reference customers using it with beta program, which is really a fantastic achievement for our team. Here’s a feedback from an IT architect from a customer: 

Once our server team provided the VM space we were able to get the Monitor server up and running very quickly. We’ll look more into the other functions like alert notifications etc. Overall great job — I see this tool being widely used by our Ops team.”

Team & Stakeholders


Product Manager: 1 product manager

Designer: I’m the sole designer for this product.

Engineers: There’re about 8-people engineer team.  

Customer Support and Professional Services team: We worked together to understand customers' pain points and feature requests. 


Design Process

Overall Design Process 


The challenging design process is Dashboard. The design intention is to provide a simple UI for admins to accommodate KPI status for average 50 servers. We decided to break down the Dashboard to 2 levels: Overview Dashboard page and System Dashboard Detail page.  

We did 2 rounds of testing during our design process. I worked with the product manager and customer advocate to do 3 remote online usability testings right after I designed the high-fi visual mockups. Then we did the second round of testing. In MobileFirst conference in June 2016, we also conducted a few on-site testing sessions with with our customers using a work-in-progress dev build.  



Dashboard Design Iterations

Overview Dashboard 

I iterated the visual design from the colorful card border to the neutral color schemes based on the customer feedbacks. The average number of servers to show here is about 50, so search is really important to help admins find a specific server. We also prioritize the Mark As Favorite feature with many sorting features. 


Overview Dashboard V1

Overview Dashboard V4

Overview Dashboard Final


Micro-interaction: Detailed KPI to show in each card

I designed an intermediate state for each server card to expand to show more detailed KPI data, such as Disk Space, Process CPU, Total Memory etc, and to use bar charts/line charts to roughly show its trends. The PM and I both liked this micro-interactions, and we assumed the workflow is to progressively disclose the KPI data to the users. 

However, customers didn't find its usefulness when we showed this concept in our second-round testing. Their rationale is that they don't care a server KPI until there’s any critical problems with that server. Even if there's a critical issue, using abstract data charts to represent the KPI data is quite ambiguous and confusing. 


Visual Style

My overall visual design styles are based on the standard traffic-light color system in the IT products and our MobileIron design styleguide. 


Visual Style V1

Visual Style V3

Visual Style V2

Visual Style V6


System Dashboard

The System Dashboard had a few rounds of design iterations based on my review and discussions with PM and developers. 



Design Iteration: Left-side Navigation

Design Iterations: Overall KPI Top Cards


Retrospective & Lessons Learned 

Getting feedback directly from customers is key

We knew exactly the customers’ pain points and expected features from the support team, and we got valuable UX feedback from them by showing our design iterations. Some customers really love doing this kind of usability testing sessions with us, and we built a good research/testing relationship with a few key customers.


The launch of a product is just the beginning  

We launched this new product with a few 2 reference customers after they used it in the Beta program. Reference customer case study for a brand new enterprise product means a lot. 

The most interesting feedback after our launch is that they requested a mobile experience for MobileIron Monitor, so we took the idea and proposed a native iOS app design concept. You can see my next project for more info. 


How to work with remote teams

Three locations for the multi-discipline teams and three time zones (India, Singapore and Mountain View). It is my first time to handle this kind of challenge as the sole designer in a cross-functional team. 


View more projects