Ayoconnect is Indonesia’s Open Bill Network that links utilities, telcos, aggregators, publishers, and other bill providers with consumer-facing platforms and financial Institutions. Through this network, Ayoconnect provides various value-added solutions for both bill providers and channel partners
Ayoconnect is an expanding brand which has originated from Ayopop. Ayopop itself is primarily a B2C multi-payment mobile application enabling users to pay their utility bills, purchase phone credits, and data packs.
Over the last year, Ayopop saw a large opportunity in a parallel B2B business model, where they would make their wide range of product assortments open for partners to integrate within their own mobile platforms. As they went forward to expand their business to B2B, the brand also had to transition from being targeted towards mass consumers to business users.
Having worked closely with the brand for over 4 years, Flolab was approached to work on the Ayoconnect branding because of our deep understanding of the brand’s vision, the Ayoconnect platform, and its offerings.
When transforming into a new brand from a previously recognized one, name recognition and preservation of brand equity become important factors that need to be taken into consideration. Ayopop has been around for a few years now, so they had to maintain brand recognition. But at the same time, they needed a fresh new approach and a name due to a new offering and a new consumer base. All of that led to the origin of Ayoconnect.
The ‘ayopop’ brand name and visual style were designed with the B2C consumer in mind. The “Ayo” from the original brand name was maintained to keep consistency with the new business offering. The business platform was named “Ayoconnect”, which is a reflection of the platform that connects channel partners to the billers via Ayoconnect.
Here are a few things that the business wanted to achieve with the new approach:
According to a rebranding study by the Grossbauer Group, new customers are attracted to the new stories brands are telling.
With that let’s jump into the brand design process…
If we have a look at some similar products in the B2B or payment space like Salesforce, LinkedIn, DocuSign, Mastercard or Stripe, we’ll notice all of them having a logotype with rounded fonts or clean sans-serif fonts with well-spaced out characters that give these brands a characterized ‘professional’ look.
Iteration 1A: Rounded cursive typography in italics with dots at the end of the logotype to represent ‘connections’ from partners to billers via the ayoconnect platform. The “O” and “C” characters were connected to each other with a ‘connection cable’ — also a signifier of the brand being a ‘tech enabler’.
Iteration 1B: Sans-serif font use with a semi-cursive typography, to give a clean and modern look in order to achieve a more Professional look for the brand.
In order to keep the Ayoconnect brand’s visuals within a familiar space, we decided to go with the clean and professional logotype explored in Iteration 1B. However, the ‘connection’ aspect was not as evident in the logotype as we needed it to be, so instead, we tried explorations to visualize ‘Connection’ with a logomark in the second iteration.
Dropping the cursive fonts completely, we decided the keep the logotype clean and simple with a sans-serif font. This way the logotype took care of the ‘professional’ brand characteristic that we were trying to achieve. We now started focusing on bringing in the ‘connection’ aspect with the logomark.
To conceptualize the logomark, we used the good ol’ pencil and started by visualizing ideas on paper to help us iterate quickly. This approach allowed us to create a wide range of concepts in a short time.
This exercise was definitely a lot of fun. A few ideas like ‘connected dots’, ‘links’ were used to represent ‘connections’ while also trying to integrate the letter ‘A’ with the visualizations.
Iteration 2A: Exploration to incorporate connecting dots and the letter ‘A’ in the logomark.
Iteration 2B: Exploration to incorporate a link to illustrate ‘connection’ in the logomark.
Iteration 2C & 2D: Incorporating an ‘A’ along with a circle to illustrate ‘seamless connections’ while the 3 dots represent the three parties involved: Ayoconnect + Partners + Billers.
From all four choices given at the end of the second iteration, 2C was the final choice! This version checked all the boxes of what the Ayoconnect brand wanted to represent. The three dots represent Ayoconnect + Billers + Partners and a seamless connection between all three parties; while also incorporating an abstract ‘A’ in the logomark.
While designing the logo, we kept our focus only on a black and white version, without introducing any colors in the exploration phase as they tend to take away from the core concept. Once the logo was finalized, the design team at Ayoconnect explored colors in shades on blue. Blue was the color of choice because it represents trust, maturity, security, and professionalism.
As a part of the branding exercise, we also designed a website for Ayoconnect. The primary goal of this website was to introduce what Ayoconnect is and its primary features. We worked closely with Founder & CEO of Ayoconnect, Jakob Rost, in order to build and design for the website’s structure and content.
Working on the logo design for Ayoconnect made it relatively easier for us to visualize the landing page with some core visual elements. We thought it would be a good idea to keep the ‘connection’ theme going on the website as well and used “connecting dots” as the primary visual pattern. We also employed Big and Bold typography with a generous amount of white space to make the overall look bold and impactful.
While we understand that we needed to maintain a professional look for the website, we also didn’t want it to turn out to feel extremely serious or boring. To make better visualizations, we collaborated with Wulan Maulani, Graphic Designer at Ayoconnect to work on Illustrations in order to help brighten up the website. The illustrations will highlight Ayoconnect’s features to make the content more relatable for the visitor.
Since there were several product categories and integrations that needed to be highlighted on the website, we designed separate category pages for each industry service offered (Utilities, Telco, Financial Institutions, Education, etc.) as well as for each type of integration solution (Transaction API, Biller Open API, Bill Reminder System, Smart Payments, etc.). This site architecture would also help with the site’s SEO.
All pages had a hero image with an illustration and tagline which helped keep consistency across the website. To differentiate between ‘Solution’ and ‘Industries’ pages, the ‘Solutions’ pages used a plain white background and all original brand colors, while ‘Industries’ pages used secondary colors for each different type of industry.
The Partner Dashboard which was a part of Ayopop earlier was now one of the solutions offered by Ayoconnect. Which meant it needed a design refresh with the new Ayoconnect branding and color palette. With deep blue being the primary brand color, it helps the dashboard with a more professional look and establishes a feeling of security and trust for Ayoconnect’s partners.
The process of switching brand colors was super easy for us, thanks to Sketch’s built-in Find And Replace Color feature. There was just one big structural change with the website’s usability: transitioning to a side nav. We did this so we have more room for navigation flexibility. In the future, there might be more features added to the dashboard as the business grows and expands, which required us to keep the navigation structure modular and flexible. This was hard to achieve with a top navigation since that limits the number of elements that can be displayed upfront and also takes away substantial real estate from the main content on the page.
Rebrands bring about a positive impact on employees as well. Soon after the logo was finalized, it was exciting for the entire team at Ayoconnect to quickly see the new brand being reflected across the office: new signages, name tags, business cards, and more.
All of this coupled with mentions of Ayoconnect in the media, brought about employee pride, professionalism and motivation towards providing premium services for their business partners.
Flolab is primarily a Product and UX Design Studio. We work with our clients to design the user experience for digital products. We were given the opportunity to work on the new brand and logo because we have a deep understanding of the brand and it’s vision and having worked closely with the client for the past few years.
Whether it’s UX design or logo design, we don’t stray away from the core design process. It starts with a ‘discovery’ phase of understanding the company’s goals and objectives, the target user, and their motivations, and only then do we jump into the ‘defining’ phase of the design process. The define phase goes through multiple iterations before narrowing down on one concept.
The most challenging part of working on this branding project was representing ‘connections’ visually throughout the brand. All our iterations revolved around nailing down that aspect of the brand. And once we were able to draw these connections between all the parties involved, that’s when we finally nailed down the brand visually as well as conceptually.
Working closely with the client in order to really understand their requirements in-depth, helped us come up with a brand that checked all the boxes.
This project was done in close collaboration with Ayoconnect’s founders as well as their graphic design team. Do have a look around ayoconnect.id website to see the designs live in action.
Soon after the rebrand, Ayoconnect also received ample media mentions for their latest pre-series B funding round.
***
If you’re looking to build a mobile app or website, or just want to talk about design, reach out to us to have a chat.
***
.png)
