disclaimer 🤚
So, brace yourself for what might seem like a text marathon in this case study. But, hey it's only because I spilled all the beans about the nitty-gritty of revamping the website over a two-month rollercoaster. I don't want to squeeze that epic journey into just two scrolls😉. So let get start🚀
BRIEF
PROBLEM
Decline in User Engagement
The mentioned issues have led to a significant decrease in user engagement, impacting interactions, return visits, and crucial word-of-mouth recommendations for organic growth.
Poor Navigation Structure
Issues have resulted in a notable decline in user engagement, affecting interactions, return visits, and critical word-of-mouth recommendations essential for organic growth.
Lack of Mobile Optimization
The MyCaptain website's lack of mobile optimization is a significant barrier, providing a subpar experience for mobile users, potentially discouraging engagement and course sign-ups.
Outdated Design Aesthetics
The old MyCaptain site has issues with outdated design, navigation, and mobile adaptability, leading to decreased user involvement, course enrollments, and client satisfaction, impacting the organization's growth and industry standing.
GOAL
We aim to revitalize the MyCaptain website by enhancing user engagement, improving aesthetics, and streamlining the user journey. The redesign will focus on the following objectives:
Establishing a Unified Design Language
We aimed to create a unified design system, including consistent typography, color palettes, and component patterns to express our brand identity and enhance user experience.
Optimize Conversion Rates
Implement clear and persuasive call-to-action (CTA) buttons to boost conversion rates by 45% on key landing pages. Integrate user-friendly forms and streamline the process to reduce lead abandonment by 10%.
Integrate Multimedia Content
A static brand is like plain bread without spread—incomplete and unappealing. MyCaptain's motion design centers around a sphere, symbolizing users and animated experiences.
• Incorporate engaging multimedia elements, such as videos, infographics, and interactive features, to enhance user engagement and convey information more effectively.
Increase user interactions with multimedia content by 30% to create a more dynamic and memorable user experience.
IMPACT
Hurray, we unveiled the landing page in Aug, 2023! Due to privacy concerns, I've left out the specific figures for these measures.
As soon as it launched, we instantly observed a 70% bounce rate for our ad, in contrast to the previous site. After 50 days of being live, we experienced a ≈65% decrease in the bounce rate
Bounce rate signifies the percentage of visitors who leave a webpage without interaction. A respectable bounce rate on our landing page, with 65% engagement, indicates relevant, captivating, and easily understood content.
HOW ITS STARTS
Collaborating with the head Product Manager, we launched a design sprint using Miro for remote teamwork. We gathered ideas from competitor brands' landing pages and discussed the aspects we admired.
In a swift collaborative effort, we drafted solutions during our compressed 1 Day mega design sprint due to busy schedules. In a separate session, we established three design guidelines for the landing page, prioritizing how our consumers perceive us as a brand.
After defining our vision statement, we began brainstorming a range of imaginative concepts. At this initial phase, our strategy is to explore a broad array of ideas before narrowing our focus.
Basic doodle drafts
Our mobile-friendly doodle draft features a sleek layout for seamless navigation. Thoughtfully placed doodles not only infuse character but also act as intuitive visual cues, effortlessly guiding users through the website
Wireframe
This is how the early wireframes looked like. On the left, we mapped out the purpose of each section, aligning with our design principles. The primary goal is to convince users to Purchase our course
Some more variation
We subsequently transform these initial concepts into detailed visuals. Experimenting with various hues, forms, and arrangements. However, it seemed disorganized, so we persistently polished these designs.
User testing
To obtain unbiased feedback from potential users, I conducted user tests with 5 individuals outside of MyCaptain using Maze's Survey tool.
This approach aimed to elicit more genuine responses, with the easily accessible survey link designed to capture feedback on the application's design, ease of use, and perceived value.
Analyzing the heatmap revealed 20% of users scroll to the landing page bottom, raising concerns about overlooked elements. Targeted surveys, done anonymously, provided unbiased feedback, confirming users understood the core concept.
Armed with insights, we refined designs for clear messaging, emphasizing MyCaptain's role in driving job-ready programs.
FINAL RESULT
Before and after desiggnnnnnnn
Prior to the revamp, MyCaptain's course offerings lacked emphasis, and the site appeared disorganized. The design vocabulary didn't align with the pro course, failing to adequately convey MyCaptain's unique value proposition.
Here's a detailed walkthrough of the improvements made post-testing.
Strong social Proof
Social proof can be seen throughout the landing page. We've showcase alumini's job transaction that visitors instantly grab attention, real time metrics of total stats from our mentees.
Design System
In MyCaptain's revamp, we introduce the Soul Design system, streamlining reusable components for efficient website building and fostering a developer-friendly environment. The primary objective of Soul's visual design is to enhance the brand's aesthetic through strategic use of images, hues, typography, and other elements.
These visuals aim to evoke emotions like faith, ease, aspiration, and self-assurance in MyCaptain's audience.
Animation
I designed all animations in Lottie format, marking the first use of Lottie animation during my tenure at MyCaptain. I chose Lottie for its fluidity, compact size, and superior performance, contributing to a load time of approximately 2 seconds.
LEARNINGS
We revamped the user persona, quickly testing it on paid ads by adjusting the adset. We also experimented with the new brand identity on channels like YouTube and Instagram, observing a notable spike in clicks, particularly attributed to impactful thumbnails. Additionally, we introduced 13 shapes, derived from user research, aligning them with brand values through iterative testing.
And… That’s a wrap! 🎉
I trust this case study was enlightening and valuable to you all. Should there be any queries, don't hesitate to reach out to me on any social media channel. I'd be more than willing to engage in a conversation with you.