Sallie Mae Backpack
| Project Overview |
Sallie Mae, in the midst of rebranding, desired to create a new all encompassing library in Figma, affectionately named "Backpack". The library's goals are:
- To create better consistency as the new brand is designed.
- Cut down the time taken to create high fidelity, approved design.
- Sync the way the library works to mirror development to achieve more accurately created pages, and streamline our workflow.
Tools used
Figma
Illustrator
After Effects
Initial Scope
At my entry into the project, there was already an established design direction, with several pages for the consumer website mocked up by a 3rd party agency.
With this approved brand direction to move forward with, priority number one is creating fully prototyped components that are mapped to a newly created set of styles. The goal being that in the future designers could drag & drop entire web pages together using components.
There would be an approved set of toggles, logic, and prototyping that would make designing in a consistent and approved way (relatively) easy.
Making the basics / Accessibility
First to build out are the base styles. Text styles, colors, spacing, grids, border radii, etc.
Next, creating component atoms such as buttons, cards, input fields, data visualization, and other various pieces that will be used extensively throughout the website.
Each of these elements needed to be audited to ensure our AA standard accessibility compliance was now being met. In addition being labeled in an appropriate way to allow for future flex and scalability of the library.
Moving on to molecules and organisms
Now that we had a solid foundation to build from, it's time to start adding in complexity. Molecules of the design system begin. Headers, footers, complex cards, carousels, and more are now created by combining atom components together.
Lastly the organisms are created using the molecule components. Resulting in a version of the library that, while imperfect and is need of further refinement - is functional and ready to be deployed to the team for usage and feedback.
The need for tokens
At this point the library is in a useable state. But there are still numerous inconsistencies cropping up as different designers start implementing the library into their workflow.
We have multiple design groups, as well as an assortment of different development teams that are all using unique platforms and design standards they adhere to.
Additionally, developers have been using some instances of tokens in their workflow already, but they are not set up to be scalable, or consistent. This leads to us deciding that creating tokens within Figma is worth the undertaking.
Preparing & Token research
I begin heavily researching best practices when creating tokens, and how other companies have successfully implemented tokens into their workflow.
After developing a plan of attack, I begin first with documenting how the tokens will be organized and built to allow maximum consistency and flexibility to accommodate any future unforeseen needs.
It's decided that first creating tokens for our colors will be both a significant proof of concept that can be presented, and a very attainable first step in rolling out all tokens to the broader backpack library.
With a promising token base built out, we gather representatives from each of the development teams to get feedback on what's been produced so far.
The token library will be an asset for the designers alone - but it becomes infinitely more powerful if all of the development teams and designers are speaking the same language and are eager to implement the same plan.
HOw it's going / Outcomes
The tokens have been applied successfully to the larger library, and the system is being depended on greater as more of the teams transition away from the old style into Backpack.
We've had a lot of positive feedback and general excitement from all involved regarding the library. Development has also been an active partner in helping shape the tokens into something they are comfortable using too. With this alignment, conversations about what design options to choose are going much smoother.
We have been continuing to build documentation to make the system more robust, as well as providing training to team members who are less familiar with Figma and how the library is constructed.
This is a living and breathing system and as such there are components that are rushed, rules broken, and disconnecting components when they have a limitation that isn't easily addressed.
The future of the library is to continue addressing these issues as they arise, and continue iterating to a more mature system that serves all of our designer and developers' needs.
