Social Leap – previously known as ‘Mukmin Digital’, are rebranding towards a new business direction. Previously, the biggest pain point they had was capturing quality leads from their website.
On the other hand, in efforts to scale up, the client – Amirul, hired me to rework the brand’s digital experience.
Web + UI/UX Designer
Web Design, Design System
Optimize for lead conversion and build a Design System for Social Leap
One of the biggest challenges we faced was capturing leads on the website. The client wanted to integrate Whatsapp into his sales funnel, as his customer demographics prefers Whatsapp to reach out to him.
Also, we wanted to visually refresh Social Leap that matches the client’s business direction. Design-wise, I proposed to evolve the brand guideline into a simplified design system.
3 weeks to build the website and create a scrappy Design System.
WordPress + Elementor were used to build the site. No front-end/backend developers were involved in this project.
The site is hosted on a basic shared server. I have to keep the visuals engaging while adhering to web UX’s best practices.
Meet the Team
Web + UI/UX Designer
Interviews revealed opportunities to improve lead conversion rate
I interviewed my client through a few Zoom/Around sessions. Not only that I learned about his business nature, but also I learned about his clients demographics and identify which design direction + decision works best.
Pinpoint their customers behavior with Customer Persona. Also, I will A/B test whether VideoAsk or Yezza would yield a better conversion rate.
From the interview I had with the client, he says all his 22 customers prefers Whatsapp as the main messaging platform.
The client also said, majority of his leads have similar behaviour as his existing customers.
Specifically, they tend to browse for digital marketing agencies on their phones and would prefer to get in touch via Whatsapp, instead of filling up contact forms.
Sitemap & Wireframes
I prototyped a simple wireframe for the Social Leap’s homepage. I structured the page into several sections and implemented design flows that are common in SaaS/Agency marketing pages.
The brand guideline created by Fawwaz serves as a starting point for the creation of a simplified design system. I then evolve it into a Design System that is scrappy and extendable for Social Leap.
I studied how Sharma Brands design their web pages and the UX behind it. I localized and iterate the design to match Social Leap’s customer demographic, as well as their browsing behaviour.
Other than that, the choice to settle with Yezza as the lead capturing tool works wonders with Social Leap, as the app integrates innately with Whatsapp.
Hence, it improved Social Leap’s conversion by 22% and quality lead capture.
Social Leap’s design handbook (provided by the Brand Designer) was the starting point for the design system. I kept things simple by creating repeatable patterns that are reusable.
On the website, I designed Sections and Templates in Elementor to keep the design as consistent as possible.
For this project, I got to collaborate with a Brand Designer and a Content Writer to form a design system that covers the imagery and language aspect.
With the absence of a front-end web developer, some design ideas had to be simplified and iterated in the development process. I have to make do with what I have with Elementor to deliver the project.
Other than that, the website is hosted on a basic shared hosting server. The challenge is to load the site fast, yet engages site visitors.