my Role
I led the website rebrand of this project following the company identity rebrand as a product designer
TEAM
Team of product designers, visual designers, product illustrators, UX and copywriters, marketing and engineering.
YEAR
2022
TOOLS
Figma, Lottie, Storybook
overview
Part of the Yellow Card's rebrand is with over 1M+ customers with holistic features such as trading crypto and sending money across Africa.
Our team's goal was to rebrand Yellow Card's identity and make updates across all related brand assets (website, socials, app, etc.)
scope
UI/UX, Web Design, Interactive Prototyping, User Research, Visual Design, Design Thinking
kicking things off
The Yellow Card rebrand came at a time when the company has achieved significant milestones, including a $15M Series A fundraise, and also reflects the transformation and strong positioning the company has on the African continent.
But WHY
While our current brand has got us this far, we’re now reaching for the next chapter, so we needed our brand to feel fresh, approachable, and professional. We held an internal, cross-functional workshop to uncover the pain points we had with our existing brand and decided to create a brand that’s diverse, inclusive, young & fresh, yet still exudes sophistication, just like our customers.
Introduction
The goal was not to change any core functionality of the app; it was more to make it more accessible, playful, and inclusive for all customers. This logo reflects playfulness, diversity, and inclusivity. The leaf-like shapes that make up the “Y” and “C” of the logo-mark allude to the idea of growing financial gains, which ties in beautifully to crypto and the vision of financial inclusion for all. During the brand workshop we felt the importance of creating patterns as brand elements, not only to expand our identity but to incorporate an African aesthetic, and this logo allows us to create our own brand elements as patterns, using the logo-mark.
.png)
While changes were made to the logo, brand colors, typefaces, illustrations, and even the tone of voice, looking at the website rebrand shows how it all ties in holistically.
then vs now
We were able to improve on the website on a big scale by refreshing the visual look, speaking more into the brand style and tone of voice, and modernizing and expanding the color palettes. How did we improve the experience and functionality?
- Having a clear header navigation, which makes it easier for customers to find and move around pages
- Expanded more on the product offerings
- Clear and concise CTA buttons with new brands tone of voice through copy
- Better product/visual illustrations to support brand tonality
.png)
.png)
enchanting visitors at first glance
A visible navigation was the easiest choice to make to be able to showcase the features and other important options, including a primary call to action to sign up and use the product.
In the hero section, on the left-hand side, we improved on our copy with an engaging title and subtitle that suitably convey what Yellow Card USPs are and the value we provide. On the right-hand side While leveraging our expanded colour palette, we show a combination of imagery and illustration that invokes our vision: Financial inclusion across Africa.
GETTING CUSTOMERS READY
This section features the steps customers would need to take to get started, getting them ready beforehand as to what they would need to have and do beforehand as well as promoting our value offerings.
For accessibility and in a bid to improve conversion, we added a QR code to engage users to download the app on both on Android and iOS, which helps customers get to more downloads easily.
what yellow card has to offer
This is where the viewers can learn about the different features and products Yellow Card has to offer with active illustrations from the app. Yellow Pay offering to allow sending and receiving money across our supported countries in Africa through the power of crypto. Call to Action leads to the Yellow Pay landing page to learn more.
ARMING OUR CUSTOMERS WITH THE KNOWLEDGE THEY NEED
With the vision statement Financial Inclusion for All and with the increasing rate of crypto adoption across Africa, we have developed resources like the Yellow Card Academy and Yellow Card Blog with a lot of articles and short-form content for just about anyone to learn from and understand, ranging from the basics of what cryptocurrencies are to advanced topics on trading—beginner to advanced levels.
blog
In line with the company’s mission and values; financial inclusion for all—the blog was to be a medium for disseminating knowledge around the financial markets, trends, walk-throughs, etc. We overall made an improvement to the way customers explore blog contents by categorizing and grouping similar blog articles
💡 We have seen more than a 56% increase in user retention from the blog page and have recorded over 80k signups in the database.
.png)
country pages
The country pages was a key area to show our knack for localization and africa-first-centric designs. These pages were created to speak better to the consumer markets and help in pushing more localized contents to these pages. One of the places shown was on the hero section, using custom illustrations that speak more the people in that region.
💡 This rebrand featured well over 30+ pages to be redesigned and refreshed to the new and improved brand identity
.png)
.png)
in conclusion...
This was an overall intriguing challenge, and I'm glad I embarked on it. I gained considerable knowledge about visual harmony and equilibrium. I also discovered the significance of colors in triggering specific emotions and actions. Another aspect I've learned is to articulate my design choices effectively. This highlighted the necessity of justifying every decision. Overall, I give credits credits to my teammates that made this whole rebrand a success across various teams (product, marketing, customer service team, etc.), but the biggest S/O goes to the design team for efficient and effective collaboration amongst each other, brainstorming, sharing, and working together on this project.
.png)