Page Navigation
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 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.
Sketch
InVision & InVision Studio
ZeroHeight
Adobe Illustrator
Keynote
Google Docs & Sheets
Miro
3 weeks
Desktop
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 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.
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.
The procurement industry has grown year after year with 2020 expected to bring in $5.9 billion in revenue in 2020 (though that number may fluctuate with the effect of Covid-19).
Reasons for this growth include 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, procurement teams can spend more time looking ahead for trends and opportunities.
This was good news for our client - whose market niche focuses on finding government-issued RFPs and then matching them to the small businesses that are best suited to respond to the bids.
With plenty of other procurement platforms, it was important that Contract Cloud differentiate itself from its direct competitors. Based on our competitive analysis and our timeframe, we knew that the best way to set our client apart from their competitors was by ensuring their platform appealed to potential users for its attractive visuals and its perceived intuitiveness.
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.
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.
1
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:
2
Knowing that visual aesthetics affect how users perceive brands and usability, our platform reduces cognitive overload and creates engagement through the following:
3
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:
4
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.
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.
We had several goals that we hoped to achieve in our style tile 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.
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.
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.
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.
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.
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:
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:
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:
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.
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:
Individual elements that felt very successful and were implemented in the converged design direction:
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.
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.
Overwhelmingly, users approved of the design, the colors, and the UI elements with a few final suggestions for improvement:
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.
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.
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:
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.
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:
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:
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.
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.
