top of page

Contract Cloud

Timeline
  • 3 weeks

Skills
  • Research

  • User Testing

  • User Interface Design

  • Prototyping

Tools
  • Sketch

  • InVision

  • Principle

  • Miro

  • ZeroHeight

Artboard 2@2x.png
dashboard.png
Role
  • UI Designer

  • Member of a 2 Person Team

Overview

Contract Cloud is a company that offers CRM platform services that sorts and organizes company information, proposal content, knowledge assets, and associated files, ultimately freeing up time to write high quality proposals that get accepted. They are currently creating an RFP Procurement software specializing in connecting small businesses with government RFP’s they are most likely to win. 

 

Our team of 2, Lauren Dukes and myself, were tasked with creating a design system and branding guidelines for their current interface

The Challenge

The Problem

Our team was presented with a visual overhaul of “RFP Go”, a webapp built by Contract Cloud that facilitates highly targeted matches between small businesses and government contracts they are most likely to win. Contract Cloud felt that their visual identity was too noisy and cluttered, and that it doesn’t materially differentiate them from their major competitors. They wanted help in creating a visual identity that is clean, modern, and agile that can be applied across all their digital properties.

Overview

Contract Cloud is a woman founded and led company that offers CRM SaaS platform services that sorts and organizes company information, proposal content, knowledge assets, and associated files, ultimately freeing up time to write high quality proposals that get accepted. They are currently creating an RFP Procurement software specializing in connecting small businesses with government RFP’s they are most likely to win. 

 

Our team of 2, Lauren Dukes and myself, were tasked with creating a design system and branding guidelines for their current interface

The Challenge

The Problem

Our team was presented with a visual overhaul of “RFP Go”, a webapp built by Contract Cloud that facilitates highly targeted matches between small businesses and government contracts they are most likely to win. Contract Cloud felt that their visual identity was too noisy and cluttered, and that it doesn’t materially differentiate them from their major competitors. They wanted help in creating a visual identity that is clean, modern, and agile that can be applied across all their digital properties.

The Kickoff Meeting

During our kickoff meeting, we learned that Contract Cloud had discovered that users were unable to efficiently navigate in the current software  “RFP Go”, and had therefore made the decision to integrate with Contract Cloud’s existing platform.

The Solution

The biggest challenge of this project became determining the best solution to Contract Cloud’s design blockers. Together, we took a step back to look at the bigger picture of Contract Cloud’s visual design as a whole.

 

We decided that the best solution would be a design system that would solve the two largest issues: usability and eliminating visual noise.

We would help boost user confidence in the platform by making the interface more familiar so users had intuitive knowledge of how to use the product, while focusing attention to the important features of their interface by eliminating excess information and creating a clear visual hierarchy.

 

In order to achieve this within our constraints, we worked with 2 screens of their webapp that were available to us - a design system would help the internal team, but we wanted to gauge the desirability with users based on the current layout of the platform. Most of the platform was laid out similarly, so two screens encompassed most of the design decisions we were looking to make. 

 

Contract Cloud’s branding was inconsistent across their products, so in addition to the design system, our team created a branding guide to apply to all current and future products.

Research & Competitive Analysis

Through our exploratory research, we discovered that the procurement industry has grown year after year with 2020 expected to bring in $5.9 billion in revenue in 2020, according to statista (though that number may fluctuate with the effect of Covid-19). Due to the continuing digitalization of businesses and increasing reliance on mobile devices, blockchain technologies which create transparency across organizations, and with more time on their hands, this allows procurement teams to spend more time looking ahead for trends and opportunities.

Contract Cloud shared with us their two most direct competitors, GovWin by Deltek and Contract2Proposal. Both are government RFP procurement softwares with similar features including an AI that matches contracts to companies. We wanted to explore further into the visual design of RFP and CRM softwares, so we also looked into 3 other non-government procurement softwares in order to gain a better understanding of the market at large.

In our exploration of branding and visual elements, we discovered areas we wanted to emulate as well as places that Contract Cloud could improve upon

