Fall 2020
Citibank Design Standardization
Systems design and ensuring team alignment is just as important as designing for the end user.
Fall 2020
Systems design and ensuring team alignment is just as important as designing for the end user.
For speed to market, Razorfish and Citi agreed to use mock ups instead of wireframes in our documentation. However as modules were updated, those updates were reflected in new wireframes and not always in the original mockups, leading to internal confusion on where to find the most updated designs.
The goal of this project was to create a definitive place for team members to quickly find design guides and specs in wireframe format.
UX/UI Designer
Our team was to overhaul 83 unique modules and reduce their fidelity from mock up to wireframe. However, before any comp to wireframe conversion could happen, a design system would need to be created specifically for this project.
Once the project groupings and delivery timelines had been established, we were able to begin creating the design system that would be needed for the project. To do so, we built out a style guide that allowed us to quickly adjust an existing design library to the new specifications and fidelity.
Crafting the new library was an iterative process, as soon as there was a working product we began to test its effectiveness on sample modules in order to see what elements might be missing or need augmentation. This process would continue into the actual delivery as some modules possessed specific elements not covered in this initial testing.
With the library built, the creation of the new greyscale wireframes was a straightforward process, although it did require a keen eye for detail with each element needing to be replaced. The existing comps were archived and relabeled in case they were needed for future projects.
Diving this deep into each module allowed us to go even further into our goal of realignment. We brought in the copy team and alongside the UX updates, we were able to audit content across the modules. Every module would now be completely aligned between wireframes, annotations, and copy decks.
With this project I gained experience in: