co.tribute

august 2020

Scope

Wireframes
Website Design

cotribute.com

The Challenge

Expanding the client base

Co.tribute hired me to work alongside Abisheg Elijah, the VP of Marketing and Strategy on completely revamping their website. The initial one was a very simplistic site that only had a couple pages and was not an up to date reflection of how their software could be used by clients.

The Solution

Client targeted design

Because co.tribute already had a defined brand system they wanted to stick with, the challenge was to work within these limitations while also breathing new life into the design side of the website. My role was to take the copy they had decided on and to find a consistent way to visually express the features and strengths of their platform.

Visual Style

Adding more shapes

Co.tribute's original website primarily used teal gradient overlays to brand the visual content, and while this worked okay on the old site, the new one needed a more robust system so as to be able to expand and express more complex ideas. To begin the project myself and the other designer each built a high fidelity design of a page to experiment with various stylistic possibilities. We then picked the strongest elements from each page to use throughout the entire website.

From my design we adopted the use of rounded triangles that were inspired by the co.tribute logo as consistent background elements to add a little more co.tribute character. Along with I developed an icon style that included clean lines and offset fills as well as a system of representational graphics.

Graphics

Explaining big words

One of the biggest issues with the original site was that it did not make clear what exactly co.tribute offered, and how it was relevant to potential clients. In order to solve this the new website had a series of Who We Serve pages, each of which targeted a different business type and explained how co.tribute could help them.

Since I was not in charge of the copy my primary goal was help pair the message with graphics that helped to showcase how the platform works. Because co.tribute white labels their platform for each of their clients, each instance of the platform looks different. This allowed for me to create more stylized cards that showcased the co.tribute platform in a way that aligned with their brand.

Wireframes

Making and testing

While I was creating graphics and icons I was simultaneously building high fidelity wireframes for the pages I was in charge of designing. IĀ built all of the Who We Serve pages, as well as the Home, About, Team, and Resource pages.

Along with allowing for a streamline way to export graphics via Adobe XD. We were able to get user input on the messaging and images and revise the ones that were not communicating what they needed to.

About Co.tribute webpage

Webflow Build

Making it real

The final part of this project was building out everything within webflow. I built each of the pages that I designed and the rest were built by Abisheg. Because of the thorough lead-up to the actual build it was a very smooth process. Webflow allowed us to build, test, and launch the site in a short timeframe.

Visit the live Website