Emulate:

  • Consistent branding was incredibly important to strengthen brand identity and backing by Contract Cloud, providing users with security that they have chosen a good product

  • Cards and modals help keep information digestible and less cluttered, helping users feel less overwhelmed.

  • Easy, intuitive navigation is necessary to allow users to feel comfortable using the interface, using iconography along with labeling is very successful.

  • Popular colors across the board were blues and greens, often with an orange or yellow CTA color. Ensuring the CTA color is unique in the brand palette helps strengthen user association of it to important tasks and actions.

Improve:

  • There is a lack of correlation between website branding and platform branding, so there is a real opportunity for Contract Cloud to differentiate themselves from their competitors with a stronger visual branding style.

  • A combination of using cards along with use of whitespace to keep information organized and approachable, keeping visual noise to a minimum.

  • Consistency between pages creates cadence and allows the user to orient and understand page purpose and content more quickly. This allows users to intuitively use the app and be able to look where they believe an element or item may be.

  • Defining a unified color palette using a bright CTA within a blue, monochromatic, palette will help the brand feel more engaging while also strengthening information communication and cohesion

CA Matrix.001.png

We created a competitive matrix to define where Contract Cloud could exist within the competitive market to make sure that the brand was able to stand out visually in the field. We wanted to make sure Contract Cloud could keep users coming back after attracting them with their unique value proposition of connecting small businesses specifically with contracts they were most likely to win. As a new company, we wanted Contract Cloud to stand out in a unique way by being the most visually appealing product as well as appearing like they had a strong backing behind all their products that customers felt they could rely on.

Design Principles

Based on specific insights gained from the user testing and competitive/market research, we created 4 guiding design principles to guide decision-making in the design process and ensure strategic alignment.

Intuitive to Use

Sourcing and responding to RFPs should not be time-consuming or confusing. Small business owners of all ages and technological abilities should be able to easily access and navigate the interface even as first-time users. Our interface should be:

  • Familiar - making use of common design patterns and systems so that the platform feels intuitive to users

  • Inclusive and accessible to all ages and abilities - ensuring all text meets WCAG 2.1 Guidelines

Easily Digestible

RFPs are data and copy heavy. Our platform focuses on presenting the information in the clearest possible way. We want our users to easily reference what they need without feeling overwhelmed by large blocks of text. This is achieved through:

  • Identifying instances of extraneous information

  • Use of modals to reduce page copy 

  • Use of cards to help visually break up information and create patterns for easier digestion

Visually Pleasing

Knowing that visual aesthetics affect how users perceive brands and usability, our platform creates engagement through use of color and reduces cognitive load on the user. This includes:

  • Consistent use of color, iconography and design element features

  • CTAs that are obvious without being distracting and controlled usage to maintain visual impact

  • Strategically placed logos to reinforce the message that users are part of the Contract Cloud community

Consistent

Having a clearly defined visual brand identity creates authenticity, loyalty and trust among a company’s customers. Consistent branding across platforms provides the user with the comfort and assurance that they have a strong company behind them if they are lost. We also want to provide Contract Cloud with the ability to expand and grow with a solid design behind them so they can focus all their time on their product and user satisfaction.

Design Exploration

Using our insights from competitive analysis, we began to explore the visual design of Contract Cloud. We started with the creation of moodboards to define our visual inspiration. Contract Cloud already had a defined color palette of blue with a CTA of orange and wanted to continue using it, but we also wanted to push a little beyond their comfort zone and see how different colors tested with users.

Moodboard A

Moodboard A

Moodboard C

Moodboard C

Moodboard B

Moodboard B

Moodboard D

Moodboard D

User Testing - Round 1

Our team wanted to personify who we thought would want to use Contract Cloud’s platform in order to understand the type of user we should be talking to.

Stacie is 35 and owns a small engineering firm that specializes in LEED-certified buildings. She’s looking to expand into government contracts but doesn’t have an employee who is dedicated to hunting for RFP’s. She has been overwhelmed by all the information needed to answer government RFPs and doesn't want to waste time applying to contracts that her firm is unlikely to win.

1_jsH2hLNItv2o14E2QgvyJQ.jpeg
7ce444e7d5449904957e6f6500731101.jpg

Bill is 58 and owns a small general contracting company. He has worked on many government contracts but he’s looking for an easier way to find and respond to the RFPs and cut down on the redundant work involved. His daughter bought him an iPhone a few years ago and while he appreciates the flexibility it provides and the  ability to continue working on the go, he feels far more comfortable on a job site than on a computer.

