Table of Contents
This is a case study for use in a class like Software Development.
Prototyping is a Job
Frangelico DeWitt is working with his team to develop a new suite of software for their employer HVAC in a Hurry (a heating and air conditioning service business). Their current focus is on a web application that helps field technicians find availability and pricing for replacement parts.
He’s starting from a working prototype on JS fiddle (Making Stuff Happen with JQuery) and would like to automatically pull a list of parts from their test ‘database’ on Google Sheets (HVAC in a Hurry Parts Database).
Automating Your Gruntwork
There’s a bunch of working sample code online to pull data from Google Sheets and do stuff with it. He’s made a start with these JS Fiddles:
There’s some code in the sample code for dealing with the JSON feed- don’t worry about that for now. Can you follow what the readData and drawDiv functions are doing?
Let’s suppose Frangelico has realized he wants to display the part type in a new row on the overlay div so you can see it when you hover over a part. How would you extend the code to do that?
What else do you think is worth trying? Try it out!
Exhibit A: User Stories
These stories are the primary focal point for the team: they describe both what the team has learned about the user and what they want to do for them. As you get into the details, it’s key not to lose sight of your design intent and what you’ve decided is important to the user.
Epic User Story
‘As Ted the HVAC technician, I want to identify a part that needs replacing so I can decide my next steps.’
Based on their observations in the field, Frangelico’s team thought through the user experience of the epic with the following storyboard:
|‘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 don’t know the part number and I can’t determine it and I want help so I can move the job forward.’||Make sure an estimate of the turnaround time for an expert to review is available|
|‘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?
|Make sure it’s possible to indicate priority
Make sure cost associated with priority delivery are available
|‘I want to order the part so that we can move forward with the repair.’|
Exhibit B: Working with the Sample Code on JS Fiddle
The basic idea with JS Fiddle is that you can quickly write and test your code in a simplified environment. When you arrive at the sample JS Fiddle, you can freely edit it.
If you want to see your changes in the ‘Results’ pane, you’ll need to click the ‘Run’ button at the top.
If you want to save your version, you’ll need to have an account on JS Fiddle and click ‘Save/Update’.
- If you’re using a library like JQuery, you need to select it in the JQuery panel (small icon with gears). You can see an example selection in the sample code for the case.