Contract Cloud Visual Brand Identity

Before After

Just want to see the final product? No problem. Our process will be here when you’re ready to read all about the journey to get there.

Show me what you did

Project Basics


Contract Cloud's platform helps small businesses find, track, and respond to federal contracts.


Contract Cloud approached my partner and I to design the UI for an app that would match small business owners to government-issued contract bids, thereby eliminating time spent searching for business opportunities. However, based on client discussions and our own visual and usability audit of their existing websites and platform, we pivoted away from the original proposal and identified creating a visual branding system and design system as the solution which would provide the greatest impact to the current pain points within our 3 week timeframe.

My Role

My teammate, Charlotte Vosseler and I conducted research, a client audit, three rounds of ideation and user testing, created high-fidelity designs and prototypes, and microinteractions. We also created a brand guidelines document and a full design system.

Tools Used

InVision & InVision Studio
Adobe Illustrator
Google Docs & Sheets


3 weeks



Let's start with the good stuff:

Lessons Learned

The best part of each project is the opportunity to learn something new. I love the exploratory research phase and the user testing sessions of the design process because they’re an opportunity to learn something new. Don’t get me wrong, the actual designing part is still where I get my kicks, but it’s just so satisfying to go into a project with some real knowledge.

Plus every insight gained adds another layer of empathy and understanding to my knowledge base as a designer. How good is it that we won’t ever reach the point where there’s nothing left to learn? *nerd celebrate* I digress. These were some of the things that stuck out to me the most on this project (the real list is longer - if you can believe it, I did actually attempt to edit this down for brevity).

1. The easiest opportunity to create inclusivity is to increase font size.

One of our users, Deborah, a nurse in her 60s told us that the strategy for writing effective patient educational material includes writing to patients with the lowest level of education because “you’ll never lose patients with a higher level of education - they’ll just read the information more quickly, but you’ll immediately alienate the patients who don’t have a high level of education by ‘talking down’ to them.” Translating that to products aimed at multi-generational audiences, the easiest opportunity to create accessibility is by increasing the font size to at least 16pt.

The message we heard over and over again from our test participants older than 50 is that nothing drives them crazier than having to zoom into something just to read it and more often than not, they abandon websites or digital products rather than struggle to read copy that is too small for them to read comfortably.

2. Interface design can signal platform stability and increase user trust.

Our Subject Matter Expert, Rachel, spoke about how her own personal experience submitting RFP responses related to her perceptions of visual design. While a simplistic design might appeal to a user who is easily intimidated by technology, Rachel told us that a design that is simplistic makes her worry that the platform is not robust enough to meet her needs, or worse, that she could encounter a system error when uploading a large file or document.

3. Everybody loves blue.

Our client wanted to keep blue as their primary brand color, a decision that was validated in every round of user testing. There's a reason blue is consistently rated the most popular color in design. It feels soothing and professional at the same time. Users 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.

The Challenge

The most exciting challenge in this project turned out to be defining the challenge itself. Our client, Contract Cloud originally approached my partner Charlotte Vosseler and I to design the UI for an app that would match small business owners to government-issued contract bids, thereby eliminating time spent searching for business opportunities. However, by the time we met to discuss the project, Contract Cloud had made the decision to change to a more viable product that integrated with their existing CRM platform. We had planned to be designing just one product, but now we had the opportunity to choose a more holistic focus with the potential for farther-reaching impact. 

As we discussed alternate opportunities, some of the current user frustrations with the CRM platform and feedback from potential investors came up. Users were having some difficulty navigating the platform which resulted in more time spent responding to queries for the team, and investors wanted to see more visual refinement in the product.

Based on our discussion and our own visual and usability audit of their existing websites and platform, we identified creating a visual branding system and design system as the solution which would provide the greatest impact to the current pain points within our 3 week timeframe. Both systems would benefit Contract Cloud.

The benefits of developing a visual brand system for Contract Cloud:

Revisiting the general layout and feel of the interface to identify opportunities for restructuring content for clarity would reduce cognitive overload, and utilizing familiar design patterns would improve overall flow and navigation.

Refreshing the product interface would enhance user experience and increase perceived ease of use.

Design Systems create cohesion and familiarity by standardizing the design patterns and elements within a product. It takes the guesswork out of the process for developers and ensures all future iterations and products stick to the established.

Provide cohesive visual foundation across their current digital platforms and products so Contract Cloud is able to be consistent and iterate with intent as they grow and expand their product offerings.

So how’d we get there?

We started with a lot of research

Competitive Analysis

It’s important to both understand what the competition is doing well, and where we could help Contract Cloud differentiate itself, so we analyzed two direct and three indirect competitors to Contract Cloud. We organized our findings into two categories: Patterns to Emulate and Opportunities for Differentiation.

