Case Study


After the successful update of the website's navigation process for Learnerbly, they approached Kodal again with a new task to apply their new brand across their platform. The overall goal was to make their website fit with their new exciting image while making the user journeys more simple and intuitive. The rebranding was already done by Rooster Punk, so Kodal just needed to implement the changes digitally.

Learnerbly homepage


Learnerbly work with organisations to create a progressive learning culture that empowers their people to own their development, guides them towards the best learning opportunities, and supports them in applying their knowledge. They create a culture where people can grow and develop. More practically, that means that they collaborate on fostering an environment where everyone can share thoughts, celebrate successes, make mistakes and learn from them.


Our goal was to apply new branding developed by Rooster Punk onto the Learnerbly website and evolve it in a functional way. While some content could be reused from the existing site, some pages had to be created from scratch, and all layouts had to be changed to fit the new brand image. In addition, some of the existing pages had to be combined to create new and clear landing pages in order to simplify the user experience. Finally, we were to update the existing navigation to extend it to all new areas of the brand new site.




We have worked with Learnerbly and their old brand for several years. When Learnerbly started updating their brand and identity with London based agency Rooster Punk, they wanted our opinion on how the brand could apply the brand update to their digital platforms.

Initially, we spoke with the team at Learnerbly about changing the site structure to bring existing pages together to clarify their sitemap. This would help users to easily find what they needed. We got access to the research data, obtained using analytics, heat maps, and A/B testing. This shows how users interacted with certain pages giving us a clear idea of which content on the current site was engaging users.


We started by designing a new sitemap that showed which pages would use existing content and which would be new. This sitemap helped us to plan our time effectively and keep a log of our progress.


We went straight into creating high fidelity mockups using Figma for this project, starting with the homepage. After a few iterations of the homepage and feedback from Learnerbly, we developed a style that we could apply through the whole website design. We made sure we included styles and areas for content that could be reused and repurposed throughout the site. We created the designs in this way to make the process of creating new pages easier, and to reduce overall development time.

Following the brief and the new company brand provided by Rooster Punk, we applied the new design elements to both new and existing content. The design included both desktop and mobile devices to make sure the website would be responsive and look great on any device.

Learnerblymockup iphone


Following the brief and mockups, our development team implemented a responsive, pixel perfect result using Webflow, a platform that Learnerbly is currently using. Following development, our design team joined our dev specialists to provide Quality Assurance (QA) testing to ensure the completed website precisely matches the brief. After the website passed all QA tests, we handed it over to Learnerbly for review, additional QA testing, and consequent launch.


Learnerbly continues to grow and expand the content on their website. We continue to support their team with any design and development changes they need on a retainer basis.


Following the brand refresh, Learnerbly now has an exciting, consistent look across their digital platforms, including their website. We helped them convert their new branding concept into a usable digital brand. This toolkit will enable Learnerbly to create new content faster and build its online presence.

Learnerbly our mission