Website Redesign

Goal

Church Pension Group website redesign with a goal of create user friendly experiences that lessen the cognitive workload. I needed to create a system and that could logically to represent a wide breadth of content CPG started producing, including e.g. leadership blogs, research and reports, articles, etc. Also, to this it was important to come up with a modern and appealing visual style that will shine a light on the brand personality.

‍

Discovery

Step 1 — Business requirements

First things first, it took us a few workshops with key stakeholders (the business) to understand brand vision, overall goals and challenges. I needed their perspective on:

• internal: business needs, requirements, goals;
• external: context, competitors, best practices;

Step 2 — Site and Content Audit

To provide users with an enjoyable experience on the website it’s important to anticipate their needs to provide relevant information on each step. Therefore, different user types and their journeys informed the site structure. Based on this, it was possible to simplify user-flows between pages by removing unnecessary pages, merging existing and adding new when needed.

Exploration

• Website design created in 2011 large amounts of condensed content which burden the user cognitive load.
• Design patterns are not modular and flexible to accommodate different types of content.
• Heavy use of dark and light color combinations violate usability best practices.
• Content hierarchy is unclear making content hard to consume.

Modular Content Templates

Following initial discussions about building a flexible modular system to represent various content, for wireframe I created various elements based on the same logic and style with different hierarchy, balancing between images, headlines, and various supporting copy. Ultimately, I managed to create the whole website by using atomic design elements.

• Clear content hierarchy
• Page is scannable
• Flexible layouts support different content types
• Bridge to personalization

Templates based on content type

• Landing Pages
• Informational Pages
• Product Marketing Pages
• Educational Pages

‍

Style Guide Updates

• Limited color palette increasing link and CTA visibility
• Body copy updated color for easier reading
• Introduction of iconography for page scanning
• Simplified font family
• Increased image usage to assist easing cognitive load

Delivery

Once logic and functionality are defined, the visual design process didn't take long. Using wireframes and the modular system, the UI was created, following brand visual guidelines. During this stage, a digital design guideline helped justify design decisions and deal with alternative opinions within the team. Another important aspect was to provide all necessary materials, guidelines and recommendations for developers. I tried to support the dev team with design specifications that helped the build phase run smoothly.

‍

Before

After

‍