Want to know more about how we can help?Make anoremail: info@instance.studioemail us.

LeapFrog Investments

Case Study

We helped LeapFrog Investments relaunch their brand and establish a new design system along with digital & print strategies for a fresh step forward in 2024.

LeapFrog Annual Report - Website
Test test test test
header case study
branding-strategy.desktop
Mobility Report
Test 2

Your new design partner

instance takes care of all your Identity, UX, Digital & Print design needs so you can focus on what makes your business great.

Phone preview
Precisely designed UX for all devices.
Impact Results
Design system use for graphs in print.
pasarpolis
Financial Portfolio: Pasarpolis.
Mobility Report
Powering an affordable EV revolution in emerging Asia.

The Results:

+42%

New branding & microsite campaigning strategies boosted website enquiries by more than 42.6%.

knight

+58%

A redesigned user experience and data driven, KPI orientated approach saw a substantial increase in mobile device time on site.

users

-36%

Our newly developed design system increased the efficiency of print design work, reducing costs by more than 36.1%.

Dollars Symbol

The Challenge

Project Objectives

LeapFrog invests in extraordinary businesses in Asia and Africa, partnering with their leaders to achieve leaps of growth, profitability and impact. They have reached 342 million people through their companies, supporting 160,000 jobs & livelihoods across 30 countries since their inception and use Instance as their primary design partner. In 2024, LeapFrog decided it was time for a brand revolution across all mediums to improve their marketability, lead generation & conversions, and ultimately increase their impact worldwide.

Branding & Design

  • Establish a new brand strategy, identity and brandbook.
  • Establish a design system that can be used across both digital and print.
  • Improve brand equity and online reach.


Digital, UX, Web Design

  • Improve site architecture and UX to enable more effective browsing.
  • Build an easy to use resources & news section with filtering & search.
  • Establish & improve SEO foundations to increase search engine traffic.
  • Create a repeatable & efficient way to process & display data as graphs & tables.


Printed Collateral

  • Create print guidelines for faster and more efficient production of print collateral.
  • Integrate seamlessly with the digital production and display of data as graphs & tables.

LeapFrog connects investors to high-growth companies delivering essential services to 4 billion emerging consumers on the rise.

The Approach

Branding & Design

