©2018 Built with love by Nick Howland.

Salesforce Mobile UI Kit

Salesforce Mobile UI Kit

Helping internal and external designers more efficiently utilize Salesforce patterns.

Role: Product Designer / Lead Visual + UX Designer

Deliverables: Final Visual Designs

Project Overview

The Salesforce Lightning Design System is a powerful tool that outlines how and why Salesforce builds designs as well as houses the pieces we use for building our products. These pieces, or components, are available both internally and externally, improving process and quality everywhere.

While SLDS is extremely useful, components are only represented via code and flat image files. There is no way for designers or others to quickly grab a component and iterate with it within their visual designs, or to adjust the component and find new ways to expand its use. We needed to find a solution that allows designers to grab malleable components that are a 1:1 representations of their coded counterparts so that they can be used within working Sketch files.

Packed Full Of Goodies

Compiling a source of truth for components within a centralized Sketch file was the immediate solution. This Sketch UI Kit is part 1 of a much larger initiative to allow designers to utilize components within their designs that are exact representations of those coded within SLDS. Rolling out a UI Kit allowed us to quickly take action on having various interpretations of a component floating around, which can lead to inaccurate designs and splintered component representations, which can also lead to redundant work and ultimately result in a need to fix a whole lot.

The kit itself contains a lot of useful items. Components for Desktop and Mobile are included and are each organized into three unique sections: simple components, which are the smallest pieces (like buttons and icons) that are commonly reused; complex and structure components, which are patterns built out of simple components and are used for layouts; and key screens, which show how all these pieces come together within a compiled screen experience. The kit also includes wireframe elements, screen frames for presentations and showcasing mockups, and release notes to inform users of updates.

The construction of each component is also carefully thought of. Each simple component is constructed using symbols, which are then nested within the complex and structure components that are also symbols. Symbols allow designers to grab portions of the UI Kit then update them quickly with their own data so that it can fit their design. All without deconstructing the component or clicking through numerous layers.

While symbols are useful, we were careful to not go overboard with their usage. We know that some designers might need to take the component apart to make more unique edits and we didn’t want that process to take an unreasonable amount of time either.

A Chance To Step Back

Creating a UI Kit gave us a chance to take a step back and look at how SLDS components are used within our own products. Before we dove into curating the UI Kit, we sifted through piles of Sketch files from various designers, looking at working representations of the components. We then compared these designs to the components on the SLDS website, which included looking at color use, sizing, spacing, typography, and more. We also looked at how components within the product matched up to designs and the SLDS site.

We took our findings and filed bugs on convergent designs within product. We also filed bugs on inaccuracies within the design system site so that, upon release of the UI Kit, we could all be aligned. Using the website as a source of truth, we also made updates to inaccuracies within Sketch designs as needed. This process also taught us where SLDS components were being used and where they were not, which helped us educate other teams on how to use our design system and the benefits of it.

Better Process, Improved Efficiency

The UI Kit is also a tangible way to educate people, especially those external, and teach them about our Salesforce UX process. Having readily available, plug-and-play components also gives designers the success and trust that comes with the initial work put into creating the existing patterns. Each piece within the kit has been rigorously tested via iteration and research, and it was built by an expert in the field. This all leads to an improved sense of trust. The use of the UI Kit then leads to more efficient and faster design processes.

Collaborators

Kyle Haskins – Mobile Team Manager
Aran Rhee – Desktop Designer