In mid-2014, the app management feature was introduced to MobileIron Core web console for the first time. After customers used it for about 1 year, we received quite a lot of feedback that the V1 web solution could not meet the complex and growing enterprise app management needs.
In order to better understand the customers' concern, I worked with a User Research to conduct three 1:1 remote user interview sessions with IT mobility admins (from BlackRock, McKinsey and Intel). Some typical questions we asked are as followings:
How many apps do you have currently in the app catalog?
What’re the top UX pain points with app management UI in MI CORE?
Walk us through the workflow to add a new app to your app catalog.
What other app management solutions did you use before? How do you think of the UX with those products?
After the user research sessions, we had a solid understanding what went wrong with the current App Catalog UI.
1. DIFFICULT TO FIND AN EXISTING APP
Most of the customers using app management are our named enterprise customers, which are typically with more than 1000+ employees. Based on our App Stats Gateway analytics data, the average number of customers apps in app catalog is around 120, and the customer with the most number of apps is McKinsey, which has around 800.
With such a huge number of apps to show in the UI, we only provided limited filter and search options. Also, admins complained the information overloading issue with the current app list view by showing some unimportant app data and missing the right app data.
2. CONFUSED WITH TWO WAYS OF ADDING NEW APPS
Admins do not get the difference between "Add App" and "Store Import", and two of the 3 admins we interviewed even don't use "Store Import" workflow to add apps.
4. ENHANCE THE CURATED RECOMMENDED APP UI IN THE ADD APP CATALOG
This business request is not from the user research session, but from our internal marketing and eco-system teams. Previously there was just a big white empty space for the landing page of add app wizards, but it's the right place to promote our own apps or partner apps to our customers.
3. MISS THE LAST STEP IN THE COMPLETE WORKFLOW OF ADDING A NEW APP
In the current add app wizards, there's not a step for app distribution, so admins have to manually search that specific app again to apply labels to that new app.
Users and Audience
IT Mobility Admin/Operation: For large enterprise companies, there’re usually a few dedicated IT admins focusing on mobile, such as MobileIron admin. They work with other functions inside the IT team, such as network admin, Active Directory admin etc.
Team & Stakeholders
1 Product Manager
2 Designers: I worked with another designer from Cloud team to design the consistent user experience for app management feature across Core and Cloud.
Engineers: 3 UI developers working on this redesign.
1 User Research
Solution & Design Process
Our first step was to do a UI analysis on some other similar consumer app stores(Google Play, Amazon App Store, iTunes, Google Developer Console) and large-scale web apps(Google Drive, JIRA, LinkedIn, Apple.com, Zillow). A few highlights we identified include:
– App icon grid view with are quite popular for better scan-ability
– Advanced filter pattern
– Right-side detail quick-view pattern
With the solid research findings and competitive analysis, I started my redesign with the basic IA/workflow diagram analysis to identify potential design opportunities. As the project is a large-scale enterprise app management redesign, I used this kind of high-level analysis to give me a clear big picture of what's broken in the current workflow.
Then I worked with another designer to move along with the interaction design(low-fi wireframes) and visual design(high-fi mockups). We had many iterations of design updates with internal design critique with other designers/researchers, product manager and UI developers.
App Catalog List View
We clean-up up the columns in the app list table by removing columns such as VPP Label, VPP License and App Size, instead we introduced the app detail quick-view pattern and moved those information to the second layer.
App Catalog ICon Grid View
We introduced a new app icon grid view to help admins find a specific app. With this new UI, admins can quickly find an existing app with the unique app icon color or graphic.
right-side App detail quick-view for Compare use case
In our user research sessions, one admin mentioned that there're some in-house testing apps with almost identical app information, such as same app name, app icon, app developer. When they need to compare those apps, they have to go back and forth between app list and app detail page or open two browser tabs at the same time to compare.
In order to alleviate this pain point, we introduced an intermediate UI view as the quick-view pattern to show only the important parts of app detail in the right-side section, such as VPP info, iTunes ID, usage stats and activity logs. Also we plan to put some highly-frequent actions and links in this view as quick actions to trigger a workflow.
With this new pattern added, it came the interaction behavior conflicts. How to trigger the quick-view section and how to tigger the full app detail page? After a few iterations, we finally decided to only use the blue link for app detail page, and clicking anywhere in the row or app icon triggers the quick-view section. A "View More" button is also added to the quick-view section to connect to app detail full page.
LEFT-SIDE ADVANCED FILTER
We added more filter sets and sorting options to facilitate the admin filter/view experience.
Add New app Landing Page
In order to promote our own apps and partner apps in the add new app workflow, we designed for the empty state with a curated app marketplace.
Add Filters and Quick-view in add app workflow
We applied the same patterns to search a new app use case.
Add the step of App Distribution
Add the label assignment as the last step of the add new app wizards to make a complete workflow.
VISUAL DESIGN CRAFTSMANSHIP
We took the opportunity to overhaul and refresh the look and feel of the previous cluttered UI and made it more modern and cleaner. Besides, I designed micro-interactions for some UI details to make admins delighted, such as OS icon resizing with scrolling down animation and back to top button.
We worked with another visual designer on our UX Styleguide while we did this re-design project.
Retrospective & Lessons Learned
Making Priorities and design trade-offs
As such a huge redesign project for two enterprise products (both Core and Cloud), it's impossible to make all changes at once. I worked with the team to understand customers' pain points, and we broke our grand vision into multiple phases to make it shippable for our engineering team. As a designer, I learned that I always have to make UX trade-offs and keep a good balance between usability, technology feasibility and product direction.
Enterprise UX can be challenging and fun
On one side, this is the first time I designed for micro-interactions and animation prototypes for enterprise products. The stereotype of enterprise UX is "feature always comes first", but we drew a lot of design correlation with many consumer app store UI. In the end, we re-used patterns from consumer products and we added micro-interaction design details.
On the other side, I deeply realized how important it is to design for scale for an enterprise system. Android, iOS, Windows phone and Windows 10, In-house and an average of 120 apps for each customer..... Without a solid, robust design pattern and visual language, we cannot deliver a consistent UX across multiple products.
UX Styleguide really rocks
We did this redesign for two products at the same time, and we realized how much value and benefits a unified UX styleguide could bring to whole team. I also contributed to the MobileIron UX Styleguide design while working on this project. With a consistent design language, designers save time with the same Sketch assets, and UI developers save time with the reusable HTML/CSS modules.