Tag Manager
Figma, Microsoft DevOps
UX/UI Designer
CloudSaver is an IT Services company working to build tech for cloud service providers such as Amazon Web Services (AWS) and Azure. CloudSaver hired me as a short-term contractor to help their current Sr. UX Designer get caught up for a digital product release. The team consisted of a Sr. UX Designer who had been there for 6 months and a product manager who had just been promoted to the role.
One of the biggest tasks CloudSaver needed me for was Figma integration. When I came aboard, the team was using a combination of Whimsical and Balsamiq to create low-fidelity wireframes, but they wanted to move towards Figma. My first job at CloudSaver was educating my team members and helping convert previous designs into hi-fidelity Figma wireframes. I also started the process of building a custom component library so that the team could use Figma more efficiently and effectively. This component library has grown to be a source of pride within the CloudSaver product team, and they've committed to continue building it out in the future.
When I joined the CloudSaver team, they were under a tight deadline to show designs of their product, Tag Manager, to stakeholders at the AWS ReInvent conference in Las Vegas. Before my arrival, the product team hadn't done any interactive prototypes. I taught the Sr. Designer how to use the prototyping tools in Figma, and we worked together to create an interactive prototype for CloudSaver's Tag Intelligence functionality, which was a major component of the Tag Manager product.
View the interactive prototype here.
The AWS Reinvent Conference went extremely well, and, when it was done, I still had some time left on my short-term contract. For the rest of my tenure at CloudSaver, I focused on building out their custom component library and creating static wireframes (per their preference) of new screens for Tag Manager. At the time, product requirements weren't fully determined, meaning that we had a continuous cycle of reviewing designs and iterating based on stakeholder feedback. Below are some examples of screen versions I worked on.
The image above is the wireframe for the Tag Hierarchy screen. The tiered grid and left navigation menu are both custom components created in Figma.
The image above is another screen within the Tag Intelligence product, this one focusing on Untagged Resources.
The image above shows an internal screen allowing CloudSaver employees access to manage MSP users partnered with CloudSaver. The goal was to have a clean, concise interface that allowed users to see both their companies and the associated costs of using Tag Manager.
The above images show examples of how, knowing I was on a short-term contract, I left notes on my wireframes for any future designers/viewers. It was important to me to leave my CloudSaver team set up for success, and I hope these contextual notes will help them move forward in the future.
This role helped me grow as a designer in many ways. Not only did I learn how to work with another designer who didn't use the same tools as me, I gained more experience with solely UI work. Creating static wireframes and leaving documentation in the files was also new to me, as I've previously been involved with developer handoff or even directly presented my work to stakeholders. While at CloudSaver, I was challenged to design quickly, iterate constantly, and be open to scraping entire designs because of requirement changes. It helped me grow into a better, more flexible designer capable of adapting on the fly and thriving under deadline.
