Designing a New Look for a Cloud Infrastructure Startup
opsZero, a cloud infrastructure tech company, wanted to revive their brand, launch a new website, and run a new social media marketing campaign. With only a logo to work from, I created a new design system, brand guidelines, and visual assets for their website and social channels. Learn more about my design process below.
My Roles: Web Design, Web Development, Motion Design, Graphic Design
Website Design
opsZero wanted to build their new site on WordPress. Using design tools like Divi Builder and some custom html and CSS, we were not only able to achieve our design goals, but also save the team’s budget from needing to hire an outside web developer in the future.
-
![]()
Step 1: Background Research
Before starting any design project, I begin with background research. For opsZero, I explored their existing website (see above), logo design files, and competitor brand identity. I spoke with the client about their vision and what kind of first impression they would like to make when prospective customers visit their website.
-
![]()
Step 2: Identifying the Design Direction
After speaking with the client to understand their needs, I did some research and developed a few different mood boards of different design directions we could go in. After a few rounds of back and forth, we finalized the rebrand direction. opsZero’s new brand would reference containers, boxes, hardware, clouds by using fine lines, gradients, glows, and a 3D feel.
-
![]()
Step 3: Design Tests + Feedback
With a clear design direction in mind, I developed some design tests to further create a design system for the client. Since we did not yet have a clear color palette defined, I kept the mockups in black and white in order to keep the focus on composition.
-
![]()
Step 4: Creating a Color Palette
opsZero already had defined a rich blue as their brand identity, but I wanted to expand their color palette to have a more dynamic feel. We decided on a secondary sky blue and a blue gradient to add to their brand identity.
-
![]()
Step 5: Color Design Tests
With a color palette finalized and a clearly defined design direction, I started developing design tests in color. I started with the hero image that would live on the home page of the website, and then branched out to secondary images.
-
![]()
Step 6: Final Exports + Site Design
After incorporating client feedback, we finalized the key designs that would define opsZero’s brand moving forward. Simultaneously, we started on the site design using Divi Builder on WordPress to create all of the web pages and templates.
-
![]()
Step 7: Additional Design Assets
To complete opsZero’s rebrand, I redesigned all of their existing documentation, such as decks and one sheets, to follow their new brand guidelines and celebrate their new brand identity.
Mockup of final opsZero website
Selection of design assets
Motion Design
opsZero wanted to create a series of animations to help promote their brand on LinkedIn. In weekly sprint meetings, I worked with the sales team to figure out the best content strategy. I then worked in Adobe Illustrator and After Effects to quickly turn around multiple animations a week. Check out a selection of animations from the campaign below or the entire series on opsZero’s LinkedIn page.