UI & Visual Design
As a UI and Visual designer for the Microsoft Membership Portal, I focused on creating a visually compelling and cohesive interface while handling some product design responsibilities. I developed a comprehensive design system, including style guides and reusable UI components, ensuring consistency and facilitating collaboration between design and development teams.
While my primary focus was on UI and Visual design, I ensured accessibility by enforcing the style guide contrast colors, typography size, and accessibility notation.
Usability testing included diverse feedback, ensuring the portal was inclusive and engaging.
Prototyping & Digital Design Systems
Before tools like Figma were available, I meticulously redlined designs and created components manually to ensure precise implementation by the development team. This involved detailing specifications and measurements on design mockups, ensuring every element was accurately translated into code.
I created high-fidelity mockups and prototypes in Adobe XD, even when the tool was in its infancy.
I provided detailed specifications and assets for a smooth handoff to developers, allowing for reusable and scalable UI elements.
As this was created with a proprietary bootstrap framework, the “componentization” of elements served as a great stepping stone that continues in the structure of the current site.
Early redlining practices translate seamlessly into atomic design principles in libraries like React using current design tools. This method enhances collaboration with developers by using a systematic, reusable component approach.
Reimagining & Prototype
Recently, I recreated this design using Figma in about 48 working hours by creating design systems and using tokens. I implemented MDL2 assets using the actual font download available online and created a reusable component library, much like I did before product design was an established term.