Patterns to Emulate

  • Organization through cards, tiles and tabs - allows for visual hierarchy and keeps information organized and easy to browse.
  • Making use of modals for explanatory or descriptive information makes the interface feel less cluttered.
  • Strong use of whitespace is perceived as better design because the user doesn’t feel overwhelmed with information.
  • Making use of established iconography paired with labeling is present in successful navigation layouts.
  • Darker tones (especially blue) create a sense of comfort and professionalism.

Opportunities for Differentiation

  • Interestingly, the only competitor to have a strong correlation between their website branding and platform branding was Capture2Proposal, so there was a real opportunity for Contract Cloud to differentiate themselves from their competitors with a stronger visual branding style.
  • While Deltek, DirectRFP and SAP Ariba all featured blue monochromatic palettes within their platform, none of them was able to pull it through in a truly successful way, and we feel confident that Contract Cloud can be the only competitor to pull through a blue monochromatic palette successfully.
  • Too little whitespace makes the platform feel busy and harder to identify items of importance. Effective use of cards combined with whitespace helps information feel organized and approachable - this should be a primary focus for Contract Cloud.

We took our research and client direction and created

Our Design Principles

Design principles are the guidelines, rules or laws that establish alignment across design decisions by holding teams accountable to a specific set of standards and values. The guiding design principles listed below are based on specific insights gained from the user testing and competitive/market research. They were used by the team (and Contract Cloud's team moving forward!) 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.


Visually pleasing

Knowing that visual aesthetics affect how users perceive brands and usability, our platform reduces cognitive overload and creates engagement through the following:

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


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



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.

First Iteration


Our goal for this initial discovery was to make sure we encompassed the adjectives our client wanted to include: Clean, Modern, and Agile. Knowing that our client loves their current branding colors of blue and orange, we developed moodboards around those colors, but played with a few tonal updates.

We spent some time thinking about our client’s users, who are small business owners. As small business owners, they would be plugged into their community whom they would rely upon for support (especially in the hard times, like now). It’s very time consuming to run a small business, and they almost certainly don’t have much free time for leisure activities, much less filling out RFP requests.

We also considered the adjectives, Community, Support and User-Friendly. Contract Cloud is the perfect solution for small business owners because they understand community and support (their experience and network within the military spouses community is proof of that!) better than their competitors. They know how hard it is to get a business up and running and they are here for their customers. And they know that their customers have a wide range of technical expertise so it’s imperative that the interface is simple, clean and easy to use so that their customers can spend less time online, and more time carrying out the contracts they’ve won through Contract Cloud.

Our original goal was to pinpoint our design direction after our first round of user testing, but we did not feel satisfied enough with the user feedback so we decided to continue developing all 4 designs

Style Tiles

We had several goals that we hoped to achieve in our style tile designs:

  • Incorporate the client branding colors of blue and orange
  • Simplify the interface design
  • Clarify navigational iconography
  • Bring the client’s brand identifiers of Clean, Modern, and Agile throughout the interface
  • Create accessible designs


Contract Cloud told us that they love their current branding colors of blue and orange, so we designed our style tiles around that color base, with a few variations on the color palette to provide a range of options. User testing will help gauge user preferences in the tonal variations and narrow the focus for the final selections. 

Another key consideration was (knowing that many of Contract Cloud’s users are older) keeping the branding simple and using colors to emphasize layout patterns and reduce cognitive overload. A monochromatic blue palette helps to achieve this goal because it acts as a neutral platform base and allows accent colors to stand out and communicate their purpose more clearly. Blue also expresses a feeling of calm in an otherwise intense and fast paced environment.

Interface Design

One of the Contract Cloud’s priorities, learned during our kickoff call, is that they want to make their interface more user-friendly and easier to navigate. They specifically referenced TurboTax as being an example of a user-friendly platform because it breaks down information into smaller sections, then walks the user through those sections in a simple yet thoughtful way.

Navigational Icons

As we reviewed Contract Cloud’s platform, we noticed that while the majority of their navigational iconography clearly express their purpose, there were a few repeated icons for different purposes, and a few that did not feel as clear in their purpose. To help support our previous goal of creating a more user-friendly platform, we first spent some time researching platforms with similar sections in order to identify commonly used iconography so that we can make use of existing patterns and associations.

Brand Identity

Contract Cloud provided us with 3 main identifiers they wanted represented in their brand: Agile, Clean, and Modern. Through our Competitive Analysis we discovered a few things that would help us accomplish those feelings. Whitespace was particularly important to help users digest heavy copy and information easily and quickly. It also leant a clean feel to the interface that kept users from being overwhelmed. Using sans serif fonts felt modern and new, as well as keeping the interface free of unnecessary visual noise, something Contract Cloud noted they wanted to eliminate in their branding.

In order to achieve the brand identifier of Agile, we increased the chroma of the blues to create a sense of excitement and movement that could be connected back to agility. Elements-wise, by focusing on simplicity, we can provide the users with a sense that any updates needed to the platform would be quick and easy to implement, making the platform agile.

In addition to the 3 main adjectives that we started with, we wanted to embrace the sense of community in small business and create something familiar and comforting for users who may not have as much experience with technology to respond to RFPs. Creating an inclusive, user friendly interface is what would keep users returning to Contract Clouds particular software beyond an accessible price point. The Contract Cloud team expressed a desire to put design first, and in that attract users and keep them returning due to an accessible, easy to use, comfortable design.


Readability through text size, weight, spacing, type choice and contrast ratios was a priority in our designs and went hand-in-hand with Contract Cloud’s request for a user-friendly interface. Referring once again to our user demographic, we purposefully chose san serif fonts for readability, and made the copy sizes a little bigger than we might if the product was created with a younger generation in mind. We also tested contrast ratios to ensure they met WCAG guidelines for accessibility.

Now, about those user tests...

Testing Strategy

In total, we conducted three rounds of desirability testing with 14 participants in all and a mixture of 6-7 new and returning participants in each round. Testing methodologies used were the 5 Second Test, Open-Ended Preference Explanation, Structured Word Choice and A/B Testing.

During the course of each round of testing interviews, the users either uncovered or confirmed some key insights that encompassed all design directions and often related back to many of our established design principles. Those key insights along with the new insights were then applied to the following round of designs, and each consecutive round tested the updates applied from the previous round so that the designs and the tests built upon each other. At the end of our testing, we compiled the test results from all three rounds along with our synthesized findings into a Desirability Test Report.

Testing Goals

Our team conducted interviews with 6 users in our target audience to gauge effectiveness of various divergent brand visualizations. The overarching goal of these interviews was to hone in on a visual language which will resonate the most with Contract Cloud’s users, provide cohesiveness across their brand platforms and strengthen their digital products. Our team hoped to learn:

  • Which design elements were working well on each tile and why
  • What opportunities there were for improvement on each tile
  • Which of the four tiles most clearly communicated Contract Cloud’s brand qualities
  • How to move forward with each design direction how the participants helped define that

User Testing Demographic

Small business owners and proposal managers have a variety of different ages and previous job experiences. We targeted an audience that would provide a representative demographic of small business owners and proposal managers. Some of the main criteria we used to vet our interviewees is as follows:

  • Age: 24-60
  • Job Experience: proposal response experience was the most desirable, but not required because there are always small business owners who are looking to apply for their first federal contract
  • Gender: we were interested in all genders
  • Experience with similar programs: we were interested in experience at all levels as inexperienced users would provide valuable feedback on the clarity and perceived navigability of the interface, while experienced users would be able to quickly identify positive and negative aspects based on their direct experience

The patterns we discovered from our diagrams included confirming blue as our primary color because it felt professional and familiar which built instinctive trust with the users

User Testing Takeaways

During the course of our interviews our users either uncovered or confirmed some key insights that encompassed all design directions and often related back to many of our established design principles. These insights were then applied to our next round of designs:

  • 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 read it comfortably/at all.
  • 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.

Second Iteration

High Fidelity Designs

After synthesizing our testing data from our Style Tiles, we decided to continue developing all four styles into a few high fidelity designs because we did not feel that our Style Tile testing had identified a single design direction with absolute certainty. We decided that we wanted more data before we converged our designs into a single direction. We applied the global insights gained in the first round of user testing, then focused on determining a final direction in this round of testing by having participants focus on the elements that resonated with them as well as those that didn’t and why they did or didn’t resonate.

Our second round of testing turned up some great insights and developing all four designs paid off

Testing Goals

Again our team conducted interviews with 6 users in our target audience to gauge effectiveness of various divergent brand visualizations. Because we had not achieved all of our goals in the first round of testing, our second round goals stayed the same:

  • Which design elements are working well in each design and why
  • What opportunities there are for improvement in each design
  • Which of the four designs most clearly communicates Contract Cloud’s brand qualities
  • A clear understanding of which design direction would be optimal to move forward with and how the participant feedback helped determine that decision

By testing all 4 designs again, we were able to better identify features that the participants responded well to like the gradient which felt sophisticated, and the rounded corners which made the platform feel approachable and mobile-friendly

User Testing Takeaways

Individual elements that felt very successful and were implemented in the converged design direction:

  • 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 Design 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 Designs 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).