These personas guided our testing demographic and we interviewed 6 participants  from the ages of 25 - 68 with diverse backgrounds, including one subject matter expert who had extensive experience with procurement software.


User desirability testing was incredibly important to us since we wanted to make sure that all small business owners who wanted to use Contract Cloud would be able to easily understand and use the interface. Throughout all our testing, the overarching goal was to pin down a visual language which will resonate the most with Contract Cloud’s users, provide cohesiveness across their brand platforms and strengthen their digital products.

In this first round of testing, we hoped to learn:

  • Which design elements are working well on each tile and why.

  • What opportunities for improvement are on each tile.

  • Which of the three tiles most clearly communicates Contract Cloud’s brand qualities. 

  • A clear understanding of which design direction will be optimal to move forward with and why the participants chose that direction.

We then began to explore our visuals using a style tile to gain a better understanding of how the interface would look in a higher fidelity mockup. At this point in the process, we did not have access to Contract Cloud’s current interface, so we used an amalgamation of competitors products to start our exploration.

StyleTileA.png

Style Tile A

StyleTileA-Lauren.jpg
StyleTileB.png

Style Tile B

StyleTileB-Lauren.jpg

User Testing - Round 1

Our team wanted to personify who we thought would want to use Contract Cloud’s platform in order to understand the type of user we should be talking to.

Stacie is 35 and owns a small engineering firm that specializes in LEED-certified buildings. She’s looking to expand into government contracts but doesn’t have an employee who is dedicated to hunting for RFP’s. She has been overwhelmed by all the information needed to answer government RFPs and doesn't want to waste time applying to contracts that her firm is unlikely to win.

1_jsH2hLNItv2o14E2QgvyJQ.jpeg
7ce444e7d5449904957e6f6500731101.jpg

Bill is 58 and owns a small general contracting company. He has worked on many government contracts but he’s looking for an easier way to find and respond to the RFPs and cut down on the redundant work involved. His daughter bought him an iPhone a few years ago and while he appreciates the flexibility it provides and the  ability to continue working on the go, he feels far more comfortable on a job site than on a computer.

These personas guided our testing demographic and we interviewed 6 participants each round from the ages of 25 - 68 with diverse backgrounds, including one subject matter expert who had extensive experience with procurement software.


User desirability testing was incredibly important to us since we wanted to make sure that all small business owners who wanted to use Contract Cloud would be able to easily understand and use the interface. Throughout all our testing, the overarching goal was to pin down a visual language which will resonate the most with Contract Cloud’s users, provide cohesiveness across their brand platforms and strengthen their digital products.

We then began to explore our visuals using a style tile to gain a better understanding of how the interface would look in a higher fidelity mockup. At this point in the process, we did not have access to Contract Cloud’s current interface, so we used an amalgamation of competitors products to start our exploration.

Style Tile A

Style Tile A

Style Tile C

Style Tile C

Style Tile B

Style Tile B

Style Tile D

Style Tile D

We began with a 5 second test to gain initial gut reactions and to see what immediately jumped out to users. We asked participants  to choose adjectives from a list for a structured word choice in order to aid users in describing what they did and did not like about the designs. Each user was asked a series of questions that focused on desirability of the designs to understand the motivations behind users responses and reactions.

Affinity Diagram - Charlotte
Affinity Diagram - Lauren

Miro Board Affinity Diagrams

The main takeaways from this round of user interviews were:

  • Design to your lowest level of accessibility because a higher level of accessibility won’t lose a user who can read small/poorly contrasted copy, but it will certainly lose the users who can’t.

  • Blues feel both soothing and professional and they remind a lot of people of other platforms they’ve used before which creates an instant sense of familiarity which can then translate to perceived intuitive design.

  • All the users understood the purpose of the orange as a call-to-action color in the designs and appreciated its purpose, but also did not like it aesthetically nearly as much as the blue. Most users had a hard time putting this feeling into words. 

  • Icons and layouts felt familiar which enhanced the intuitive feel that users knew how to read and understand the interface - despite the lack of exposure most users had to procurement and CRM platforms. 

  • White space plays a key role in perceived cleanliness of a design.

Resource Audit