Challenges

• Prototyping resources limited, file organization was key
• UI patterns were still in a state of flux, keeping consistency was challenging

My role

I was given a set of wireframes from the UX Strategist. From a few other projects we had done previously, we had some existing UI patterns, but some elements required new/custom components. I took inventory of which existing patterns were available in order to ensure which items required further thought and design.

Working with the other senior designer on the team, we split up the mockup work. Branded fonts and sizing were used, and grid and spacing defined. Patterns such as error states, confirmation states, buttons and other actions were assigned colors and icons in order to show branding and personality. Mockups also defined patterns, sizing and behavior for three responsive breakpoints.

At completion, we sat down together and ironed out any inconsistencies that existed in relation to one another’s work. Final delivery consisted of a prototype delivered with Adobe XD to be shown to stakeholders for buy-in.

‍

‍

Retrospective

The greatest lesson learned per this project was the importance of a pattern/design system library for multiple designers to use, edit and pull from. As connected as I was to my teammate, we still had inconsistencies in how we initially designed newer custom components. A final discussion on our thoughts behind each pattern was an integral part in solving these inconsistencies. As a result of what we learned from this project, we would go on to advocate building a pattern component library for the team’s use on any similar projects going forward.