Ten-X Homes

Responsive Web Platform

2016

I supported ​interaction ​design, ​built ​the ​UI ​toolkit, ​and ​implemented modern ​design ​ops ​for ​the ​launch ​of ​Ten-X ​homes, ​a ​responsive-web transaction ​management ​platform ​for ​home ​buyers ​and ​sellers.

I joined Ten-X Homes four months before the launch of their new site, a transaction ​management ​platform for home buyers and sellers. By this point, most of the visual design had been completed, but engineering still had a ways to go to execute on the visual direction.

My main roles during launch were:

  • defining a modern UX process to support engineering execution of the design
  • conducting heuristic analysis of the existing designs and designing solutions for flow and usability flaws and oversights
  • designing our credit card checkout experience
  • conducting research and supporting interaction design on a new feature, the residential valuation tool, which received a patent

Modernizing Design Operations

When I joined the team, six engineering scrum teams had begun their work on the platform, but there was still a few months of work to go. The two designers hadn’t define a hand-off mechanism -- the current practice was for the product managers to take screenshots of mockups and attach them to JIRA tickets. The result was inconsistent across scrum teams, and an imprecise execution of mockups.

I partnered closely with a few lead engineers to define a toolkit among the existing components. This empowered the designers to focus their efforts on the problem they were solving and not have to reinvent the wheel for common components. This also saved engineering time by reusing existing code, and also resulted in a higher quality outcome by using consistent components across the site.

The two designers were well overworked, and asking for redlines of every design wasn’t a scalable option with our existing resources and timeframe. Therefore, I introduced the designers, product managers, and engineers to Zeplin, a interactive redline tool that, now that I’m writing this, is pretty common among the industry. I implemented a new process for designers and product managers to hand off work to engineers. Features would start with an invision prototype demonstration of the feature and flow where engineers could ask questions. Next, engineers would have direct access to the Zeplin links directly in their JIRA tickets, providing more detailed specifications from which to base their work.

In hindsight, Zeplin still has its limitations because it can be an overwhelming tool for engineers to utilize. Which items should they be inspecting? What should they do if the mockups aren’t pixel perfect? Do toolkit components exist for any of these? Zeplin pushes the burden of creating meaningful design specifications from the designer to the engineer. Ultimately, a more optimal approach would have designers creating detailed specifications for common components in the toolkit. This would only need to happen once. Then, during handoff, identifying all the common components to the engineers, and providing specifications for non-standard components.

Heuristic Analysis

Six teams had been building a site in isolation of each other. The result was a site that didn’t flow seamlessly from page to page. Some key pages, like the customer dashboard, had no link to access them!

I provided a fresh pair of eyes and conducted a heuristic analysis of the designs, identifying key usability and flow issues. I pieced together some interstitial flows using existing design and components. It was simple design work, but important nonetheless.

Checkout Flow

I worked with a product manager and our legal partner from the core business to define a checkout experience. I first created mockups in Sketch, and then prototyped key interactions with a simple HTML+jQuery prototype. No one should have to select their type of credit card again, and I wanted to make sure small details like those made it to launch. A second prototype was created to reduce the number of steps in an attempt to improve conversion.

I provided a fresh pair of eyes and conducted a heuristic analysis of the designs, identifying key usability and flow issues. I pieced together some interstitial flows using existing design and components. It was simple design work, but important nonetheless.

Retail Valuation Tool

I conducted initial user research (convenience sample, semi-structured interviews) and prototypes for our residential valuation tool, our patented application to help buyers and sellers better understand the price of a home.