How We Built the Mobify UI Kit for Progressive Web Apps

Nevermind the marketing speak. Human-to-human, we at Mobify make mobile websites and apps for companies that sell a lot of stuff online. And we’re really, really good at it.

Commerce, Mobile Commerce

That’s where the Mobify UI Kit comes in.

We started putting together the Mobify UI Kit  back in early 2016. Because we focus exclusively on mobile websites and apps for companies that sell a lot of stuff online, we wanted to remove the grunt-work that came with every project by standardizing the repeatable tasks. I mean – really – how many times can you draw a rectangle with text in it before going crazy?

There was a bit of push back from other designers, saying it would reduce design work to a set of prescriptive solutions that would be slapped on for whatever situation “fit best.” That was never our intention, but it’s a valid concern. So we made it our priority to be standardized, but flexible, and persisted.

The Mobify UI Kit made its way through a slew of talented designers, each one contributing. It went through iteration after iteration and rebuild after rebuild, keeping up with new features and software updates as we went along.

Since creating the UI Kit, every Mobify Progressive Web App, such as LancômeCrabtree & Evelyn, and Carnival AU, begins its life as a set of components. Now, all of our implementation partners use the kit as part of their design process, too. 

Let’s take a look at what the UI kit is, and how it’s used to build Progressive Web Apps.

The Mobify UI Kit in Action

The Mobify UI Kit is a collection of .sketch files containing a bunch of common ecommerce components, built with Sketch’s symbols feature. These pre-built, extensible components follow Brad Frost’s Atomic Design principles, wherein the smallest components combine to form bigger ones, which in turn come together to form even bigger components. These can be used to create common core ecommerce pages such as Product Detail Pages (PDP), Product Listing Pages (PLP), and checkout flows.

We’ve also put in the work to make sure these components aren’t prescriptive in any way: they were created to be flexible, and adapt to your needs. Furthermore, we’ve integrated our UX best practices into the kit, so things like accessibility and form fills have been taken into account.

Mobify UI Kit setup image
Setup: Define your color palette! These colors will cascade through the entire project; all colors can be managed from a single page within Sketch.

Setup

When you open the UI Kit, the first things you will see are Setup pages. These pages contain all the global color and typographic styles that will propagate throughout the rest of the file.

Altering these will give you a great headstart by plunking in the brand’s existing color palettes, but also provides a overview of the styles found in the project. Think of it as your own, easy-to-use style guide that also doubles as instructions. On top of adding in brand colors, you can also customize general layer styles, such as inner and outer shadows or opacity. We’ve also added in some common patterns, like header bars and input fields. It’s up to you to decide how vast (or not) you want you color setup screen to be; we generally like to keep our palettes on the smaller size for a couple of reasons, namely that we can ensure the UI looks and feels consistent, and we reduce the amount of bloat in our stylesheets once we start turning this into code.

Mobify UI Kit component template
Components have been pre-built by us – all you have to do is drop them into a template and override the data.

Components ?

Components are the bread and butter of the Mobify UI Kit. We’ve organized components based on complexity, nesting depth, and template applicability. On the left you’ll find find small, single-element components like icons, and as we move towards the right, we find the more complex components such as carousels, accordions, and product cards.

All components work out-of-the-box. Some components, such as icons, should be replaced with your own selections. The Mobify UI Kit is a boilerplate, meaning you can adjust and customize everything to your heart’s content. However, when making a change, we urge you to consider why are you making that change. For example, all of our tap target sizes use the best practice of being 44px tall and wide in order to accommodate the average finger size. While there are certainly times that a link or button will need to be below that size, it would be up to the designer to deviate from the best practice — at least then it’s considered.

If you deviate from the standard layout of the component  –  change the arrangement, add or remove elements, etc. –  take careful notes of your changes. You’ll want to include them in your design notes so your developers have a reference of what changes to make during the build.

While we encourage you to adjust components, we do not recommend changing their names. The UI Kit is one piece of the Mobify Platform , and  it has a direct counterpart with the Mobify Software Development Kit (SDK). Each component in the Mobify UI Kit is also available for developers to use. Once development is ready to begin, the designer can leverage the same component in the SDK.

Parity FTW

Mobify UI Kit templates

Templates

Templates are final stage of our hard deliverables as designers: fully-realized mocks. We’ve pre-built a few samples of what one might like to make with the kit, but these are by no means intended on influencing your layouts; they are common arrangements that reflect our best practices. Remember: these are tools, not solutions, and will only take you so far.

Mobify UI Kit components

Arranging components on an artboard is incredibly easy: just find the component from the Symbols drop down menu and drop it onto your artboard. (Hint: we’ve organized components in menus by using the “/” character in the component name.) It might be necessary to resize the component based on your intended usage or the artboard size. As of Sketch 44, components can be squished and stretched to fit a container, but will keep their inherent properties  –  this means you can use the same component for a myriad of screen sizes. The final step is to override any placeholder content with your own data.

Grids & Spacing 

Designing a basic design system for a mobile experience isn’t terribly difficult. All it takes is three values: a base font size, a base line-height, and a base unit. Everything about a system can be derived from these values, including our spacing system.

The UI Kit uses a base unit of 4px; everything in the kit builds off this size in either a multiple or a division. Consistent variables based off a single base unit will assure you that everything scales on the same metric, and will therefore have a natural, consistent rhythm. Using this system, makes sure your design is consistent and clear, and makes it much easier to build and maintain!

Here’s the fun bit: components already have spacing built in!

You can globally toggle these spacing indicators on/off by deselecting the Fills color option and syncing the style. (And, of course, you can change the size of spacers in individual components based on your needs.)

The UI Kit has become an integral part of not only our internal design processes here at Mobify, but also a part of our partners’ as well, because of its ease-of-use, flexibility, and it’s deep connection to our SDK. While it may come across as “just another kit,” we’ve specifically tailored it for ecommerce experiences  –  perfect for your audience.

I encourage you to give it a whirl. Get it for free off GitHub.

Leave a Reply

Be the First to Comment!

Notify of
avatar