Big Iron Goes Mobile
Reimagining enterprise applications from a Mobile First perspective.
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.
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.
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.
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.
- I surveyed my library of enterprise patterns and identified the most commonly used ones.
- The group iteratively designed the patterns for mobile usage, progressively disclosing complex functionality.
- 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.
Users of enterprise apps require powerful search options. We decided to focus on three of the most common patterns for enterprise search, what we called Local/Simple, Global/Simple, and Global/Advanced.
We started with sketches, of course. Lots of sketches.
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.
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 result, and back again.
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.
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.
- Organized workgroup of senior designers to tackle the problem.
- Identified most commonly used 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.