Third Iteration

High Fidelity Designs

Our second round of testing accomplished our goal of determining our converged design direction. Pulling through the insights gained in our second round of testing, our final testing goal was to gauge the effectiveness of our converged brand visualization design. We looked to confirm the determined visual language resonates with Contract Cloud’s users, provides cohesiveness across their brand platforms and strengthens their digital products.

Our converged design combined the features and elements that the users responded to the best

Testing Goals

For our final round of user testing, our team was focused on confirming the final design direction with our users (particularly the color palette) and identifying any final areas that needed further refinement.

Users confirmed our organizational use of cards, and element padding, as well as the monochromatic palette

User Testing Takeaways

Overwhelmingly, users approved of the design, the colors, and the UI elements with a few final suggestions for improvement:

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

Our Final Design

You can check the prototype out yourself by clicking on the button below!

Take me to the prototype

Final Design Breakdown

A refreshed visual brand design delivered as a Brand Guidelines document and a ZeroHeight Design System which were the result of exploratory research, competitive analysis and three rounds of iteration and user testing and would be applied across Contract Cloud’s existing websites and platform.

Use of whitespace, commonly used interface patterns, text hierarchy and modals keep information organized and easy to scan and the interface easier to navigate. A monochromatic blue color scheme with a feature gradient provides a professional, yet sophisticated aesthetic while rounded corners with a rounded sans serif typeface communicate friendliness and approachability, allowing users to feel more comfortable within the platform. 

