- Client – Taika Ström,
- competitive analysis,
- wireframes,
- website design and development
Challenge
Cooper Professional Education (CPE) is a design thinking and
A couple of years ago, CPE became part of Designit, a global strategic design firm.
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
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
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
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

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
