Creating Magic in Digital Spaces
F5 Cloud Services
F5 Cloud Services is F5 Networks’ first cloud-based SaaS product that delivers app server security solutions to businesses. From the ground up to launch, I worked as their lead UI designer in F5 Cloud Services’ start-up incubation team.
The main focus of the visual requirements was to create a modern interface that elevated and modernized the company’s reputation from an old-school physical server box company to an innovative cloud-based security solution. We decided to scrap the previous UI design from the company’s older products, due to their visual reputation being negative, and start fresh with references from the marketing team’s latest rebrand of the promotional website. Audits were also conducted from our competitors and other non-B2B innovative companies so we could see the visual UI battlefield that Cloud Services would compete in.
Unlike the expert knowledge you needed to utilize F5’s previous products, the UX team and I strived for our service to be approachable and intuitive to all skill levels. Based on user feedback from the previous products, we got rid of terms only used within our company’s products and restructured flows that weren’t linear.
Accessibility for our users was a huge consideration in every decision I made when creating elements for the design system. Every element was color contrast checked, color palettes for data visuals were passed for deuteranopia, and passing WCAG AA requirements was always a priority.
I was hired on several months after the developers started to code the service, using the pre-existing UI, from the framework they selected. The challenge was to get the developers to align with the in-progress design system for beta release—while I was also working with UX to figure out which components we needed to even design for. Our solution was to create page templates so we weren’t designing redundant elements on a tight deadline.
Consistency, scalability, accessibility, and purposefulness were our guiding principles for the design system. During the process of creating the design system, specifications were documented in addition to continuously looping in developers for technical feedback.
For efficiency, the design system was created in Sketch libraries, to enable multiple UX designers to work from it, and in InVision for the developers. Originally the design system was just created for my team, but since the company as whole was starting to create other cloud-based services, I lead tutorial workshops to teach other UX teams how to utilize our resources and how they could contribute to it. Thanks to our consideration for scalability from the beginning, we were able to confidently share our design system to the rest of the company.
A design system is a living product that scales and changes regularly. By utilizing a design system early on it allowed our service to meet tight deadlines, have a single source of truth that upheld to its guiding principles, and was sharable within the company.