Big Iron Goes Mobile


IBM CORPORATION











Reimagining enterprise applications from a Mobile First perspective.














The challenge

Make enterprise applications not suck

Innovation in mobile design has far outpaced that of traditional web design. The apps on our phones are delightful and easy to use, whereas enterprise applications are generally scary and difficult to use. This has got to change.


The solution

A new library of cross-platform patterns

IBM's most commonly used enterprise patterns were redesigned in accordance with mobile design principles, making them more approachable and easier to use across platforms.



My role

Mobile First evangelist

I led a workgroup of senior designers to reimagine enterprise applications from a Mobile First perspective. Specifically, our goal was to take a fresh look at enterprise applications (through a "mobile lens") in order to discover new insights, and designs that work seamlessly across platforms.



My approach

I didn't want the group to get bogged down analyzing existing designs — this project was about thinking new, mobile-inspired thoughts — so with a bias for action, we jumped in and started designing.


  1. I surveyed my library of enterprise patterns and identified the most common ones.
  2. The group iteratively designed the patterns for mobile, progressively disclosing complex functionality.
  3. I captured our work in wireframes, mockups and prototypes.


Focus on search patterns

What follows is an excerpt from the larger project, related to search patterns.



Research

Searching within enterprise apps is not easy to pin down since it depends so much on context. After talking with users, we decided to focus on three of the most common patterns for enterprise search, what we called Local/Simple, Global/Simple, and Global/Advanced.



Wireframes

We started with sketches, of course.


As our design took shape, I cranked out digital wireframes for iOS and Android. The following wireframes explore how the three search patterns can manifest on the phone without conflicting with each other. The red notes are my critiques of the work in progress.


Local/Simple search




Global/Simple search


Global/Advanced search



High-fidelity mockups

Local/Simple search

After some guerilla-testing, this is the design we landed on for Local/Simple search. This design allows users to move very easily from folder, to filtered view, to object, and back again.


Global/Simple search

By placing global search at the top of the navigation hierarchy (in side nav), we reinforce it's global scope and allow users to access it at any time.


Global/Advanced search (Before)

For Global/Advanced search, we started with an existing model (from IBM Content Navigator). It’s not much to look at, but it is powerful.


Global/Advanced search (After)

Here’s how we simplified the screen above to work on mobile. This approach satisfies enterprise users’ needs for robust, multi-faceted search while taking up very little space.



Prototypes

I created InVision prototypes for testing purposes.


Prototypes



On larger devices

Once the design was working on mobile, we looked at how it might work on larger screens. Here's one way to do it.



Recap


    • Identified most common enterprise patterns.
    • Interviewed users regarding their familiarity with/use of the patterns.
    • Iteratively sketched and wireframed solutions.
    • Created high-fidelity mockups for iOS and Android.
    • Created prototypes.
    • Conducted remote usability tests.
    • Designed patterns for larger devices.




FileNet ECM Administration

IBM Corporation

Content Management | Enterprise | Web