How to rebrand a website to resonate with the company's new strategic focus and audience?

A Shift in Strategic Focus

CreditBook's strategic focus was evolving from consumer financial products to embedded finance. The company had initially concentrated on its first product, the digital khata, and its original target audience. However, when executives and the sales team engaged with Financial Institutions (FIs) and banks, the existing brand and website no longer resonated with the new direction.

Redefining the Brand

In early 2024, CreditBook kicked off its rebranding journey to align with its new strategic focus. I played a significant role in leading the brainstorming and ideation sessions, helping to define the new brand foundations in color and typography. Once the new brand guidelines were established, the next critical step was to update the website to reflect these changes.

Competitive Analysis

I initiated the process by conducting a comprehensive competitive analysis. I collected screenshots of market competitors' websites, meticulously organizing them and their content section by section with the help of my co-designer, Mariam. This provided a clear overview of industry standards and trends, which served as valuable references throughout the project.

Collaboration and Wireframing

I collaborated closely with the founders, Team Leads, and the Head of Design to outline the structure and content of each webpage. Through extensive ideation and multiple iterations, we finalized the website wireframes and its information architecture. This collaborative approach ensured all stakeholders were aligned and the website would effectively convey the new brand identity.

Visual and Interaction Design

With the wireframes in place, the Head of Design took on content design while I focused on visual and interaction design. This phase took the most time; designing the web pages was far from linear. I often had to return to the wireframes and restructure the layout when stakeholders didn't align. Each web page went through at least 3 iterations.

Driven by competitor analysis, I selectively referenced elements from various websites that resonated with the brand values and visual language. Imagery plays a crucial role in creating engaging landing pages, so I actively collaborated with the brand and people teams to source high-quality visuals. I prioritized consistency in color palette, typography, and layout margins; these fundamental details are what make the overall experience feel cohesive and polished.

For developer handoff, I prepped the Figma workspace by organizing it into three sections: guidelines, web pages, and interactions (e.g. component states), so developers could navigate easily. The revamped website is live at www.creditbook.pk.

A Well-Received Transformation

The entire rebranding process took approximately three months, with an additional two weeks for development. My team and I revealed the new branding and website on 17th May 2024 at the company-wide Townhall meeting. I also designed the invite for the event.

The outcome was extremely well-received during the internal launch. The founders, TLs, employees, and partners all appreciated the efforts and the fresh new look. The transformation is poised to have a positive impact on brand perception and engagement with the new target audience.

Stick to the Fundamentals

This project underscores the importance of a collaborative approach and thorough competitor analysis in rebranding efforts. By aligning the website with the new strategic focus, I was able to create a cohesive and compelling brand presence that resonates with both internal and external stakeholders.

• 1. When designing complex landing pages, the fundamentals of your brand and design practices can help navigate the complexity.
• 2. It's okay to ask for help when you can't figure something out; it's better to be proactive in asking rather than burning time on repeated trial and error.
• 3. Mobile-first isn't always the way to go for landing pages. While there are benefits to this approach, visual design is extremely important here; it's a bit difficult to overcome the design bias when adapting smaller mobile viewport designs to larger web ones. In this case, going desktop first worked better.