Table of Contents
This is a case study for use in a class like Software Development.
Please note: This case builds on a prior case called ‘Making Stuff Happen with Javascript‘ and assumes familiarity with its contents.
Grinding it Out
Frangelico DeWitt and his team are working on 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.
Frangelico has been steadily coding and debugging. At the moment, he’s deep in the dev Console, figuring out what’s wrong with his Javascript.
He has a working HTML/CSS prototype on JS fiddle: Javascript Prototype . As a next step, Frangelico needs to get the drop-downs working.
A Series of Small Problems
There are two drop-downs that should allow the user to filter the parts they’re seeing based on either or both of: Manufacturer or Model. They should be able to work independently, and right now neither one is functioning correctly.
Using the Chrome DEVTOOLS (the Console in particular), Frangelico is working through and fixing the issues on the Javascript Prototype. Use whatever process you like to do the debugging EXCEPT comparing this current JS Fiddle to other versions from the associated cases. That is a shortcut that won’t help you with your analytical debugging skills. To get started with the DEVTOOLS, just right click on the page and select ‘Inspect’.
Here’s a general set of steps you may want to consider (for each individual issue):
What line(s) of Javascript is the Console returning errors against, if any? What do you see there. Pro tip: Filter on ‘index’ to see just the content of the JS Fiddle.
What assumptions are baked into the code? Which ones might be incorrect?
How might you use logging to Console to help you isolate the issue(s)?
You can fork and save the JS Fiddle to preserve your work for the classroom discussion.
Exhibit A: User Stories
These are background to the current list of items in Exhibit B, but as you get into the details it’s key not to lose sight of your core 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.’
Storyboard
Based on their observations in the field, Frangelico’s team thought through the user experience of the epic with the following storyboard: 
Child Stories
User Story |
Overall Eval. Criteria (OEC) |
| ‘I know the part number and I want to find it on the system so I can figure out next steps on the repair.’ | How well does this search type work relative to the alternatives? How often is this search used per transaction relative to the alternatives?Metrics: Searches of this type relative to others Sequence of this search relative to other search types Conversion to order from this type of search (%) Candidates for A/B testing: Add/remove UI for user story #3 and see how it affects click-through to subsequent screens. |
| ‘I don’t know the part number and I want to try to identify it online so I can move the job forward.’ | see above |
| ‘I don’t know the part number and I can’t determine it and I want help so I can move the job forward.’ | see above |
| ‘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.’ | How often does this lead to a part order? How will techs that do this perform relative to others?Metrics: Conversion rate to order Customer satisfaction per job of techs in a cohort that use the tool vs. baseline (mean customer satisfaction per job) Billable hours for techs in this cohort vs. baseline (billable hours per week) Candidates for A/B testing: Variations in UI and how they affect conversion to order |
| ‘I want to order the part so that we can move forward with the repair.’ | How many orders complete once they get to this step?
Metrics: |
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’.
Exhibit C: Using the Chrome DEVTOOLS
The Chrome DEVTOOLS tutorials are pretty good and quite short. I recommend checking out–
Inspect and Debug Javascript
There are even small practice exercises for you to use in-context as a warm-up. A few things I would be sure you can do by the end of reviewing these and applying them in the case (or wherever you like):
- Viewing output to the Console. If you add a console statement to the code, do you see its output in the Console?
- Are you able to find and review the lines of JS the Console identifies (just click on the link it shows to the right)?
- Setting a breakpoint in the code and adding variables to the Watch Expressions to see their values. Are you able to observe the values?
Note: There is another item related to the Console called ‘Using the Console’, but I think you’ll find everything you need in the section above. That said, of course feel free to check it out if it interests you.
