Social Leap

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.

ROLE

Web + UI/UX Designer

SERVICES

Web Design, Design System

TOOLS

Figma, WordPress

MISSION

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.

Design Problem
How might we integrate Whatsapp into the sales funnel and improve lead conversion?
CONSTRAINTS
Short Timeline

3 weeks to build the website and create a scrappy Design System.

Limited Tech Stack

WordPress + Elementor were used to build the site. No front-end/backend developers were involved in this project.

Basic Hosting Server

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

Iman Nazri
Iman

Web + UI/UX Designer

Fawwaz

Brand Designer

Afifah

Content Copywriter

✷ RESEARCH
RESEARCH

Interviews revealed opportunities to improve lead conversion rate

Client Interview

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.

Customer Persona

Pinpoint their customers behavior with Customer Persona. Also, I will A/B test whether VideoAsk or Yezza would yield a better conversion rate.

Customer Persona

Social Leap's Customer Persona

Key Findings

Customer's preference to Whatsapp

From the interview I had with the client, he says all his 22 customers prefers Whatsapp as the main messaging platform.

Similar Customer Behavior

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.

✷ IDEATE
IDEATION

Sitemap & Wireframes

Sitemap

Social Leap's sitemap created with Miro.
Wireframe

Wireframe

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.

✷ FINAL OUTCOME

Final Outcome

SIMPLIFIED DESIGN SYSTEM

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.

The initial Brand Guideline serves as a starting point for the creation of the Design System
Social Leap simplified Design System
FINAL DESIGN

Learnings

1. Design Decision Matters

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.

2. Design System - Start Small

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.

3. Tech Limitations

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.

Back to top