Design System

For the Design System, we knew we wouldn’t be able to anticipate every interface situation or element, so we focused on creating an atomic system that would provide the developers with individual elements and detail how they could be built up into larger patterns and combinations. In a way, our strategy mirrored that of Tan France on Queer Eye: Build a wardrobe (system) of staple items (elements) which can be easily mixed and matched, with one hero item (our CTA) to remove much of the guesswork and allow for a visually cohesive look.

The Brand Guidelines ensure brand integrity

Microinteractions provide another layer of communication to the user through feedback

Form Input Label Microinteraction

Forms. Can't live with them, can't live without them. They're vital to business platforms, but without care, they easily overwhelm and intimidate users (shout out to those forms seem to be part of the NeverEnding Story!) During the course of our client audit we uncovered some areas for improvement:

  • Reducing the columns from three to two, allows the fields to breathe a little more and reduces the cognitive load.
  • Breaking the fields up over multiple pages instead a single page also helps to break the information into more easily digestible sections. This was borne out in our user testing with users saying that they appreciated having all field forms above the fold to avoid having to scroll back and forth between fields. It felt easier to flip between pages.
  • We also grouped the information according to category, beginning with the basic level information and stepping up from there.
  • Most importantly, we increased the font size to size 16pt, and by moving the label into the form field itself, it could double as the input text, thereby eliminating duplicate text and simplifying the form. The microinteraction shows what happens when the user clicks into the form field to enter the information - moving the label into the outline preserves it for user reference.

Matched Opportunity Microinteraction

This felt like an important microinteraction to create because the value proposition of Contract Cloud is that they match small businesses to federal contracts, removing much of the work for the small business in finding opportunities. Clicking on the “Match” button should create a thrill for that small business owner, and the system response should reflect that excitement.

Project Success

For this particular project, we unfortunately did not have the access or time to determine a benchmark for success. If we had had more time to do this, some indications of success that I would have measured for are:

Volume of customer support requests

At the beginning of the project, our client told us that they were getting a lot of questions from users confused about how to navigate within the platform. Part of our design strategy was to improve navigation through the use of universal patterns, clarity in text hierarchy, element organization and a defined branding system. Fewer contacts about navigational confusion would suggest improvement, but that would be confirmed by:

Usability Testing

Because we did not have access to existing users, we were not able to conduct initial usability testing sessions to help determine particular pain points. Ideally, I would want to include that in my preliminary user research and then run the same test afterwards to understand how the updates affected usability.

Interest from Investors

The user-based reason for focusing on creating a visual branding system was increased usability and desirability. On the business side, having a well-defined visual brand increases brand recognition and loyalty from users but more importantly, it also builds a sense of credibility and trustworthiness. For our client, that credibility and trustworthiness extends to their investors. They mentioned that at recent investor pitches they had received feedback that the platform didn't feel developed enough and that gave the investors pause. A measure of success with this project would be increased interest from investors.

Next Steps

No project is ever truly finished. There's always something else you wish you could have done but were prevented by either time, budget, ability or some outside factor. These are the features/refinements/updates that got away.