Overview
UX Cabin partnered with YellowHat to design an application that assists construction subcontractors when evaluating bid documents.
Goals & Business Objectives
- Design and implement an MVP to test the value proposition.
- Design high-fidelity mockups and prototypes for each of the 3 planned releases.
- Prepare and conduct user research and usability testing for each of 3 releases.
- Prepare all design assets for design to developer hand-off.
Primary Pain Points for Subcontractors
- Industry standard building plans and specification sheets tend to be hundreds of pages long. Most of the information is irrelevant to the subcontractor and the information that is difficult to find.
- In order to prepare a bid, subcontractors need to continually reference plan and spec sheets, which is time consuming.
- Some subcontractors still rely on pen and paper, which isn’t easily shareable and can be easily lost
User Research
Over the course of the 3 product releases, we administered over 40 user sessions to gather valuable insights.
Research Statement and Goals
Product Development
We want to understand how subcontractors interact with the web app, and uncover their overall needs and pain points in order to improve their bidding workflow.
Product Value
We want to evaluate the product and determine its value in the eyes of users in order to understand the product’s potential for monetization and alpha stage development.
Research Methodology
Research efforts included:
- 9 discovery interviews
- 23 usability tests
- 11 value proposition interviews
- 6 surveys
Sessions were moderated virtually via Zoom to accommodate for the diverse time zones of the app testers. Sessions were approximately 45-60 mins.
Design Process
UX Cabin built off an existing prototype to extend and improve the visual langue, feature priority and design system
Principles
- Enhance user’s current workflow without reinventing the wheel
- Keep it no-nonsense, simple, an straightforward
- Focus on precision and accuracy to build trust
- Give users control over the experience wherever relevant
Strategy
- Review the current state of the prototype and previous research that was completed to understand the product and user.
- Build the application for scalability by standardizing components, patterns, colors, and fonts through a robust design system.
- Make handoff effortless between design and dev.
Feature Area: Projects
Projects allowed subcontractors to track each project that they were analyzing documents for. Upload, analyze, categorize.
Project Listing
The project listing page now displays all subcontractor projects with sorting and view options; 5 out of 6 users preferred the list view for easier access to details, helping to enhance project visibility, management, and prioritization.
Creating a Project
Creating a project is now simple, requiring only a name and address, with a user-friendly modal that allows easy submission using the 'enter' button.
Users appreciate the organization from the start, saying it helps projects stay easy to find later, though some may skip fields like “Project Location.”
Uploading Documents
Users can easily upload and categorize PDF construction documents (Plans, Specs, and Others) for accurate bidding, with the Yellow Hat system creating a table of contents for quick navigation.
Improvements like drag-and-drop uploads and real-time progress indicators made the process intuitive—100% of users found categorizing files straightforward, with one user noting, “I like that there are different buttons for plans, specs, and other.”
Project View
The project view is central to the Yellow Hat experience, giving subcontractors easy access to building plans and specs. Tools like the table of contents, split-screen, notebook, and highlighter streamline their workflow, making bid preparation efficient and organized.
Table of Contents
The Table of Contents (TOC) feature provides a clear, hierarchical structure for quick navigation within project sections like Plans and Specs, eliminating the need for excessive scrolling.
With collapsible sections and smooth scrolling, 100% of users could easily access, open, and close subsections, though some desired a larger side panel and clearer visual cues for parent-child sections.
Edit Table of Contents
The Edit TOC function lets users easily customize the Table of Contents by rearranging, renaming, adding, and ungrouping sections for better document organization. While 100% of users could successfully edit and categorize items, some initially found icon meanings unclear, especially the dragger icon.
Splitscreen
The split screen feature boosts productivity by allowing users to view and interact with multiple project sections (Plans, Specs, and Others) side by side, improving workflow efficiency. Users can hide side panels like the Table of Contents for more screen space, with 100% of users appreciating the feature for comparing documents, although one user struggled with identifying the active viewer.
Notebook
The notebook feature allows users to capture, organize, and manage project-related notes directly within the platform, eliminating the need for separate tools. While 100% of users liked the feature, some suggested adding reference linking to other project pages for added value. Users appreciated being able to keep notes within the document rather than on physical pads.
Search
The search feature enables users to quickly find specific content within the PDF document, improving productivity by pinpointing search term matches and navigating to relevant sections. Users appreciate the ability to filter results by section and see page numbers for easier identification, as contractors often search for industry-specific terms and acronyms.
Highlighting
The highlighting feature lets users emphasize key sections in a document, with options to add notes, choose highlight colors, and manage their annotations. Users wanted the ability to add text directly onto the document, expecting it to appear as virtual sticky notes, to better mark important information.
Design Language System
For YellowHat, we created a strong design system to ensure scalability and consistency. It standardizes components, patterns, colors, and fonts, giving the app a cohesive look and feel. This makes the user experience seamless and improves usability. It also makes it easier to iterate on designs and develop new features in the future.
Style Guide
The Style Guide in YellowHat provides guidelines for the visual elements, creating a cohesive and branded look. It includes a carefully selected color palette, typography guidelines, grid layouts, and other UI elements designed specifically for YellowHat. The Style Guide ensures visual consistency throughout the app.
UI Component Library
The UI Component Library consists of reusable interface elements like buttons, forms, cards, and navigation elements. By using these components, the design team maintains consistency in layout, interaction, and visual style. This speeds up the design process and ensures a consistent user experience in YellowHat.
Developer Handoff
To facilitate a smooth transition from design to development, we aimed to provide developers with comprehensive design assets and clear documentation. The developer handoff process included the following components:
- Detailed Design Assets and Specifications
- Interactive Prototypes
- Live Code Samples
- Collaboration and Support
Post New Design Updates
After launching YellowHat's initial features and gathering valuable feedback from both developers and users, the design team was tasked with creating new features to enhance the user experience and address key needs.
Share & Download
Effortlessly share and export project documents with your team or clients, ensuring everyone stays updated.
New File Upload & Analysis Experience
The enhanced New File Upload feature offers a modern, intuitive design that enables subcontractors to create and track new versions of Plans, Specs, and other documents, with updates clearly displayed in a user-friendly Table of Contents (TOC). The improved table format design makes it simple to upload, organize, remove, and manage documentation efficiently.
Project Creation + File Upload Product Tour
Set up new projects seamlessly with guided file uploads and automated analysis for organized, thorough documentation.
Project View Feature Highlight Tour
Get an interactive overview of YellowHat’s project tools, ensuring efficient document review and management.
Conclusion
In conclusion, YellowHat is a powerful web app developed by 1848 Ventures and UX Cabin to streamline bidding for construction subcontractors, making the process faster and more accurate. With ongoing updates and improvements, YellowHat is poised to transform the industry.