LeapFrog Investment landing page
We helped LeapFrog define a new way to utilise their brand and build brand recognition. (Homepage: https://leapfroginvest.com)

LeapFrog came to us with big ideas, big energy and a desire to reimagine their brand. With such huge success over the last 10 years in scaling their portfolio and creating real world impact, it was time for their branding and assets to reflect that maturity. LeapFrog required an evolution in how they communicated to prospective investors as well as their general communication, and were looking for efficiency improvements in how they handled their assets across digital and print, as well as social media and events.

Instance established a new branding strategy for LeapFrog that could be implemented across all their communication channels, with a clear method on how branding should be executed, a brandbook and design system for how their identity should (and should not) be used, typography treatments and scaling for all purposes, as well as colour, finishing, and animation.

Services:

  • Branding
  • Graphic Design
  • Annual Reports
  • Print Collateral

A new design system

Design systems are often the unsung heroes of the products we use every day—from mobile apps and websites to the print design that surrounds us. They serve as the DNA for design, encoding the principles and elements that define the very experience users interact with. Colors and icons convey meaning, buttons are implemented with a consistent size and shape, and language is clear and understandable. Without a design system, you risk your users experiencing inconsistency, confusion, and a feeling of brand dilution, or frustration.

We developed a new design system for LeapFrog that could be applied to all existing and future assets, ensuring a clear set of rules were defined, organised and collated in a structured and usable manner for any designer to use. Clear instructions for brand treatments, logo, typopgraphy, photography and graphs were produced to create the ultimate resource for LeapFrog.

LeapFrog Investments Styleguide
A design system was developed to structure how LeapFrog's new identity is executed across all mediums.

Accessible & efficient data visualisation

We worked closely with LeapFrog to define a new system of visual communication to present data insights in a more accessible manner, appealing to a wider audience while also reducing production and design time needed for updates. This resulted in the definition of new formats of data visualisation as interactive graphs & charts that can efficiently be reproduced for Print, Video and general advertising. The benefits of this new structured and optimised approach is twofold; LeapFrog are able to easily communicate data via effective formats across all mediums, while also and giving their audience a more accessible format to consume.

LeapFrog Website Screenshots
Interactive graphs developed for screens can now be made 'print ready' efficiently and conveniently.

+22%

Engagement

Users began to interact with LeapFrog's content after the design refresh.

The Approach

Digital, UX, Web Design

LeapFrog Website Screenshots
Screenshots from LeapFrog Investments website - https://leapfroginvest.com

Web design, web development, campaign microsites

We empowered LeapFrog to harness their new brand identity by building a flexible and powerful website that can be used to both communicate who LeapFrog are, their services and their differences in a competitive market, as well as support their marketing needs via rapidly developed campaign microsites.

We chose Wordpress as the CMS for LeapFrog as the project was heavily leaning towards written content creation - we created a handmade & bespoke flexible page builder that LeapFrog could utilise to leverage the website in multiple ways, from simple content writing such as articles & press releases, to rich content editing such as case studies and portfolio pages. The scalable system we created allows us to add and remove components in the future, ensuring the website remains effective, performant and easy to use.

Multiple times a year LeapFrog will run marketing campaigns that require something more unique such as their yearly Impact report (impact2023.leapfroginvest.com). For these more complex requirements we developed a campaign microsite tool using Next.js that allowed LeapFrog to rapidly produce marketing material and lower their per year costs. A custom, interactive communication tool for their online marketing channel and boost engagement and leads.

Services:

  • UX Design
  • Web Design
  • Web Development
LeapFrog Website Screenshots
HealthifyMe (https://leapfroginvest.com/company/healthifyme), Redcliffe Labs (https://leapfroginvest.com/company/redcliffe-lifetech)

A precise mobile experience

As of 2024 more than 50% of traffic is mobile based so supporting smaller screens is not just important, but essential. Your digital products must feature an effective user experience designed specifically for the different audience and the limitations of their device.

We utilised intelligent development practices to enable the same content, imagery and video scaled precisely to mobile phones and other devices, while in depth and conversion focused User Experience design was used to ensure interactivity was intuitive and content discovery was seamless. We coupled this with detailed analytics to continually revisit how users were using the website to regularly make ongoing improvements to boost conversions even further.

Mobile Responsive
Each component scales intelligently to all devices sizes, including mobile.
LeapFrog Website Screenshots (mobile grid)
Beautiful and effective mobile design was a focus for LeapFrog.

Easy to manage & discover resources with effective UX design

An important challenge to solve with the new website design was the consolidation and organisation of LeapFrog's many resources, articles, press releases and case studies. The resources needed to be convenient to manage by LeapFrog and easily discovered for their users.

We assisted LeapFrog in establishing a centralised resource repository that could be used internally by their team that also acted as a datapoint for the website, marketing campaigns and any future applications. This was coupled with a new, intuitive and easy to use interface developed in JavaScript featuring search and categorical filtering and supporting both internal and external links.

Insights and updates
Insights & Updates resource archive - https://leapfroginvest.com/insights-updates

+67%

Mobile Users

More than half of LeapFrog's audience used a mobile device, signifying the importance of a focused mobile design focus.

The Approach

Printed Material

Mobility Report
Art direction was built around assets that could be used on both screen and print.

How we utilised the new design system to increase efficiency

LeapFrog produces print material throughout the year such as yearly Impact Results reports, Mobility Reports and a Health & Wealth Index. Each document requires article design, graphic design, data visualisation via charts and graphs as well as photography.

We were able to utilise the design system we developed to boost efficiency and make the production and design of these documents more cost effective for LeapFrog, allowing them to produce more and produce more often.

Services:

  • Graphic Design
  • Article Design
  • Campaigns
  • Marketing
LeapFrog Mobility Report
Powering an affordable EV revolution in emerging Asia, Mobility Report 2024
LeapFrog Annual Report
Impact and Investment Results 2023

Data visualisation: design once, deploy everywhere

Graphs & charts are notoriously difficult to produce in a way that is compatible with both print and screen. To solve this we developed a vector based graph building solution that enabled exporting of digital graphs & charts to a print ready versions, while maintaining editability and detailed customisation. This allowed us to reproduce each graph rapidly and scale up for print, adjust colour, font-size and key details ready for production more than 2x faster than previously possible.


Similar to use of the design system, this data visualisation solution allowed LeapFrog to spend more time on the things that matter, their content, and to produce resources faster and more regularly than before.

-36%

Less time & costs

Using the established design system we reduced time to print and production costs by 36.1%

+2.5x

Faster to print

Using our graph building tool, LeapFrog was able to be print ready faster and more accurately than before.

Mobile responsive

Say hello and find out how we can help!

About instance.

Instance is a full service design agency. We design & build websites, apps and e-commerce solutions as well as develop identity, branding & print strategies for social enterprises, nonprofits and startups, as well as small and large businesses. We cater to all types of clients throughout Europe and Australia with offices in each, and our reach is growing every year. Either working directly in partnership with clients or collaborating with amazing design studios, we work in a flexible and dedicated style that evolves to fit your team’s needs.

What we do.

Through consultation, workshops, and research, we will build an understanding of your business, your current and future goals, vision and objectives. Market research and User profiles are used to build a design, development & content strategy, as we roadmap your product and collaborate to bring our vision to life with a UI/UX design strategy that aims to engage your users and gain conversions. Building upon a clearly defined strategy we wireframe and iteratively prototype before moving to design. Through collaboration, ongoing feedback and review phases, an initial product design is born.