CPE Education

Cooper Professional Education is a team of design practitioners at Designit – a global strategic design firm, who transform organizations through education.

visit website

Challenge

Cooper Professional Education (CPE) is a design thinking and leadership training organization that helps practitioners, managers, and leaders become more effective and impactful innovators and change agents. It helps companies and teams change how they work, adopting the design thinking mindset, methodology and tools. CPE supports companies in this transformation through a mix of programs, courses, and coaching.

A couple of years ago, CPE became part of Designit, a global strategic design firm. Designit is a part of Wipro, one of the largest technology, consulting, and business companies in the world. As CPE expands its services to meet the growing needs of clients worldwide, its website needs to reflect the new global brand position and capabilities.

CPE’s goal was to develop a website that balances user goals with business objectives. It was important to establish a clear and meaningful relationship within Designit and Wipro ecosystem. Some of the key goals for the website were for it to have a clear connection with brand ecosystem, optimized user flow & UX, clear communication on what CPE offerings are and their value, easy to manage backend and a simple checkout process.

The outcome

A block-based WordPress website that allows CPE to easily maintain, update and create new pages as the website evolves. Here’s how the new website addressed CPE goals:

Connect with brand ecosystem

CPE was positioned as a sub-brand of Designit sharing the same identity, typography and layout based on branding guidelines. Additionally, the visual assets were adapted to reflect the unique flavor of CPE.

Optimize user flow & UX

The website was optimized to have an efficient and pleasant overall UX, by implementing clear navigation, easy mechanisms for transaction and referral, smooth loading of the pages and subtle animation.

Inform + show the value of CPE offerings

Simplified navigation helped to direct users to the right content at the very beginning of their website experience. To show the value/ROI of their offerings case studies, testimonials and inside class experience videos were used accross the website.

Ease of implementation + maintenance

29 custom WordPress blocks were developed allowing CPE to easily create new pages. As the website needs grow, new blocks can easily be added to the system. Additionally, we created a 45-page style guide featuring all of the visual elements and blocks used on the website to facilitate the creation of new content.

Simple checkout process

We integrated an EventBrite API, a platform CPE used to sell seats to public training, to the new website. That allows the users to go through the checkout process on-site.

Competitive Analysis

Conducting a competitive analysis is an important part of any business strategy because, without knowing how you rank against your competitors, it is impossible to know which competitors are your greatest threats, how to beat them or where you should focus your efforts.

While looking at cooper’s competitors we started to understand the industry and where the opportunity for growth and potential threats were. It allowed us to identify the areas we could target to make the business stand out and apply it to the project.

We delivered a 30-page pdf including easy to read tables and comparing all of the competition on key areas of their online presence like market positioning, online customer reviews, content, social media, SEO, website audit amongst others.

Wireframes

Before jumping into the design of the website we created wireframes. Wireframes are usually compared to a blueprint of construction, which is in short a clear picture of how the elements of the website are going to come together.

We created wireframes with the goal of showing the positioning of content and visual elements of the design, defining the UX and to facilitating communication between designer, copywriter and the client.

Design & development

After creating a low fidelity prototype, we were ready to move to the design phase. Large typography, asymmetric positioning of the content and quality imagery became the base for designing CPE website.

However, it was important to add a more human feel to the website due to the nature of their offerings. To reflect the unique flavour of CPE we introduced hand-drawn illustrations to otherwise minimal style design. After the designs of key pages were ready and signed off, we moved to the last phase – development while finalizing the design of the remaining pages.

We developed 29 custom WordPress blocks for this website allowing CPE to easily change or create pages without having to think about design consistency, this modular system allows the administrator to focus on content and use the available blocks to create a visually appealing page.

Great UX was high on our list for goals so we decided on using small animations during page scroll and Ajax to load the pages creating a faster more enjoyable experience for the user.

If a website is selling products or services the checkout process is key and we wanted to make it as seamless as possible. The first problem was that CPE was using EventBrite for quite some time and they were used to selling tickets there, so we had to come up with a way to integrate it, luckily EventBrite released their API just in time for us to use their new checkout popup on the website and keep CPE’s client on-site during the checkout process.

Finally we considered the scenario of design iterations so we created custom plugins to store all the necessary functions like the custom blocks and post types, and created easy to change variables for most common changes like fonts, sizes, colours or animations, all while keeping the code as lean as possible.

Illustration

Cooper Professional Education is all about the personalized interaction between a coach and the trainees they create in the classroom. Introducing hand-drawn illustrations to the website helped to convey the idea of the human experience and fun you are going to get while learning.

Style Guide

A style guide is where all the elements that were designed and developed for the website come together. It helps to build new sections and pages faster and maintain design consistency. It serves as a reference for designers, developers and content owners.

We created a 45 page style guide for CPE to show all visual elements of the website such as typography, headers, links, buttons, colour pallets, icons, illustrations and other design elements. However, what set this style guide apart from others was the index of the custom blocks that were created for this website. Each block identified with an icon also used on the css editor so it’s easier to find and identify.