01.
Leapyear
LeapYear is the world's first platform for differentially private reporting, analytics and machine learning.
Brief
KNI was hired for a complete site overhaul and moderate rebrand of Leapyear in 2019.
My Role
I was the lead designer for this project tasked with discovering Leapyear's new visual identity and site design through client meetings and live wireframing sessions.
Outcome
Leapyear successfully launched this site and continued to use KNI as its agency of record for marketing collateral and sales decks.
01.
competition
First, I researched the client's competitors to better understand the environment they exist in. Leapyear's primary competitor is Palantir, a software company that specializes in big data analytics.
02.
Existing Lander
Most clients arrive with some degree of original content. Leapyear's existing lander gave a brief overview of the company and a functionality guide to its software. The look and feel relied on shades of blue and abstract shapes. These shapes served as a visual representation of machine learning. There were no technical diagrams.
The information was loosely organized with no clear call to action.
The information was loosely organized with no clear call to action.
03.
user personas
Leapyear provided five user personas to help KNI understand who would most likely interact with the new site. These personas lead to the discovery of three primary selling points for leapyear's software and ultimately the focal point of the homepage.
- Breaking data silos
- Third party data
- Access to data markets
04.
wireframing
After establishing the three most important uses cases to highlight and formulating an information architecture I began to wireframe the homepage along with the rest of the site.
05.
Graphic Concepts: Round 1
Leapyear, along with most software companies, present a unique visual challenge in that the subject matter is often complex. These visuals need to succeed in simplifying multifactorial ideas. I sat down with Leapyear engineers and marketing managers to both mood board aesthetics and create napkin sketches of high level concepts.
06.
Client Mood Boarding: Look and Feel
In an effort to distance itself from competitors, Leapyear requested isometric designs with significant color pops. It was important that graphics felt somewhat "elementary" as opposed to overly designed. The messaging for software capable of accessing private data needs to be trustworthy and upfront. Potential customers expect zero ambiguity with visuals.
07.
Logo Revisions
Despite our recommendations, Leapyear had no interest in updating its logomark. We suggested cleaning up the typeface and moved on from there.
08.
populating wireframes
Once Leapyear signed off on our 2nd round of wireframes I began to populate the pages with actual graphics and copy. This involved multiple rounds and iterations with constant client feedback to ensure that we were headed in the right direction.
09.
Client Feedback
The design process is never without complication. Often team members on the client side will have varying opinions. It’s a designers responsibility to remain undeterred by change and to deliver a final product that satisfies all team members. At this stage in the process Leapyear decided that the graphics were too elementary, and that they needed to appear more sophisticated. Leapyear provide this diagram as a starting point.
10.
GRAPHIC CONCEPTS: ROUND 2
In short, the Leapyear diagram attempts to explain the benefits of their product in one illustration. We decide that a before and after, interactive graphic would provide the best experience for users. I provided a number of examples seen below with a more sophisticated style as requested.
11.
Final Design
After a considerable amount of back and forth, we landed on a spherical scroll animation. Leapyear felt that a “data sphere” best represented the secret sauce of their software. This animation shows how scattered and broken data elements become useful with the help of Leapyear.
12.
Product Page
With the success of the homepage animation, Leapyear decided that the product page needed the support of an animation as well. This animation highlights the 5 steps of differential privacy.
13.
Collateral Design Work
After completing the site, Leapyear kept KNI as an agency of record to work on ebooks, sales decks, and additional marketing collateral. Below are just a few examples of designs I created for them.
14.
Conclusion
Leapyear was a phenomenal client to work with and presented a unique opportunity to design highly complex graphics. In the end we were able to produce a site that satisfied both the client and future customers.
*Links to web archive as design edits I am not responsible for were made.
Next Project
Design Index