Table of Contents
This is a case study for use in a class like Software Development.
Putting Ideas to Work
After years of what he considered ‘desk work’ and too many meetings, Frangelico DeWitt is excited to get his hands dirty. After begging and pleading with his company, “HVAC in a Hurry” (HinH), to get busy with a digital transformation, he’s now the lead on an innovation team.
After spending a few weeks in design sprints to figure out what would move the needle for HinH, they’ve decided to test a web application that helps HVAC (heating and air conditioning) technicians check on the availability and pricing of replacement parts.
They have a set of user stories they think are solid for a first go. They drafted two parallel concepts for these based on comparables and after some exploratory user testing, they’ve settled on ‘concept 2’. 
As a way to articulate the design in more explicit detail, Frangelico volunteered to create a working prototype in HTML.
From Prototype to HTML
Frangelico is excited to put his newfound HTML skills to work. He’s been wanting to practice on something where he’s actually invested in its success. The current prototype on JS Fiddle doesn’t look great or function beyond laying out the wireframe for the first page of the parts application.
Looking at the sample code on JS Fiddle, can you identify all the HTML elements? Can you explain their roles?
Suppose you wanted to create rounded corners on the boxes around the HVAC parts (div elements)? How would you do that? Fork the JS Fiddle and try it out!
Hint: Just Google ‘make rounded corners HTML’ and take it from there. Don’t worry: lots of development happens this way!
How about adding a new HVAC part?
What else do you think is worth trying? Try it out!
Exhibit A: User Stories
These explain the core intent for the team’s new web application.
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 |
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 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: Wireframes
These describe the approach to the user interface the team’s going to detail and test further. For static mockup’s of the two concepts, see this Balsamiq file: Parallel Prototyping at HinH.
Exhibit C: 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 D: Working with HTML
The web and most digital things you can see as a user are built from Hyper Text Markup Language (HTML). It organizes and encapsulates the stuff you see online in various tags, ‘<>’. For example, a first-level heading (heading 1) that reads ‘Hello, World!’ would look like this in HTML:
<h1>Hello, World!</h1>.
The first tag starts the H1 (<h1>) and the second one finishes it (</h1>).
One super important and common such tag is the <div> tag. This tags is a central building block for elements on pages. You’ll see what I mean in the sample code on JS Fiddle.
Stuff Inside the Tags <>: A Note on CSS
In a subsequent case, we’ll dive into Cascading Style Sheets (CSS), a topic tightly interwoven with HTML. Basically, CSS centralizes the styling for your HTML, which is an important job in practice. You’ll see a lot of CSS-based examples as you Google for solutions.
For now, what you’ll see in the JS Fiddle is ‘in-line’ CSS, which is CSS added inside the various HTML tags. For now, the important thing for you to know is that if you see a CSS-based solution for, say, adding borders to your <div> elements that looks like this:
div {
border:1px solid;
}
you can achieve the same thing with HTML markup by adding those same parameters to the style attribute in an HTML tag like this:
<div style="border:1px solid;">
Basically, you add the attribute ‘style’ with an equality sign and then you have a series of key-value pairs separated by semicolons (there’s just one in this example).
Resources
For an introduction to the fundamentals of HTML, this is a good, quick resource: HTML Introduction.
For a more extended and more guided introduction, check out this lesson on Codecademy: Learn HTML: Elements and Structure. The course this is a part of (Introduction to HTML) is rated at 4 hours, so I would stick to just that first lesson, ‘HTML Elements and Structure’, and I would not proceed to ‘HTML Tables’. In fact, you may find you’re ready to roll after the first couple of items in the lesson. Generally speaking, I would do the minimum here that you feel you need to be comfortable that you understand the fundamentals, and press forward with the case. Codecademy also has a bunch of premium features which are probably quite good, but for this purpose I think you’ll be just fine with the free/basic version of the Learn HTML module.
Exhibit E: Adding Images to Your Fiddle
HTML displays images through a reference to where they’re hosted using the ‘src’ (short for ‘source’) attribute. For example, in the snippet below the images is hosted on this site:
<img style="vertical-align: middle;" src="https://cowanstaging.wpenginepowered.com/wp-content/uploads/2017/12/hvac-board-4-post-150px.png" alt="PCB board 2">
So, you need a place online to host any image you want to use. Google Drive is convenient. The steps are:
- Upload the image to your Google Drive account
- Right (or two finger) click it the image and pull up the sharing settings. Make sure the image is set to ‘Public’ (or similar). Copy the URL.
- From the URL, copy the file ID. In this URL, I’ve highlighted the ID in bold: https://drive.google.com/file/d/1X4VMskGu7iW3wtWATn8D7J8VXe_j2jX2/view?usp=sharing
- Using this format, copy in the file ID where you see the placeholder ‘fileID’: http://drive.google.com/uc?export=view&id=fileID. For example, ‘http://drive.google.com/uc?export=view&id=1X4VMskGu7iW3wtWATn8D7J8VXe_j2jX2’.
- Place that URL in the value for the ‘src’ parameter. You can see an example on JS Fiddle here: HTML with image hosted on Google Drive.
