Table of Contents
This is a case study for use in a class like Software Development.
Please note: This case assumes you’ve completed a prior case called ‘Making HTML Manageable with CSS‘.
Into the Wild
Frangelico DeWitt and his team have just started developing 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 prototyping on JS Fiddle (Prototype 3) and that’s been working well, but now the team is ready to expand their activity and they need something more like a working web application. For example, they’re ready for a limited set of early tests with a specific set of technicians and more of the team needs to add functionality and content.
More, Sooner
Exhibit A describes a few of the things they need in the form of user stories. Basically, some users without web design experience need access to add content like help pages and the rest of the team (designers, developers) need to be able to add basic functionality quickly.
While they may switch to one of the company’s standard application platforms soon, the team has decided that a somewhat expanded prototype on WordPress is the best bet for next steps. Initially a blogging platform, WordPress has become popular for other purposes like prototyping and simple web applications. Exhibit B describes the process Frangelico went through to set up WordPress for the teams next steps. In particular, Exhibit B describes Frangelico’s process to identify and customize a Theme for WordPress. Themes deliver a basic ready-to-go level of customization on top of WordPress and are a good way to avoid the work of starting from scratch.
Based on your work and your view of where you might go with it (for your project):
Which WordPress theme did you select? Why? How did you/will you validate it?
How did you port your current JS Fiddle prototype over to WordPress? What updates did you make to the HTML & CSS?
Have your WordPress instance available for classroom discussion.
Exhibit A: User Stories
Below are some user stories the team is working and some they’ve compiled. Watch out for where it says ‘Note:’ for specific items that team discussed needing for their next step.
Epic 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: 
Note: Some general test cases for the epic they’ve developed are:
- Make sure this works well on the Galaxy Note 7 smart phone that Ted carries.
- Make sure we have a help page and can experiment with various help interfaces (live chat, etc.) to tune the experience
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. Note: We need to add this to the prototype. |
| ‘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 Note: We need to add this to the prototype. |
| ‘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: We need to add this to the prototype. |
| 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.’ | Note: We need to add this to the prototype. |
General Notes and Takeaways for Next Step
In general, they need to add a bunch of content-heavy pages and this looks like a good fit for WordPress.
Exhibit B: Using Themes on WordPress
Finding a Theme
The basic idea with Themes is that they’re built to help you use WordPress (WP) the way you want with a minimum of custom work. The trick is to find a good fit. Here are a few questions to consider:
- How well does the theme map to the navigation scheme you want?
- How well does it handle responsive (small/different device resolutions)?
- Is there a particular purpose you want in your theme (eCommerce, photo gallery, etc.)? Themes aren’t always the best place to get this, but it’s often worth having a look?
- Is the theme easy to customize with your own CSS? You’ll find WP itself makes this really easy with a nice editing environment and live previews. You can see that at [your site’s url]/wp-admin and then Appearance >> Themes >> [Your Theme] >> Additional CSS. See also: Adding Custom CSS in WP.
- Is the theme well supported? Has it been updated recently? How many installations do they show? What are the reviews?
The nice thing is that aside from any time you’ve invested in custom CSS, it’s pretty easy to change themes.
HVAC in a Hurry’s Theme
The HinH team wanted a simple theme that had a horizontal navigation like their prototype. They wanted something relatively simple since they a) didn’t need that much that they could anticipate and b) didn’t want to have to do a lot of configuration on a theme. After Google’ing, for instance ‘simple WordPress theme horizontal navigation’ they found a theme called Activello that seemed like a reasonable place to start. You can see the result here: HinH Prototype Site.
They essentially went through two general steps: 1) laying out their navigation within the theme (and misc. configuration) and 2) customizing the CSS, both changing the theme’s some and adding their own.
Laying Out the Navigation
To start editing your theme, log in to /wp-admin and go to Appearance >> Themes and then click the Customize button on the them you’ve activated:
Once there, you’ll see various options to configure the theme:
You may find the theme’s notes helpful, or you may just want to poke through these iteratively, getting the theme to look and function the way you want. For example, this theme has a menu called ‘Menus’ where the HinH team laid out their top level navigation. The ‘Additional CSS’ menu is particularly important and brings us to our next section.
Customizing the Theme’s CSS
There’s a standard menu in these themes to edit ‘Additional CSS’. These overlays a custom style sheet on top of your theme. The control allows you to see changes live on a page which is very helpful. Just select the HTML element you want and edit the CSS.
The HinH team basically changed the existing theme in a few places to get it the way they wanted and then they added the custom CSS they’ve been using for their page elements (like the HVAC part div’s). You can check out their CSS (complete with comments in this text file): HinH Custom CSS on Activello.
