Example User Interface Comparables & Wireframes at HVAC in a Hurry (Enterprise)

HVAC in a Hurry (HinH) is a fictional company I use in various examples here and on my Coursera course on agile. HVAC stands for ‘heating, ventilation, and air conditioning’ and the company services this type of equipment for businesses. The software team is currently focused on standardizing and automating their business process with software. Most of the ‘action’ in the business deals with the relationship between a customer who needs something done, the dispatch office which takes the calls and prepares a technician, and the technician who does the work on site.

User Stories

One area they’ve decided to focus on is the process by which the technician (we’ll call him ‘Ted’) finds out about getting replacement parts for HVAC equipment where he’s found that’s necessary. An epic user story for this might be:

‘As Ted the HVAC technician, I want to identify a part that needs replacing so I can decide my next steps.’

Here’s a storyboard that describes the epic:
epic-user-story-hinh
The child stories under this epic might be something like:

STORY TEST CASES
I know the part number and I want to find it on the system so I can figure out next steps on the repair. Make sure it’s possible to search by part number.

Make sure descriptive info. appears as the search narrows (photo?) to help avoid error.

I don’t know the part number and I want to try to identify it online so I can move the job forward. Make sure it’s possible to search by make/model of units

Make sure it’s possible to search by type

I want to see the cost of the part and time to receive it so I decide on next steps and get agreement from the customer. Make sure it’s possible to dispatch a request by email to the customer in case they order their own parts and/or carry their own inventory of spares.

NOTE: How would the customer respond so we can help structure the next steps as we would otherwise?

UI Comparables

Once the team has stories they feel are clear and investable, they should be asking themselves ‘What established interface pattern that our users knows will map most naturally to these narratives?’. Answering this question requires exploration and disciplined experimentation.

The team comes up with the following four ideas on functionally comparable areas:

  1. Online Shopping: This has the comparability of searching and selecting items based on both relatively general and relatively specific criteria.
  2. Used Car Purchases: This is somewhat similar to the above, but has more structure/similarity between items, which we think may be more comparable to HVAC parts searches.
  3. Photo Search: The team knows that all the searches have a visual component- even if the tech knows the part number, they want to (or should) validate the part visually against what they have in hand.
  4. General Record Search (CRM, Email): This might be interesting since it’s very robust relative to searching lots of records.

They question they’re trying to answer is: What patterns and comparable’s are applicable to our user stories?

Starting with area #1 (online shopping) they study major online shopping destination, looking at common patterns to determine what users are likely to expect:

online-shopping-comparables

A few things they notice across sites and which you can observe, for example, in the Amazon screen shot is the ability to see and modify the search while you’re looking at a list and the default of sorting items by popularity:

amazon-online-shopping-comparable

In fact, they observe many of those same patterns but with more structure/similarity in the used car shopping examples you see below. From this, they get a few ideas about how to tighten up their search ideas since HVAC parts will have much greater consistency than the breadth of items in a general purpose online retailer.

used-car-shopping-comparables-1

used-car-shopping-comparables-2

Now, the team wants to execute at least two distinct directions so now they move to area #3, photo search. Just to draw attention to the contrast with the used car search, they search for cars (Ford Focus) on these photo sites:

photo-search-comparables

Parallel Prototypes

At this point, the team feels like they good breadth so they start sketching ideas. At this point, the question they’re asking relative to the user stories above is: What concepts might provide the right signifiers and experience to the user?

Their first direction ‘concept 1’ is focuses on structured search and the kind of list views you might see in online shopping. The Balsamiq mockup’s below show a progression from initial search, to a list of results, to a detail view of a specific item:

concept-1-search

concept-1-list-view

concept-1-detail

The second concept, ‘concept 2’ focuses on a more visual approach:

concept-2-search

concept-2-detail

The team might detail more concepts- two is a reasonable start but three to four is also typical. From there, they might dot vote on ideas and pick a couple to make interactive (see above) and then put through user testing to compare their effectiveness at delivering on the current user stories.

For static mockup’s of the two concepts, see this Balsamiq file: Parallel Prototyping at HinH.

For an interactive mockup of ‘concept 1’ from the work above, see: Interactive Prototype for HinH.