Copperleaf

Based in Vancouver, Copperleaf™ has been developing innovative approaches to making asset investment decisions since 2000. They’ve developed a unique decision analytics software solution for Asset Investment Planning and Management (AIPM) called C55™. C55™ helps organizations decide where and when to invest in their businesses to optimize performance and manage risk in their aging infrastructure. It has been adopted by some of the largest, most well-respected organizations in the world.

Victoria Chemko from Umami Marketing contacted me to assist her with the redesign of the Copperleaf website. My contribution was to support Umami in the Discovery, Planning, UX, UI, and Design for the new site.

copperleaf.com

Discovery & Planning

Victoria and I met with the Copperleaf marketing team to discuss the redesign of their website. We listened to their pain points with the existing website and what they wanted in the next version it. We asked more questions so we could dig deeper into their enterprise software solution, learn how the marketing team communicates the solution in the marketing materials and understand the sales cycle and process.

We learned that the Copperleaf solution had many moving parts and benefits that need to be presented in a manner so that it could be understood across the highest levels in an organization to the sub-levels.

Like most enterprise software, Copperleaf is progressive technology and it’s constantly evolving. The Copperleaf marketing team required a website that would allow them to easily manage and create content, be engaging and easy for visitors (customer journey) to find the relevant information specific to them, be better at capturing leads and metrics to make better marketing decisions while being true to their values as a company and brand.

copperleaf-creative-meeting-2
copperleaf-creative-idea-generation

Wireframes & Prototyping

With the collected information from the “Discovery & Planning” stage, Umami created user personas to answer the question, “Who are we designing for?” and how to align digital marketing and goals to specific user groups.

This information and a review of existing data helped create two things. A sitemap to map outline the flow of information hierarchy for each user journey and high fidelity interactive wireframes to provide a visual way to lay out content and functionality on a page, taking into account user needs and user journeys. Involving key stakeholders at this stage allowed each stakeholder to provide input, suggestions, ask questions, and most importantly, allow each stakeholder to contribute to the project.

The wireframes were also presented to the Umami development team for comments and feedback on functionality and to ensure we were within budget for development.

copperleaf-wireframes-fnl3

Brand Application & Style Development

The Copperleaf marketing team has developed a brand that is recognized internationally and has carefully integrated it into marketing collateral, sales presentations, and proudly displayed it throughout their Burnaby headquarters. It was my job to work out how the Copperleaf brand would be applied visually to the website design, create the interactive elements, and work out how the design would look and function at responsive breakpoints.

Since we had a large number of stakeholders involved in this project, we created interactive mockups of the new design. Based on the high fidelity wireframes created in the previous stage, the stakeholders could now see form and function. The interactive mock-up provided the stakeholders a sense of the final product, reducing assumptions heading into the development stage.

copperleaf-style-2
copperleaf-brand-elements-1
copperleaf-responsive-style-1

Bringing It All Together

In this stage, we bring all the planning and effort together.

The development team provided us with a working staging website with browser-friendly HTML, CSS, JavaScript, a Content Management System (WordPress), and integration of Copperleafs’ marketing platform software. Internal teams created pages, added page content, and set up landing pages, while Umami added onpage SEO updates.

The Umami team provided Copperleaf with a digital strategy inputs to increase lead generation, improve brand awareness, and a better baseline of measurement to report and measure against. Umami continues to work with the Copperleaf team to ensure effective execution of SEO and SEM to achieve its goals.

The newly redesigned coppleaf website went live in September 2016.

copperleaf.com

copperleaf-design-application-1
copperleaf-design-application-3

View more projects

dds-wireless-intro

DDS Wireless

123dentist-intro

123Dentist