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.
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.
