Ux/Ui Design

Contract Generator

January 2019

The Project

We wanted to assist our sales team with a quicker and easier way to generator a contract when meeting with clients. We currently use HelloSign for agreements, but we found that our sales team didn’t have the flexibility needed to generator contracts quickly or have the necessary functionality for customization and editing.

While using HelloSign API and our proprietary software, we were able to create a contract generator for the sales team. Our new product will allow our sales team to customize their contracts and give them the functionality needed when meeting with clients.

We also provided an option for our sales team to generate marketing literature that could be sent automatically when initially settings up their contract.

Pencils before pixels

I am passionate about sketching and a big advocate for it. I have seen such benefits from sketching. It allows me to iterate quickly, eliminate any ideas that may not work, communicate with stakeholders, and work out early user interface concepts.

Pencils Before Pixels


Detailed Wireframe

Detailed wireframes can also be complemented with wireflows. Wireflows can be used with detailed wireframes to document the process of a user working through a common task and show dependencies. You can annotate your wireframes using arrows to illustrate directions, interaction flows, and a sequence of events and movement. Using wireframes helps communicate design decision to stakeholders and teammates. It also serves as design deliverable so the product team can be on the same page.

At CityBldr we have a mobile-first approach to product. We begin all projects in mobile so we can scale the design and different viewpoints.

Detailed Wireframe

Detailed Wireframe

User Interface Design

User Interface design is the last step before handoff to developers and the phase where a styleguide and final specs are crafted. It’s an opportunity to define, or implement a brand color-scheme and affect usability with the layout, contrast, and visual hierarchy.

UI Elements

Contract Generator User Interface Elements

Previous Case Study Next Case Study