Mobile App Design Pattern Library

Company

B2W Software

B2W Inform is a custom form tool that is focused on data collection and analytics. Customers increase visibility to their construction jobs because forms are submitted immediately.

Project Date

2017-2019

My Role

I was the Lead UX Designer on this project. I primarily worked with the Development Lead on the product. I worked on the pattern library alongside the development of the product. We identified patterns and categorized them as we created the product. I wrote the pattern descriptions including any related states, variations and samples. I also created a structure for maintaining the patterns.

Project Summary

The B2W Inform product was enhanced with a new mobile application that let users fill out forms on their phone even when they had no internet connection.

The Inform App Pattern Library was setup to be a living library to hold patterns that are reused in the mobile application. The pattern library is used in a few different ways. First, the UX team uses the library to identify common functionality and styles so that additional functionality in the product suite will work the same way and look the same way. When instructions are passed to the development team about new functionality, the UX team points out any patterns so they can be implemented in the same way. The development team makes components for each of the patterns. These components are reused so it speeds up development. Finally, the QA team refers to the patterns to ensure the product is working correctly.

The Challenge

Create a pattern library for mobile products built with Xamarin.

• Identify reusable elements and describe their variations and states
• Understand the proper functionality for the technical platform
• Describe different states for the patterns
• Provide a proper level of detail that gives the team what they need and allows for future growth
• Create patterns for the components within the Inform product. These components are the items customers can use to create their custom form.

The Solution

As we started this project, we knew the core functionality of our screens. We knew these would change over time, but it was a useful foundation. I printed off our set of screens and started to identify the reusable items. I identified buttons, types of menus, a variety of inputs, statuses and how they are applied. With the outline of the library in place, I started building out the basics like the login page, the text pattern and input patterns. These were the first things to go into development and I tried to have the pattern finished before that item went into development.

Pattern Set
The original pattern set is listed below.

Sample Patterns
A few sample patterns are below. They include the card, the button group, and the form layout pattern.

---

---

Inform Components

I put the Inform components in a unique section of the library. These components work differently than our regular components. They are set up so that customer data is presented in the product. An input component in a customer form will look the same as an input in other areas of our product but it was built very differently.

We were able to combine multiple inform components into one design pattern. The graphic below shows which inform components use each design pattern.

The options component pattern is shown below.

Managing the Library

To better manage the library, I added a table on the top of each page to show the current status of the pattern, the last time it was reviewed and the last update. Using a macro, I created a place to see status of all the patterns in the library in a list.

Anytime we will need to make an addition to the pattern, we change the status to update and add a note on the page with the change that will need to be made. We try to make the changes in the next few weeks, but if we don’t, then we have a reference of changes on the page. Since the company has a few releases a year, there are unique seasons when the team is in release testing and we can review our existing patterns and make updates.

Growth

After completing the original library alongside the product launch in 2019, we have returned to make updates. We made broad additions in the summer of 2019 when we applied a dark mode to the Inform App. At that time, we updated each page with a table showing the colors applied for dark and light mode.

Benefits

This library has been helpful as we work with an offshore development team. As they work on new features development and QA can confirm some questions without waiting for the work day to start in Portsmouth.

We found the most value from this library in early 2020 when we started work on a new mobile app. This app is using Xamarin, the same technology but lives in a different part of our product suite. We utilized many of the same patterns for this product. The developers on the new product were able to reuse some code from the original product. This was especially helpful as we started building out login, home page, and settings because we could move forward with content that exists. We renamed the library to the Xamarin Mobile Design Pattern Library. With this new product, we added new patterns to the growing library and updated existing patterns with some variations like the button and card pattern.

This library will continue to add value to our team as we enhance these products and grow the business.