Ux/Ui Design

CityBldr Signal

November 2018

The Project

I was recently tasked with creating a product where users could find out the value of their property being sold alone or with neighbors. The platform will allow users to contact neighbors to see if they would like to sell their properties together. The company goal is to turn one user listing into multiple listings. The goal for the user is to leverage their properties by selling with neighbors and gaining more value for their property. Users could also see if their home qualifies for an instant offer.

Find out if your home is worth more money at CityBldr.

Project Kickoff Meeting

When beginning a project, I like to start each project with a Product Kickoff Meeting. I created a Product KickOff Questionaire that is used at our meeting with all stakeholders. The questionnaire allows the team to define the purpose/vision for the project. It establishes what we are building and who are we building it for. It outlines goals for users, the company, requirements, and objectives.

During this stage, we are interviewing users and using user surveys to create our Personas. Removing the word user and using a Persona like ‘Patty - The Professional’ makes the user more concrete. We should be establishing primary and secondary users and finding common attributes. Finding common traits will allow us to create a consistent user interface.

Project Kickoff Meeting

Project Kickoff Meeting


After the research stage, I move to sketching. I find the approach of pencils before pixels is the easiest way to ideate and iterate. Sketching allows me to get feedback quickly and get revisions to the users immediately. Failing often and rapidly will enable us to work out ideas that will not work and gets us closer to a solution. I find sketching my favorite part of the UX process.

Early Sketching Concepts

Early Sketching Concepts


This stage of the UX process is all about ideas, iterating and testing our hypothesis. Sketching is a quick, functional and low-cost way to test our hypothesis. It allows us to make changes quickly, test our theory and get feedback.

We are in the stage of breaking eggs, flushing out ideas and building off of those ideas. Once we feel comfortable with a sketch, we can move to a low-fidelity prototype. Low-fidelity prototypes allow us to create a straightforward interface to test.

Black and White Wireframes

Black and White Wireframes

High-Fidelity Mockup

Once we feel the prototypes are in the right place. We are now ready to begin the design. I like to start by creating a mood board. I use InVisions mood board feature. The mood board allows me to develop ideas for images, UI elements, and colors. If we are building a shopping cart, I like to research shopping carts and add that to my mood board as a reference or idea.

High Fidelity Mockup

Final High Fidelity Mockups


Having style guidelines allows designers not to have to recreate the wheel every time. Having design guidelines enforce a consistent experience throughout your products. Guidelines also define best practices. Developers can refer to UI elements to build the interface and don’t have to keep checking in with the designers.

I like to create all the CSS for these elements (a cheatsheet for engineers). Having CSS code documented makes life easier for the engineer; they can copy and paste the code right into their stylesheets. Zeplin can also be used for designer-developer handoff.

High Fidelity Mockup

StyleGuide UI Elements

Previous Case Study Next Case Study