Contract Cloud

Timeline
  • 3 weeks

Skills
  • Research

  • User Testing

  • User Interface Design

  • Prototyping

Tools
  • Sketch

  • InVision

  • Principle

  • Miro

  • ZeroHeight

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

After our team received access to the current Contract Cloud platform, we performed a resource audit. This allowed us to gain an in-depth understanding of what Contract Cloud was currently working with and why they were unhappy with the design. It also allowed us to choose a few screens shown above to build high fidelity mockups to show how the platform would eventually look.

High Fidelity Designs & Testing Round 2

Rather than immediately converging into one design, our team decided to flesh out all 4 of our initial design explorations. Since all designs tested similarly, we felt that applying all 4 to the actual contract cloud platform would be worth our time to get more feedback, since we were unsure that users understood the purpose of a style tile and how it would translate to reality.  

DashboardA.png

Design A

Style A Dashboard@2x.png

Design C

DashboardB.png

Design B

Style B Dashboard@2x.jpg

Design D

Again, we began with a 5 second test to gain initial gut reactions and to see what immediately jumped out to users. Each user was asked a series of questions that focused on desirability of the designs to understand the motivations behind users responses and reactions before 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.

Sprint2-UserTestAffinityDiagramsR2-Charl
Sprint2-UserTestAffinityDiagramsR2-Laure

Miro Board Affinity Diagrams

The main takeaways we gained from this round of testing were: 

  • The gradient provides visual interest and a level of perceived sophistication to the design. Participants felt that it made the platform feel more customized.

  • Users’ strong positive response to the bright blue of Design B ultimately felt reactionary rather than a true preference to the more muted tones of the other 3 designs, but it was a clear signal to include more color in our final design. We will add the additional color in a more subdued way due to the color palettes of Contract Cloud’s competitors where a heavy use of light blue felt juvenile.  Based on participants’ comments, we know that the darker blue felt more distinctly professional, and that spending a lot of time within the platform, they would ultimately prefer colors that felt more soothing.

  • Participants really appreciated the use of lighter blue in Style D to highlight the active labels, so we would bring that forward and test the same blue as the header colors for the page cards because participants responded really positively to the lighter blues in those locations in both Design A and B. Adding in this lighter blue will help add more visual interest as users requested, but in a more purposeful and focused way.

  • While participants liked the use of yellow as a CTA, they ultimately preferred Orange as the CTA because it felt more professional and what was expected and familiar.

  • Users’ feelings about whitespace between the designs were very divisive - they either felt as if there was too little whitespace where the interface felt crowded and confusing or too much where the elements felt unrelated and disjointed. We will split the difference of these two amounts to create a more unified interface while providing enough negative space for users to not feel overwhelmed.

  • A solid header made the search function very apparent and easy to find (which made users feel supported), as well as grounding the pages in space.

  • Creating rounded corners on buttons and cards made the platform feel approachable, modern, sleek, and mobile-friendly (which translated to agile for one user).

Converged Design & Testing

With a solid understanding of how to move forward with a design that users and Contract Cloud would enjoy, we converged our designs into a final direction.

Accounts@2x.jpg

Our final round of testing was focused on identifying any areas that needed further refinement and confirming our final design direction, particularly the color palette. The main takeaways from our final round of testing were:

  • The gradient provided visual interest and a level of perceived sophistication to the design. Participants felt that it made the platform feel more customized and they liked the blues used in the gradient because they felt bright and harmonious.

  • Users also felt that the shades of blue present made the platform feel interesting yet soothing to look at. The blues also felt unique to the brand and less ubiquitous which was a positive thing. It made the users feel that the platform was both robust enough to support their needs, and not an “out-of-the-box” standard solution.

  • Adding color to communicate in areas like, RFP Status (Open, Pending, In Progress, Cancelled, Submitted etc) would help with scannability and additional visual interest.

  • Users also expected to see colors used within the chips/tags, so the team will recommend a palette range to inform those colors. The use of colors in this element would also have the same effect and benefits that are mentioned in the point above.

We also created some microinteractions to enhance user experience when interacting with the interface.

Dashboard - A@2x.jpg

Final Design

Using this feedback from our final round of testing, we did one final iteration on our design before finalizing our design system. Please explore the InVision prototype!

 

Design System & Brand Guidelines

Now that we had confirmed with users and Contract Cloud the final design of their product, we created a design system. Working remotely on this proved to be a bit of a challenge. InVision DSM had recently changed how their system worked, it was not very conducive to remote work anymore and would not allow more than one person to access it at a time. We would be unable to be working at the same time, which (due to our remote restrictions) was not going to work out. After researching many design system options, our team decided to use ZeroHeight. ZeroHeight allowed one of us to be logged into the web-based design system and build out all of our copy-based information while the other edited our Sketch file and pushed visual updates. This worked remarkably well and we were able to feel as if we were truly working together.

Contract Cloud is still a very young company, and we wanted to provide them with a design that would grow with them. Our focus on the key high fidelity screens provided us with all of the building blocks Contract Cloud needed to apply across their current platform and to their future products. Our user testing proved to be invaluable in this phase of our design as we had clear understandings of why users wanted or needed certain elements, from text size to color. As we created our system, we were able to break down each element to it’s very basics and easily and thoroughly explain how to use and combine them to create the full platform design. We had a mission to make sure that our design was accessible for everyone, which included meeting AAA standard WCAG 2.1 Guidelines and assuring that all elements met these guidelines. 

 

Please feel free to explore our Design System!

Screen Shot 2020-06-15 at 7.36.27 PM.png
Screen Shot 2020-06-15 at 7.37.25 PM.png

Along with the new design, We did a full audit of all Contract Cloud’s logos, re colored them to match our new design, and eliminated unnecessary colorways.

We created a Brand Guidelines document to provide Contract Cloud with a brand identity system and how to use it effectively. It included information on color, typography, and how to best use their logo throughout all current and future products.

 

Take a look at the full Brand Guidelines document!

Screen Shot 2020-06-15 at 8.50.04 PM.png
Screen Shot 2020-06-15 at 8.50.18 PM.png

Future Goals

If we had been granted the time, I would have loved to also provide Contract Cloud with a redesign of their website to match the new design of their platform. Our research suggested that a strong, consistent branding would lend users increased confidence in the strength and support behind the software. Contract Cloud mentioned that they would hope to push a mobile or tablet version of their product and while our design has been created to be responsive, I would have liked to provide tablet or mobile grid layouts to further explain the breakpoints we provided in the design system.

Takeaways

My ability to pivot quickly was really put to the test with this project. We had a few curve balls thrown at us throughout our process, but having a strong team connection where we were able to be respectfully critical was invaluable. Our team was very willing to discuss our opinions and converge on solutions that were stronger than if we had been working alone. We each were able to compromise when needed and push for actions we felt were necessary with a positive attitude and a shared goal of providing Contract Cloud with the best possible design for their product. 

 

Consistent user and client feedback led us to be able to make effective decisions that had data and reasoning to back them up. Our team was able to take each challenge in stride - constantly iterating on our designs to meet user and client notes and criticisms. Every decision was made with purpose in mind and that led to a very happy client and a thrilled design team.