AllianceBernstein is a global asset management firm providing investment management and research services worldwide to institutional, high-net-worth and retail investors.
As an AllianceBernstein Product Team we were responsible for the creation of the first Design System in the company's history. As a UX product Owner, I was responsible for module wireframes, accessibility, and user testing.
Apr 2018 - Nov 2018
Sketch, InVision, Adobe Illustrator, Adobe Photoshop
In the last few years, AllianceBernstein went through a pretty big digital transformation, from a complete rebranding to increasing the number of members in the digital development team from 4 to 33. At this point, it became clear that we needed more systematic ways to keep the whole brand experience consistent.
The goal we set for our design system was to create a clean, unified and more accessible digital brand experience.
Multitude of Regions
We needed to ship our products to a multitude of regions with different user and legal characteristic. Keeping our brand and design consistent took significant effort and discipline from the whole team. Constant communication with stakeholders around the world, and demo showcases after every major change helped eliminate misunderstandings and regional legal constraints.
Right Team, right skills.
A design library team should consist of specialists in areas such as user interface, illustration, and motion design. A documentation team should be made up of designers who have expertise in user experience, research, as well as from front-end developers who excel at codifying design components.
During our trial and error period, we struggled because our design library was often broken due to synchronization issues due to more than one person updating the master file. To resolve this this issue, we recommend choosing one person who will be responsible for updating the master library file (the library owner).
Once we have found the right team for the task, it was time to kick off the project! The first thing we did was listing all elements that needed to be included in the design system.
Simple, Cleanand Clear
After the product audit, we realized that our product and internal tools were inconsistent and data heavy. We decided that the only way to achieve our goals was to design a clean and clear experience.
Multiple Sprints - Closer To the Goal
Thanks to the audit we had a clear view of all prioritized items needed to complete the first release. We created a spreadsheet with all items and decided to divide each part into 2 weeks long sprints. Using Fibonacci points system, each team (design and dev) defined the scale of how hard and how long it would take to create a module. Once we created a list of the components and prioritized them, we allocated the items to relevant sprints. Our roadmap looked like this:
We’re not designing pages, we’re designing systems of components.—Stephen Hay
Due to the multitude of platforms and legal characteristics, we decided to start from modules that could be put together like Lego pieces, creating the AB Pattern Library. Before the Pattern Library, AB had already established a brand style guide but, to be honest over the years multiple design and dev teams used it very loosely. Because of that, it was extremely hard to maintain brand consistency and difficult to update a piece of code without breaking it in other places in the platform.
Make It Visible
In the first release, we decided to use Sketch and InVision environment for internal design demos.
What We Have Learned
The AllianceBernstein Pattern Library was a super challenging and fun project but as with any project, there were things we wished we would have done differently.
Limitations Of DSM
After using InVision DSM for a while, we oversaw more and more limitations within the software. There was no way to change the predefined layout, create own rules, or correct a mistake in a section that was already uploaded so we started working on our own system for developing the pattern library.
In order to create a flexible system, we needed to start by being specific.
We not only redesigned a majority of our assets but also rebuilt the whole UX process. The project was officially launched in December 2018 right before the big transformation and move of the company's resources to Nashville TN, where the new design and development teams were taught how to use the design system. At the Annual Town Hall the Ab Pattern library was announced as a big success and became a big part of the company's digital transformation. I'm so proud that I could take part in such a significant project for one of the most recognizable companies in the financial world.
SIMON iOS App
I also worked on the iOS Sales App which is an Internal app helping sales teams track clients, transactions and their account details. Please let me know if you'd like to see the results, I will be more than happy to share.
* US retail page - an example where AB Pattern Library was used.