This page contains a full specification for a software application I designed in 2013 and built at the beginning of 2014. The purpose is to show what I could do in a product management role.
This specification provides instructions to build a web application consisting of a series of ASPX pages, which will be made available to the members of the South Bay Pin Pals Bowling League. The application uses the SBPPBL Database Schema document as the underlying data source. Security features have been intentionally omitted as there is no proprietary data, and no reason to suspect malicious activity. The application has not been deployed, and the URLs shown below are for illustrative purposes only.
Users can accomplish a few key actions using the app:
- Update their contact information (change of address, new phone number, etc.)
- View upcoming events and event locations
- View the results of past events
The SBPPBL app uses an ASP.NET Master Page, which maintains a consistent look and feel across an application. The Master Page includes the app’s background, header, menu, and footer. These elements are shown on every page, and are centralized to simplify editing.
The background is a solid color (hex-color: #166F37) upon which the page content panel sits. This panel typically contains what a user would describe as the ‘page’. The background spans the width of the browser, whereas page content panels are a fixed 1000px wide.
The header area is solid black, and also spans the width of the page. The top of the header displays the application’s logo (SBPPBL-Logo.png). The logo uses a special font to appear as if letters have been hit by a bowling ball.
Close-up of the SBPPBL application header.
Getting to any of the ‘Show’ pages (Show Bowlers, Show Venues, etc.) requires clicking one of the tabs in the top menu. When hovered over, tabs lights up with the text color of the typical background color, as defined in the stylesheet. The tabs use rounded top corners to create the look of an actual tab, like a manila folder.
Hover state of two separate top menu tabs.
The footer also uses a full-width solid black background. It contains the standard copyright information seen below.
Close-up of the SBPPBL application footer.
The app uses a simple pagination control, allowing users to navigate from page to page. The ‘previous page’ and ‘next page’ arrow buttons surround the current page indicator, which is an editable textbox. Changing the value (and pressing enter) will take the user to another page. If a value greater than the total number of pages is entered, the user will be taken to the last page of data. On the right side of the panel footer lives a page size indicator. The default number of records per page is 10, but this can be changed to 5, 25, or 50 as well.
Pagination control in the page content panel footer.
Show Bowlers Page
The Show Bowlers page contains pertinent information for every bowler in the league.
Mockup of the Show Bowlers page.
This page contains the player’s photo, name, address, contact info, team name and handicap. The player’s image (Bowlers.PhotoURL) should be displayed to the left of the data. This image references an external URL, and is hosted by a separate website. The images all use the ‘imageDropshadow’ CSS class defined in the stylesheet.
The First Name field (Bowlers.FirstName) and Last Name field (Bowlers.LastName) should be concatenated to appear as a full name. The font should be 14pt font to stand out from the rest of the text on the page. The Address1 and Address2 fields should be on the same line, with the City, State and ZIP Code fields on the line below. The Country field should be on the third line because all of the bowlers currently reside within the United States, and that value takes up a fair amount of horizontal space. All the above fields use the standard ‘tableCellValue’ style from the stylesheet (Styles.css).
The next column contains labels for the other four fields displayed on the page. Labels are required to give context to a few of these fields, such as Team and Handicap, which don’t make much sense on their own. These labels use the standard ‘tableCellLabel’ style.
The final column on the page contains the values which match their corresponding label: Email Address (Bowlers.EmailAddress), Phone Number (Bowlers.PhoneNumber), Team Name (Bowlers.TeamID), and Handicap (Bowlers.Handicap). The TeamID field should be displayed as a foreign key to show the actual team name instead of the ID value. These four fields should also use the ‘tableCellValue’ style for consistency.
Team Name highlighted on the Show Bowlers page.
The panel header for this page contains a few convenience features to help the user find what they want. The Actions button, when pressed, flips the state of a hidden panel to display options of actions to be taken. The options, from left to right, are: Add Record, Export to PDF, Export to Microsoft Word, Export to Microsoft Excel, and Import Data. These choices are grayed out by default, but light up when hovered over to indicate that action can be taken.
The Actions panel expanded (Left). The Add Record and Export to Word buttons highlighted (Right).
The Filters panel works in the same way as the Actions panel, but displays options for sorting the data. The page is initially sorted by CreatedOn Date (Bowlers.CreatedOn), but there are a number of ways the data can be shown. You can sort by First and Last Name, Email Address, City Name, Team Name, Handicap, and the CreatedOn and UpdatedOn Dates. Since the sort options are technically hyperlinks, hovering over one of them will underline the link. This behavior is defined by the stylesheet.
The Filters panel expanded.
The final helpful feature is the search bar on the right of the panel header. This bar searches all fields in the Bowlers table and displays the relevant results.
The search bar in the Bowlers panel header.
There are two image buttons on the far left side of each record. The upper button takes the user to the Edit Record page for that particular bowler. The lower button deletes that bowler’s record from the database.
The Edit and Delete Record buttons.
Edit Bowler Page
The Edit Bowler page allows a user to edit information for any of the bowlers. This is helpful when someone changes their address or improves their handicap.
Mockup of the Edit Bowler page.
The initial focus of the page is on the top-left field, which happens to be First Name. When a field is in focus, the textbox should be illuminated in orange to indicate this clearly to the user.
Initial focus on the First Name field.
All the labels on the page should be vertically-centered on their respective textbox. The label for ‘Address’ should be centered between the Address1 and Address2 fields.
Address label on the Edit Bowler page.
The Team, State, and Country fields use a standard dropdown list. The Notes field uses a 6 row, multiline textbox. The ‘Save’ and ‘Cancel’ buttons are theme buttons, using the dark green color for the button text.
The Save and Cancel buttons.
Add Bowler Page
The Add Bowler page looks much like the Edit Bowler page, except the data is not yet filled in. The three dropdown lists show ‘ ** Please Select ** ‘, indicating that no value has yet been selected. Beyond that, the two pages should be identical.
Mockup of the Add Bowler page.
Show Teams Page
The Show Teams page displays all teams in the bowling league, in addition to their members.
Mockup of the Show Teams page.
The Team Name is the only field shown before expanding a particular row. This field should use a 22pt font to clearly distinguish teams when the rows are expanded. Teams are sorted in alphabetic order.
The Team Members panel has a slightly different layout from the Show Bowlers page. The players’ names use an 18pt font size to clearly differentiate members, but to avoid competing with the team’s name. The handicap, and its corresponding label, uses a 14pt font. The rest of the fields use the Show Table standards established earlier in this document.
Mockup of the Show Teams page with the first row expanded.
In addition to the Edit and Delete buttons, the left button column has an expand/collapse option to show or hide the members of a given team. The Team Members panel displays the bowlers in order of creation (oldest first) with the exception of the team captain always being first.
Close-up of the Show Teams button column with expand/collapse option.
Edit Team Page
The Edit Team page allows the user to edit the Team Name, Captain, and certain bowler information for the selected team.
Mockup of the Edit Team page.
The Top panel only has two fields: Team Name and Captain. The Team Name field uses a normal textbox, and the Captain field uses a dropdown list, which contains only the members of the particular team.
The Actions panel only has one option – Add Bowler. Clicking this button will take the user to an Add Bowler page. Saving this page will add the new bowler to the team being edited. The user should then be redirected back to the Edit Team page.
The Add Bowler button on the Edit Team page.
The filters fly-out is identical to that from the Show Bowlers page since the fields are exactly the same. Clicking a hyperlink once will sort A-Z, and clicking the same link again will re-sort Z-A.
The filters control on the Edit Team page.
Add Team Page
A new team can be added from this page. Since a brand new team will not yet have team members, it is recommended that a user adds a new team, then save the page and edit the team to add new members and choose a captain. While this does make for a pretty sparse page, it is the easiest way to avoid the chicken/egg problem which exists when adding teams and players.
Mockup of the Add Team page.
Show Venues Page
The Show Venues page displays information for all bowling alleys frequented by the league.
Mockup of the Show Venues page.
The fields displayed on this page include: VenueName, Address1, Address2, City, State, ZIPCode, WebsiteURL, PhoneNumber and LogoURL. No labels are used on this page because all fields are understandable without the use of helper text.
The VenueName field uses a 14pt font to allow additional visual separation between rows. The WebsiteURL field is a standard hyperlink, which uses the ‘target = new’ attribute to open the bowling alley’s website in a new browser tab. This hyperlink also uses the standard link style of showing an underline when hovered over.
Close-up of a hyperlink being hovered over.
The LogoURL field is a hyperlink reference to a logo taken from the bowling alley’s website. The images are hosted outside of the application, but are not references to the original logo in case the venue’s webmaster decides to change the image file name. Much like the ImageURL field on the Show Bowlers page, these images all use the ‘imageDropshadow’ CSS class defined in the stylesheet.
The Actions button contains the exact same options as the Show Bowlers page, which can be seen below. The Filters panel contains four fields: VenueName, City, Phone, and CreatedOn. The default sort for this page is CreatedOn, ascending (oldest record first). The Search Bar on the far-right of the panel header searches all fields in the Venues table.
Mockups of the Actions and Filters fly-outs on the Show Venues page.
Edit Venue Page
The Edit Venue page allows the user to edit information for the different bowling alleys. This page is unlikely to be used unless a venue changes their location or alters their website URL.
Mockup of the Edit Venue page.
There is nothing special about this page – it is very similar to other Edit pages in that the textboxes are a fixed width, the Notes field is a 6-row textbox with a vertically-centered label, and drop-downs are an identical width to the other short fields to maintain consistency.
Add Venue Page
The Add Venue page allows a user to add a new bowling alley to the database.
Mockup of the Add Venue page.
The page is identical to its ‘Edit’ counterpart – except for the lack of data. The ‘State’ and ‘Country’ fields should read ‘ ** Please Select ** ‘ to draw attention to their drop-down nature. Other than that, the page is effectively identical to the Edit Venue page.
Show Events Page
The Show Events page displays actual events that take place at a certain time, at a certain bowling alley.
Mockup of the Show Events page.
This page is unique in that the record looks different after the event has taken place. A future event looks like the ones in the mockup above. The EventDate is displayed in 14pt font since that’s the main differentiator between records. The EventStartTime and EventEndTime fields are displayed in 12-hour time, using the following format: 9:00 PM. The actual underlying field is in INT format, but is converted to human readable format on the Show page.
The Prize Money field uses a typical MONEY database format showing full dollars and cents, i.e. $100.00. The final field is the indication of the venue at which the event takes place, and is formatted as a hyperlink. The link, when clicked, takes the user to a Show page for the specific venue, using its ID value. Here is an example of how the URL should be formatted:
These are all the fields shown before an event has happened. After the event occurs, this is what the page should look like:
Mockup of the Show Events page after events have taken place.
The additional data elements are displayed on the right side of the page, beneath the times, prize and venue. The teams are shown in order of their aggregate score (AggTeamScore.TeamScore). This value is fetched from the AggTeamScore table using the GETCOLUMNVALUE function and joining the tables. The actual score itself is displayed in parentheses to the right of the team’s name. The fifth team is omitted from this ranked list both for aesthetic reasons, and as an incentive for teams to avoid getting last place in an event.
Edit Event Page
The Edit Event page allows a user to alter information about an even which has yet to happen. It also allows someone to add the aggregate scores to an event which has taken place.
Mockup of the Edit Event page with Aggregate Team Score panel.
This page consists of two panels: one with information about the event itself, and one with information about the score achieved in the particular event.
The top-left of upper panel contains an important aspect of the event – the date. This field uses a standard .NET date selector control. Here’s how the selector looks when it has been clicked and expanded:
Close-up of the expanded calendar date selector.
Since the time fields are converted on the Show Events page, the Edit page requires they be entered in 24-hour time, meaning a value of 18 will display as 6:00 PM. The value for EventEndTime must be greater than the value of the EventStartTime field. If this condition is not met, the following error message should be displayed:
[An event cannot end before it starts. Please update the End Time to be greater than the Start Time.]
Since PrizeMoney is defined as a MONEY field in the database, the application should recognize this. If the user enters a value of 500, this should be converted to $500.00 on the Show Event page. The next field in the top panel is the venue drop-down. If for some reason the venue for an event needs to change, the user can accomplish this by changing the value of the drop-down and documenting the reason for the switch in the Notes field below.
The second panel on the page is where the Aggregate Team Score records are added. After an event is completed, a user can come to this page and enter the total score achieved by each team.
Add Event Page
The Add Event page is where a user can enter new events taking place in the future. This won’t happen very often because events are added in bulk, however the league organizer will occasionally have to update the schedule to reflect upcoming events.
Mockup of the Add Event page.
This page is very similar to the Edit Event page, except the fields are all empty and there is only a single panel, as opposed to two panels. All fields on the page work in the same way as the Edit page, with the calendar date selector, Start and End Times, Prize Money and Venue. One slight nuance is that the Venue field defaults to the ‘ ** Please Select ** ‘ value, indicating that one must be chosen. All fields on this page are required, except the Notes field.
The SBPPBL application is relatively simple, but contains everything necessary for the bowling league to track progress and manage itself effectively. The app uses all 5 tables in the database and contains 12 main pages, excluding the Master Page.