From Rationale to Style Guide
Redefining the visual language and utility for MobileIron’s app suite.
With six apps on iPhones and iPads, MobileIron knew they had to be ready for the new flat tomorrow that would arrive with iOS 7. “We saw iOS 7 as a great opportunity to upgrade our entire end-user app experience,” says Jerry Sherman, head of UX at MobileIron. “And we immediately looked to ZURB to help us.”
We started with redesigning app icons and created a whole new visual language that set them up for iOS 7 and beyond.
Some paths start with tiny footsteps
Starting small to establish a visual language.
Timeless. That’s what came to mind as we set about the visual design. We may have been designing something for iOS 7, but we had to set MobileIron up for the next version and, perhaps, the one after that. We started with the smallest step possible: the apps’ icons because MobileIron needed to be in the App store fast. The icons had to look fresh, current and, most of all, unified. The icon set also had to be able to grow as MobileIron added new apps in the future. But we weren’t just creating icons. We were taking the first steps toward establishing a new visual language.
Our explorations spanned highly-stylized iOS 7 line-icons to pushing the envelope with playful graphics. But we couldn’t let MobileIron get stuck in what could be a fad. Line-based icons could be dumped in the next iOS. Timeless trumped trendy. We shied away from being too high-brow, settling on clear, chunky icons that represent the function of each app. We added a long shadow to the icons, but we were a bit conflicted.
While the team liked the long-shadow treatment, we were still worried about the longevity of the design. Was it too trendy? Was it a fad destined to quickly fade? We rolled the hard six and kept it. Instead of seeing it as a potential obstacle down the road, we turned it into an opportunity. The shadow style wouldn’t be pure ornamentation — it would be a brand element within the interface of the apps.
A string of decisionsbecome a single voice
Icons guide the way forward.
Icon styles propelled us toward defining the apps themselves. We balanced relevant visual elements of the upcoming release with branded styles — it was vital to giving MobileIron a distinct voice while keeping it in tune with the dramatic iOS 7 update. What started as a stylistic icon treatment evolved into an interface design that was harmonious and conveyed a family of apps.
The icons became our baseline, establishing a set of guidelines:
- One color to define each app
- Hard shadow to create subtle depth
- Airy and open design that feels approachable for a security app
Simple tasks reveal tricky interactions
Sometimes the obvious is staring you in the face.
Unifying six apps didn’t stop at refreshing the UI elements. It meant looking at interaction patterns and thinking through the apps’ utility. We believe that the best design “gets out of the way.” A user shouldn’t notice it. It’s what we shoot for with every project. With MobileIron though, some of the simplest actions made us scratch our heads.
For instance, how do you effectively move a file within a constricted amount of screen space? We examined other file sharing apps, who had all solved the problem in their own ways. But we weren’t satisfied with their solutions. They didn’t have the simplicity and intuitiveness we wanted. The user needed to know two things to make a clear move action: the file they’re moving and the context of where it’s going. Once we ID’d the simple key elements, we gauged them against our own ideas. Looking at it now, the interaction we came up with seems completely obvious. We let the design get out of the customer’s way — creating an action that was so intuitive that it didn’t demand attention.
New life from increased utility
Why stop at the pattern library?
The visual language opened the door. It allowed us to revisit how people would use the apps, expanding the functionality of each. For Mobile@Work, we designed a comprehensively functional file management app — a single app to securely manage and interact with your files across all of your work file storage accounts. We placed focus on the addition of “Priority Folders”, by which team leads could distribute the highest priority documents to teammates. It acted as a single place for the team to share and sync their most important and current documents. It was a breath of new life spawned from increased utility.
It all comes together
Setting up MobileIron for apps to come.
After fleshing out the interactions and visual language, we documented the details of our decision and design patterns in a comprehensive style guide. Think of it as the playbook for engineers to use during the actual development of the apps.
MobileIron debuted their app icons just two weeks after iOS 7 dropped for public. Looking back at where the suite of apps began, we’re proud to have created a visual language that unifies the apps as a cohesive set. Most of all, we distilled key workflows into intuitive and pragmatic interactions that help teams get stuff done.
We’ve started using the ZURB deliverables as the foundation for a comprehensive style guide across all of our products — this will be a huge productivity enhancer for the product teams. — Jerry Sherman, Head of UX, MobileIron