Chen Zhang Design Portfolio
App Catalog Redesign Banner.png

App Catalog Redesign

As an IT mobility admin, I need a more intuitive and scalable enterprise app catalog web solution. 

 

Problem Statement

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. 

Previous app catalog List with only two filter sets and secondary information 

Store import workflow 

 

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. 

 

Previous add app wizards landing page and incomplete steps in the workflow

 
 
 

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.  

 

Current IA/Workflow Map 

Proposed IA/Workflow Map

 
 

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. 

 

Whiteboard and wireframe iterations 

 

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. 

App Catalog List View

App Icon Grid View

 
 

right-side App detail quick-view for Compare use case

In our user research sessions, admins mentioned that there're some in-house testing apps with identical app information, such as same app name, app icon, app developer. When they need to compare those apps, they had 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 brought an interaction behavior conflict. 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.  

 

Quick-view section in app icon grid view

Quick-view section in app list view

 
 

LEFT-SIDE ADVANCED FILTER

We added more filter sets and sorting options to facilitate the admin filter/view experience.    

 

Filter and sorting options

 
 

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 new app landing page 1

Add new app landing page 2_with OS selected

 
 

Add Filters and Quick-view in add app workflow 

We applied the same patterns to search a new app use case.  

 

Filters when searching for a new app

App details quick-view when searching for a new app

 

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. 

 

App distribution as step 5

 
 

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. 

 

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. 

 

MI UX styleguide 

MI UX styleguide

 
 

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. 

 

 

 

 

View more projects