Crafting a timeless outline through hand-drawn illustrations.
Establishing a distinctive appearance with a branded essence for the company.
Problem statement
Primarily, product cards contribute to an overall sense of emptiness in the application. The lack of personality is evident in the overall user experience, contributing to a flat feel, particularly due to the absence of imagery.
This is especially noticeable in product descriptions, where the use of screenshots from the application itself fails to entice users to click through or pique their curiosity.
Objective
Establish a framework for visualizing illustrations for the Zerocopter brand as a whole and their usage throughout the application.
The illustration set should convey a cohesive series, depicting metaphorical stories while captivating the user’s curiosity. They should be versatile enough to be used in context or stand alone for marketing purposes as well.
Color usage
Before delving into the illustration style, I explored methods to create a cohesive set of illustrations. I began by establishing the foundational aspect of color.
The primary colors of the application and Zerocopter brand served as the basis, namely warm yellow and pale blue. To introduce a natural contrast to these colors, I incorporated Ice grey, which is also utilized within the application, promoting harmony and consistency in both the application and its visuals to align with the brand.
The colors are organized on a scale with increments of 20 to provide ample contrast and options. The larger increments are implemented to ensure the illustrations maintain balance without an overwhelming array of choices.
Sketching phase
While interviewing several Zerocopter employees and inquiring about their thoughts on the products, I began an initial sketch to ascertain the direction and visualize the aspects associated with each product. After completion, I will present those sketches to the employees.
The above sketches are the outcome derived from the keywords gathered during the design session and employee interviews. When presenting the initial sketches, everyone expressed enthusiasm and felt that these would effectively convey the intended message.
Illustrations overview
When viewed together, the illustrations create a narrative throughout the application. The brand colors and styles are incorporated to complete its brand identity.
Although these elements collectively form the story, each illustration can be disassembled, and smaller elements can be utilized within the UI to represent specific steps in the user experience.
Dedicated hacker time
Dedicated Hacker Time, a product that provides hacker insights on an hourly rate, represents a strategic shift in the online store. It facilitates the connection between hackers and customers for swift results.
In this context, my goal was to illustrate the link between hackers and customers, with Zerocopter acting as the intermediary—the missing puzzle piece that binds partnerships together to solve problems.
Recon services
Recon Services are often considered the starting point in digital security. Hackers conduct a comprehensive assessment of your application and its assets to evaluate the situation.
In a way, hackers have a helicopter view of your application, scanning the surface and gathering assets and intelligence on how it’s built and connected to the internet—hence the analogy of a helicopter scanning buildings.
Bug bounty service
Bug Bounty is a product that allows customers to initiate a program with a scope narrative. Based on the defined scope and assets, hackers attempt to discover vulnerabilities within that scope to earn bounty rewards in the form of payment.
To visualize the Bug Bounty flow, my focus was on the customer side. The process comprises four stages: Inventory, Baseline, Deepdive, and Continuous. These stages are depicted around a Zerocopter T-shirt, symbolizing an endless circle moving upward and showcasing security improvements.
Membership
Membership represents another product pivot in the online store. Customers becoming members gain access to the vulnerability management system.
This can be seen as a partnership between the customer and Zerocopter. Members receive preferential treatment due to improved access, symbolized by the handshake.
Conversing with hackers
A notable feature of the platform is the ability to network and chat with hackers globally. While hackers inspect your application for vulnerabilities, you can actively engage in dialogue.
I aimed to showcase these elements together, emphasizing a sense of protection while a hacker inspects your assets, all while actively participating in discussions about vulnerabilities.
Coordinated vulnerability disclosure
Coordinated Vulnerability Disclosure follows a format endorsed by European law, founded and directed by one of the Zerocopter employees. It allows users to direct hackers to a designated place for reporting vulnerabilities.
This program is often featured on the customer’s website, providing hackers with a clear channel to report vulnerabilities and often being rewarded with merchandise.
Network
The Zerocopter platform is founded and built around a network of hackers, with customers utilizing the service. With hundreds of hackers active worldwide.
I aimed to visualize Zerocopter as the cornerstone, connected to hackers and customers (depicted as yellow dots) forming the Zerocopter network as a whole.
Additional work
While most of the work has been utilized as a digital product, either for the application or marketing purposes, the question arose as to whether I could also provide branded material for the office.
Shown above is the result of a poster design I created for the office, instilling a sense of urgency for hackers and building on the pillars of the illustrative work.
