Aside from professional and technical competence, job candidates often tell us their favorite qualities in the engineers they’ve worked with in the past include a sense of investment in the team’s goals and ownership that goes beyond the mere technical. This could mean providing early critical feedback on requirements or design, calling out roadblocks, or suggesting alternatives or improvements. Every candidate for a PM role we recently filled on our team specifically recognized and appreciated having truly committed and invested partners in engineering, such as someone who not only writes great code but also has the consumer experience in mind.
As software engineers working at large organizations, it can be easy to feel like we are just carrying out orders handed down to us from product and design. After all, it is the product managers who add the business requirements into our tickets and the designers who create the mocks attached to those tickets. All that seems to remain for the engineers is to reproduce the requirements and mocks in code and hand it off to QA. Yet, engineers have a lot of power to influence the final design of the product, especially in organizations that embrace collaboration, like we do at Trulia.
On our teams at Trulia, and on Trulia Mortgages specifically, we hold design reviews with all the engineers on the team before a product feature is deemed ready for implementation. This meeting provides an opportunity for any engineer to give open feedback and make a positive impact on the final design. Aside from being able to identify technical challenges to implementing a design, engineers get to play the role of an average consumer coming face-to-face with a new product for the first time.
Let’s use Trulia’s Affordability Calculator as one example of how this works. The calculator was released earlier this year and the below UI fragment was the design presented for initial review. It showed the calculator’s debt-to-income ratio (DTI) slider. In some ways, this is a central element of the calculator, as it lets consumers play around with the home price they can afford, based on how much they are willing to stretch their budget. Since our goal at Trulia is to make finding a home easy and enjoyable, our designer wanted to lean into the enjoyable aspect and add a fun little animation to the slider: a stack of bills flying away. Well, this slider drew some attention during the review…
One engineer pointed out that revealing the red spectrum to the right of the slider handle may be adding too much needless noise to the design. After all, a consumer is not “in the red” until he or she drags the slider handle too far to the right. A few of us also pointed out that the stack of bills metaphor was not very clear – does it represent the money going toward the house or a consumer’s savings? Aside from the slider, we also pointed out that a few key input fields were missing from the calculator menu (not captured in the screenshots).
Final slider interactions are captured below. Per engineering’s suggestion, the warning colors behind the slider handle are dimmed by default and only revealed based on the consumer’s interaction. The bill stack animation has been replaced with a piggy bank animation; perhaps a bit more whimsical, but also more clear in its representation – the more you put toward a mortgage payment, the less you’ll have in your piggy bank of savings.
The changes may seem trivial at first glance, but they are representative of something more important: they signify a collaborative approach to product design, where everyone on the team voiced their feedback and watched the best ideas get incorporated into the final product. This level of collaboration fosters a sense of ownership from engineering that ultimately results in a better experience for the consumer.
This is just one example of how Trulia’s design, product and engineering teams work in concert. If you’re interested in joining a culture like this, check out our open job listings here. And, if you’re interested in learning more about our implementation of this slider graphic using React and GSAP, stay tuned here.
