Mobile App Consistency by Design

Published in

VMware 360

6 min readJan 4, 2018

Here’s how we evolved the Boxer mobile email app into VMware Boxer, an effortless enterprise email experience for our digital workspace productivity apps suite.

Leveraging Design Fundamentals.

Prior to joining VMware as a designer, I was a designer for Boxer, an email and productivity mobile app. Working at Boxer was a huge learning experience for me. My introduction to product design was a whirlwind, and I dove in headfirst.

I have a traditional background in graphic design, primarily in branding and some web work. At Boxer, I approached tasks with the same core design fundamentals. For example, I would take a branding project and translate it into product design, focusing on consistency; layout; typography; color theory and other common, shared elements.

Standards documentation helped us identify avatar specs and usage for the Boxer app.

Everything we put into the Boxer app had to be cohesive — not only within the app itself but also across platforms, from iOS to Android. We created a unique set of icons, an illustration style, color palettes, an app icon, a logo type and more — all with a common theme that represented the identity we created for Boxer. All of these elements collectively reflected the “Boxer brand” and exemplified the characteristics we believed were key to a successful product: efficiency, productivity, user-friendliness and professionalism.

Using common, shared components in product design can be a huge benefit to design and development teams, as well as the product. Having a system of standards and components in place can help you onboard new team members, educate those involved in product management, streamline user experience (UX) and user interface (UI) implementation and, of course, create a great toolbox for the entire team to use and refine over time.

Laying a Foundation

Through trial and error, testing, analytics and a bit of instinct, we figured out what worked and what didn’t, and things organically fell into place. We developed a “Boxer style” and adapted our designs along the way. We moved so fast, we could not create a style guide and design everything strictly off that guide. We established design standards one or two at a time, so the Boxer style was always evolving and improving.

This was good and bad. We never nailed down a solid design system. However, we were able to take what we liked and what worked and evolve those elements to create successful designs. It allowed us to be nimble and expedient.

An example of reusable components as Sketch symbols for Boxer.

Working solely on Boxer, we didn’t worry about expanding our design system to accommodate other products or brands. We may have established a style of displaying tables or a button style when developing a new feature that we would then re-apply to existing features. There was a back-and-forth effort for consistency that we always focused on in order to establish standards and reuse components.

These common themes were woven throughout every feature, icon, color and user flow we designed. We put a lot of effort into making users feel comfortable and at ease with each task, from learning a new feature to sending an email. The consistency and simplicity created an effortless experience for users.

Now What?

In October 2015, VMware announced plans to acquire Boxer. Our team knew from the start that a suite of mobile apps comprised VMware AirWatch enterprise mobility management, but we did not know what our involvement would be, if any at all. We didn’t know the state of development of every app, and we didn’t even know the function of every app.

It was obvious Boxer did not fit neatly into this suite. It looked good and had a good user experience, but it stood out like a sore thumb when placed next to the rest of the mobile apps. Something had to be done, and we wanted to help. So, we dove right in.

Creating a common set of standards and components is even more important when you’re designing for a suite of apps that fall under a single umbrella, while allowing each app to retain its unique functionality and purpose. This presents new challenges that simply are not there when only thinking about one app and one brand.

Standards documentation also helped us specify file type icons.

We pieced together a small team, divvied up the work and immersed ourselves in everything we needed to know about the new apps. At the beginning, we based many of our decisions by comparing products to Boxer. We asked ourselves questions like, “Well, what does Boxer do in this situation? Does Boxer do this? How can this match Boxer’s UI better?” Our answers to questions like these, and many more, helped us form a baseline for our UX standards.

Divide and Conquer

We started by identifying key components in each product and where they overlapped. From these key components, we listed standards we wanted to establish for our products: navigation, typography, contact profile, list views, tables, colors, buttons and the list goes on. That way, all our products would share the same design standards, and the standards would be specific to the platform, either Android or iOS.

Of course, we did not have the time or bandwidth to go into a room for six months, cook up all these design standards and come out with a comprehensive and thorough system. We had actual production work to do. Builds were shipping, and the clock was still ticking.

As production was executed and new features designed, we built components and developed design standards along the way. We split up “standards tasks” across the team, each person committing to 2–3 standards per sprint and focusing on just those.

For example, I took “Bottom Navigation Standards for Android.” I examined all existing products, and often I learned we have multiple ways of handling the same component. After identifying areas of inconsistency across the board, I’d either create a new, updated design that met all requirements for that component, or we would vote on which existing style we thought was best and why. It was a collaborative team effort at every possible point.

We finally established a concrete flow for maintaining product consistency. Now, we’re able to closely track front-end implementation, keep it to spec, get team members up to speed with ease, share our work and explain our rationale with other teams. We’re stringing together new screens faster than ever before for Boxer, now part of our VMware Workspace ONE productivity apps suite.

Our Boxer, People Search and Files apps feature a consistent user experience.

Tools, Teamwork and Tenacity

A number of tools helped us throughout our process:

Dropbox is essential for sharing our work, keeping it organized and accessible to all stakeholders.

We’ve also made great use of the Craft by InVision LABS plugin for Sketch. It’s ideal for sharing and using color palettes and text styles. We learned along the way, however, that it doesn’t work as well with too many components in your Craft Library, making it difficult to find what you need when you need it.
Lastly, Slack is another great tool we use for daily communication, sharing ideas and opinions. It’s especially helpful when you’re spread out over three time zones, as we are.

Creating a design system and using common components for our mobile apps is a constant work in progress. Products change, new features are introduced, old features are deprecated and so our designs change.

The design system has to be fluid and adaptable. It requires care and maintenance. Our methods may not be perfect, but they are proving to be effective and efficient as we keep striving for consistency and simplicity across our mobile app designs.

What’s new in the VMware UX Series: