4 new tools improving efficiency and collaboration for our UX team
In 2018, the UX team at Kabbage considerably grew and with that, experienced some inevitable growing pains. File management, team communication, and design consistency inevitably becomes more difficult when teams double (or even triple) in size. We introduced a group of new software and created new resources within our team to alleviate many of these issues early on.
Abstract
Uses: Abstract is a tool used for version control, active collaboration, and file management.
Problems It Solves: Abstract helps UX teams manage files across multiple products, track changes, control multiple versions, and avoid questions like, “Can you send me this .sketch file you did for Credit Pend?” or “Where can I find our icon library?”
Abstract has been the crown jewel of new software that has helped us work as a more effective and collaborative UX team. As we brought on new people, file management became a huge concern for the existing team members. No longer did the system consist of just a couple people working in their own separate files. Now they had to think about how the team was going to work closely and edit the same files without creating conflicts or inconsistencies. Enter Abstract.
Abstract provides the UX team with a secure, version-controlled hub for all our design files across multiple projects. It essentially creates a GitHub-esque workflow for the design team that allows us to create branches, write commit messages, and handle merge conflicts when collaborating on the same file. Additionally, every team member has full visibility into the entire team’s work and is able to easily provide timely feedback or even jump into the file and provide their own solutions. It has also allowed us to more effectively collaborate across departments, including our product managers and copywriting teams.
Without Abstract, we would still be sending “Kabbage-Dashboard-V3-FinalFinal.sketch” back and forth.
Abstract has absolutely elevated our workflow. Gone are the days of passing old design files back and forth via email, and now our entire team can have visibility into each other’s work while feeling confident that we’re working in the correct file. Game changer.
– Addie Ragsdale, Lead UX Designer
Zeplin
Uses: Zeplin is a great tool that helps us handle the often tedious process of designer-to-developer handoff. This includes mock-up specifications, asset export, and style management.
Problems It Solves: Zeplin removes some of the back and forth around minute details and specifications. It provides a single source of truth for what needs to be built — no more, “Can you send me three PNGs in three different resolutions?”
Designer-to-developer handoff has always been a bit tricky. Each new mockup introduces a unique set of challenges for a developer to be sure that the final product matches the UX team’s intended design. It often came down to a designer and developer sitting down and poring over the page after it’s been developed, making minuscule tweaks and changes because there was no insight into the proper colors, type sizes, and other spacing properties from the start. Luckily, this is now a thing of the past.
Zeplin is a collaboration tool built to facilitate this handoff by automatically providing accurate specifications, asset exports, platform-specific code snippets, and detailed style management. The introduction of Zeplin into the UX team’s workflow has helped improve the relationship between the design and development teams and made the tedious parts of the design handoff disappear. By relieving some of this pressure and reducing the number of unnecessary questions, designers and developers are now able to actively collaborate on the important (and often more fun) parts of the process. Hopefully, there won’t be a need to export that PNG in five unique sizes for every different Android resolution again.
Zeplin has been our source of truth for the design of the mobile app and greatly improved our efficiency as a team. It has eliminated a lot of the back and forth regarding assets, colors, etc., that we used to have and allows us to easily export these elements directly into the codebase. Also, the dedicated style guide makes implementing new features faster and more predictable. Zeplin removed the ambiguity around design specifics and helps us bring those designs to life more efficiently.
– Marisa Toodle, iOS Developer
Overflow
Uses: Overflow allows for more clearly documented prototyping and user flows and enables the team to take a higher level approach to UX and application architecture.
Problems It Solves: A lack of understanding around the entire Kabbage funding application flow. Easily creating clickable prototypes for design presentations.
The work that goes into building new features for Kabbage often extends past the design of a single screen. There is usually a multitude of potential paths, states, or errors a user can run into within a specific flow. It is important that we take these states into account, both in our designs and in how we present them to the product teams, our external partners, and the developers building the screens.
Overflow is a light piece of software that allows the UX team to import individual screens and quickly create an interactive and understandable user flow diagram. Each individual flow can also be made available on a shareable link which eliminates the need to send unwieldy PDFs, and instead just share the link to whoever needs it or post it on the associated feature ticket. From these flow diagrams, you can also interact with a functioning clickable prototype, which helps communicate the idea or feature in the context of the device where it would be used. Ultimately, this is another tool to help bridge the gap between our static designs and the final product.
Overflow helped our team document user flows and provided clarity when working with external groups. It not only organized our collective thoughts, but it also made collaboration so much easier.
– Russell Babb, Lead UX Designer — Partnerships
Sketch UI Kits
Uses: Sketch libraries empowers our team build reusable design elements that are managed from a single-source that empowers UX designers to quickly mock up new screens, without the hassle of recreating minute UI details.
Problems It Solves: Lack of consistency across UX team members and products. It reduces the time required to recreate common design elements of our app (including navigation, forms, buttons, etc).
One of the most common problems with a growing design team and an expanding company is maintaining consistency within each new product and across all platforms. When I began working at Kabbage, my first task was to perform an extensive audit of our mobile applications and identify areas of inconsistency. Some of the things I discovered included four to five different styles of buttons, three different checkboxes, an array of different icon styles, and an inconsistency in how we handled typography. This is common for products that grow from lean startups, but with the team growing and new products being introduced, it was time for a change.
A UI Kit is a collection of reusable design components that can be used to build new interfaces quickly and efficiently, eliminating the need to recreate detailed interface design elements and instead focus on the customer experience. The Sketch UI Kits that our team uses today were born from the results of the initial UI audit I conducted on our suite of applications. They include everything from our extensive color palette to our defined set of buttons, and growing library of iconography. These UI kits are deeply integrated into our Abstract workflow and thus accessible to the entire design team to utilize in any of their work. This has helped us maintain consistency across all new designs, as well as vastly improved the onboarding experience for new designers.
The Sketch UI kit is a dream! I was able to jump into design really quickly and easily because it was a matter of grabbing the right elements or components I needed. It’s a very comprehensive UI kit, so as a new designer to Kabbage, it gave me a good insight into our design parameters. Having all the different typography styles and colors organized so neatly was also very helpful, I didn’t have to switch back and forth referencing a style guide, and that saved a lot of time.
– Samira Villamor, UX Designer
There are so many tools out there competing for our attention, but within the sea of new software there are plenty of useful options that help increase productivity, efficiency, or just make work more fun. One way of figuring out what might be improved with a new tool or resource is to keep a running list of tasks that you find yourself repeating day after day or questions that continue to be asked of you. You will quickly realize the repetitiveness of a lot of our routines. For the UX team it was, “Where’s that file?” and “What HEX color is this button?”. What are some common patterns in your workflow?
