Research & Discovery

Due to the nature of this being a merger, during the initial branding phase, I collaborated with both the Credly and Pearson stakeholders to identify what elements of each brand needed to be included in the new Credly branding moving forward. I reviewed both the Person and Credly brand style guides, determining which elements to retain and which to remove based off of the client’s feedback and word association exercises. 

As a result, we focused on creating a few design directions that still felt true to the existing Credly brand by keeping elements such as button styles, heading typeface, and graphical elements. We then successfully updated other key elements to synchronize them with the Pearson brand such as the body typeface, color pallet, and icon style. The team was then able to select one of the vignettes which we would use to move forward with the full design system and pages build out. Overall, our collaborative efforts during the discovery phase resulted in a clear direction for the branding and design of Credly's website.

Creating Design Systems

At Webstacks, we leverage atomic design to create our clients' design systems. This design methodology comprises four key levels: atoms, molecules, organisms, and pages. Beginning with atoms, which include typography and color, we assemble molecules like buttons and input fields. These molecules come together to form organisms such as heroes and switchbacks, which ultimately create a cohesive interface. Finally, we utilize atoms, molecules, and organisms to build complete pages, bringing the atomic design process full circle.

The beauty of this approach is that it allows us to build a comprehensive and organized design system that gives Credly complete control through a CMS. By adhering to atomic design principles, we were able to create a visually stunning and intuitive website that aligns seamlessly with Credly’s new brand identity.

The Solution

After the client approved the design system, I used components from the design system to create several pages, including the homepage, blog listing page, blog detail page, integrations page, customer stories page, and many more. These pages followed the established design system, with consistent typography, color schemes, and layout, ensuring a cohesive visual identity for the entire website.

In conclusion, the website redesign for Credly was a success, thanks to a comprehensive and collaborative design process. By leveraging a design system that incorporated atomic design principles, I was able to create consistent, visually appealing, and user-friendly page designs that aligned with the client's brand identity and business goals. Through user testing and client feedback, we were able to refine the design and ensure a seamless user experience. Ultimately, the new website has improved Credly's online presence and provided a platform for the company to showcase its products and services effectively. It was a pleasure working with the Credly team and contributing to their success.