About the Client
Cyber Pop-up is a Women Owned, Minority startup that’s on a mission to demystify cybersecurity as a cumbersome and expensive undertaking. They offer on-demand professional services that help businesses become secure and stay safe, and provide freelance cybersecurity experts a way they can earn money and help businesses reduce their risk.
From the user experience side of our work, the greatest challenge we faced was twofold. First, design a back end system (not shown in this project) to work flawlessly for system administrators, cybersecurity freelancers, and customers alike. Second, design a website that communicates the brand offerings and provide a path for customers to sign up for the service.
Working with startups, we’re always mindful that both expediency and efficiency is at the forefront of our efforts. Our goal was to produce a well-designed and thoroughly planned MVP that they could use to start adding customers and growing their business.
Website UX Wireframes & Visual Designs
Designing the website user experience wireframe designs took on a hybrid design model incorporating layout, functionality, imagery, and color. Accomplishing this meant using a real-time collaboration tool allowing individual contributors to perform their portion of the work simultaneously.
The hybrid design model helped us discuss the visual story more efficiently; as we designed the layouts and functionality, the marketing team worked on copywriting, operations refined their processes, and we designed and produced the illustrations.
We wanted the visual design to be a succinct reflection of the brands values, namely that it should feel fun, professional, and engaging. We used their existing color palette, created isometric illustrations, developed an icon library, and used ample whitespace so that the content would be easy to read and clear to understand.
It’s easy to see in the wireframe designs (above) that there are a significant number of illustrations. We decided go with an isometric design because we wanted to provide them with something truly creative, and developed an aesthetic that echoed the technical excellence they deliver to their customers.
We crafted the illustrations to capture the unique marketplace position Cyber Pop-up was aiming for and then worked on developing them into a uniform language that would spark both intrigue and excitement for their product.
Redrawing the Logo
One aspect to the Cyber Pop-up brand identity is that they didn’t have a vector version of their logo in its full lock-up. We took the existing bitmapped version and redrew it so that they could use the vector version at any scale and in a multitude of ways.
Having a vector version of your logo on your website helps that design look exceptionally refined at any size, something that has become more important since there are a lot of screen sizes and resolutions that the logo needs to work.
Afterwards, we produced logo’s in several formats and resolutions so they would work in PowerPoint, Microsoft Word, email signatures, produced vector images for print, did color matching with Pantone, and also produced them for use on dark surfaces.
Original bitmap version
Redrawn vector version
As we were designing the app back end and the website, there was a big priority placed on on-brand iconography. We took all of the icons and placed them into one illustrator document and constructed each one so that they all felt as though they were part of the same family.
User Experience for the App
The most significant part of our 6-month long project working with Cyber Pop-Up, was focused on designing the best possible Minimum Viable Product (MVP) for the platform. The overarching goal was to design an effective platform enabling customers, freelance cybersecurity experts, and administrators to collaborate on implementing a customer’s cybersecurity projects.
Our user experience design efforts helped to further shape some of their operations and internal policies to become more focused on efficiency and helping customers gain peace of mind.
The workflows and wireframe screens we designed helps customers easily subscribe to the Cyber Pop-Up service, purchase cybersecurity projects, schedule work with freelancers, and get started making their business more cyber secure.
The cybersecurity freelancers have they’re own workflow aimed at helping them easily apply to the system, submit cybersecurity credentials for review, become vetted though background checks, and start earning money by working on customers real-world cybersecurity projects.
Administrators have the most complex set of operations, mainly because of the responsibility to set up and manage security projects, vetting and managing cybersecurity freelancers, and making sure customers are receiving quality security measures for their business.
Altogether, designing the MVP meant streamlining our efforts so that the development team could build the platform faster. It also meant cataloging broader ideas and concepts so they could be considered for future innovations to the process and platform.
The effects that our user experience design and strategy had on their business.
We worked in close collaboration with the people at Cyber Pop-up, which truly propelled this project into a great success story.
One aspect we discovered early on with the application back-end, is that our design decisions were having direct impact on company processes and operations. In the long run, it was our combined efforts to communicate, work together, and talk ideas through that truly made this app function better and become a streamlined solution.
We also worked closely with the development team in guiding our steps in what was possible and with what made the most sense for an MVP.
All together, it was efforts of everyone involved that helped produce an extraordinary and efficient system, one that we’re certain will help a lot of companies become more secure, and help those doing the work earn a great income.