RODGERS CAPSTONE 1

Mullins Family Web Application

Presented to:

Penfield College at Mercer University

Department of Informatics

Dr. Feng Liu, Chair

Clients: Dr. Denise Brewer and Family

Fall 2017 Senior Capstone

Michael Rodgers

10186261

RODGERS CAPSTONE 2

Executive Summary

The need for families to communicate with each other has existed since the beginning of

time. Since the Industrial Revolution, people have begun to move further and further away from

their families, primarily for work reasons. This has created more challenges for families to stay

in contact. Even though the progression of technology has caused families to drift further apart,

we will attempt to use technology to bring them together.

As many of us are aware, depending on one or a few family members to keep track of the

whole family and plan family events can be a daunting task. This can cause negative effects, if

not done carefully and correctly. Keeping up with a large family can prove to be a big task, even

a full-time job.

Luckily for us, there are many technologies that bridge this gap and make

communications over long distances much easier. Web applications such as Facebook, Twitter,

Instagram, and Google+ have played important roles in bringing family and friends together, but

these tools are not easy to tailor to fit the needs of all groups.

Our solution is to create family web application that focuses on the needs of the client

family and even brings in elements of valuable tools used in social media. The below

presentation attempts to outline the detail on what we have in store for this application to bring it

to life and increase communications with this family, make events better through using excellent

planning tools, and make the jobs easier for the planners, while getting a wider breath of family

members involved in planning and decision making.

RODGERS CAPSTONE 3

Acknowledgments

Throughout my college career at Mercer University, I have been given many

opportunities to work faculty, fellow students, and real-world clients of an array of projects.

These experiences have given me, as a student, a good working understanding on complications

of working with people and their busy schedules. In a perfect world, as we many times

experience in our textbooks, we have all of the information that we need to complete a task.

However, in the world of software development, we must develop the skills necessary to extract

the needs of the clients and translate them into a workable application.

Customer involvement is key in developing in an agile development environment. This

requires many meeting and customer feedback throughout the project. The clients, Dr. Denise

Brewer, Mr. Gerald Carter, and family were tasked with upholding this plan. I would like to

thank them for their continued efforts, understanding through learning processes, and feedback.

The Mullins Family and their representative are a model of the type of clients that we seek for

educational development processes, and I would like to thank them for taking time out of their

busy schedules to meet with me several times to produce a quality application.

I would also like to thank my instructor, Dr. Feng Liu, for her endless efforts in assisting

me with scheduling, technical challenges, and advice throughout the project. Completing a

project of this size during a shortened semester is a major task, but Dr. Liu is good a providing

professional assistance in making it happen. I would also like to thank the Fall 2017 INFM 372

class and Christian Benitez for his good notes and wireframe models.

RODGERS CAPSTONE 4

Mullins Family Web Application

Planning meeting and keeping appointments were key in the planning and development

process of this project. In each meeting we addressed all relevant issues surrounding the

development and deployment of the application. Participants in this meeting included the family

representatives, developers, professor, and any students that will be assisting or advising on

topics. Topics included responsibilities of everyone in support of the initial development and

deployment. Some issues we focused on included: how deliverables will be delivered to the

customer, specific application and database installation instructions, user training needs (if any),

and sustainment/support issues.

Throughout the planning and development process, the clients were asked to participate

in Customer Acceptance Testing (CAT). The primary customer is responsible for identifying and

scheduling testers to participate in the CAT. It is important that we receive feedback as quickly as

possible to proceed with the next steps and complete the project before the end of the semester.

This important phase validates the usability and completeness of all requested functionality.

The student development team was responsible for providing all code and documentation

to the primary customer. They are also responsible for assisting the customer with the CAT

environment. The Project Manager is responsible for defining the process to collect and analyze

reported bugs and discrepancies found during CAT. The development team is responsible for

responding with a Level of Effort (LOE) estimate for all discrepancies identified during CAT.

RODGERS CAPSTONE 5

Research Question

Can automating tasks already performed by family members improve family

communications while saving time? This may seem simplistic, but as we will see throughout

the course of this design project, it is a large task to tackle. In our research, we have

uncovered several underlying tasks and issues that need to be addressed during the course of

this project. Many considerations have to be made, such as the population of the studies,

their ages, backgrounds, and how they react to each other.

Research Methodology

Over the past fifty years, it has been proven many times over that automating tasks can

improve productivity. This has become commonplace in many industries, but how is task

automation been implemented in the consumer market? And what types of tasks benefit the most

from automation in the home?

There are many devices found in homes for making things more efficient, such as

automated HVAC systems and home entertainment systems. However, no other device is used

by consumers as much as mobile telephones. Mobile phones have driven consumer efficiency by

combining the tasks of earlier automation devices into one easy to use device. This makes mobile

phones the target for future developments in efficiency. There is evidence in this with the

explosion in sells in the application market.

It is not difficult to find an app to assist you with nearly every task that you have. But,

are using apps the answer for doing tasks such as communicating with your close and extended

family? During this research, we will be looking at just that. At what level of automating these

RODGERS CAPSTONE 6

communications improve the relationships, and where does the line need to be drawn? We will

also look at the effects of current tools, such as social media, on this subject.

This mixed methods study will address the need to automate a single point of

communications for a family. A convergent mixed methods design will be used, and it is a type

of design in which qualitative and quantitative data are collected in parallel, analyzed separately,

and then merged. In this study, rationalism will be used to test the theory that human beings

achieve knowledge because of their capacity to reason that predicts that practice will positively

influence the practice for family members using the web application. The empiricism will

explore if knowledge is gained through sensory experiences for family members using the web

application. The reason for collecting both quantitative and qualitative data is to gain knowledge

through both the capacity to reason and sensory experiences.

Data Collection Instrument

.

Using a mixed method not only allows us to use many different approaches to gather

information, but it allows us to use the data to cross reference and confirm that the data we

collected is valid and accurate. Throughout this project, as we have already seen to a certain

extent, we will use the following data collection instruments:

Qualitative Approach:

-Client Interview: a very useful tool where you gather information directly from the

end user.

-Research: the review of scholarly material to aid in supporting your topic. This can

cause your topic to adjust as you dig deeper in your research.

RODGERS CAPSTONE 7

Quantitative Approach:

-Retrospective-Perspective Study- this takes two methods and develops trends.

-Online Surveys- allows the researcher to gather a large quantity of data to develop a

conclusion

Project Planning Report

Mullins Family Web Application

The type of interactive system I will attempt to develop is an interactive website that

will give users the ability to communicate and find family members and keep updated on

family milestones and events.

i. Objectives

a. Develop an option for users to receive periodic newsfeed about latest and

upcoming information about the family.

b. Develop a photo gallery to share with extended family.

c. Show family members global presence thorough a graphical map.

d. Give users the option to learn more about their family through history

sharing and quizzes.

e. Use of polls to keep each family member involved as a stakeholder in events

f. Create ways for family members to pay for events

ii. Initial Research/Analysis

a. Conducted multiple interview with members of Mullins Family

b. Did qualitative research on similar issues in business and consumer models

RODGERS CAPSTONE 8

iii. Stakeholders/Users

a. Administrators (Mullins Family members that will upkeep the site)

b. Developers (Michael Rodgers, INFM 372 class, other classes)

c. Subject Matter Experts (other contributors)

d. End Users (Mullins Family)

iv. Conclusion

a. Submit and gather user responses from website

i. Interviews

ii. Polls

iii. User Studies

iv. User Feedback and Analysis

b. Transition webmaster duties to Mullins Family

i. User Training

ii. User/Admin Manuals and Instruction

iii. Tutorials

RODGERS CAPSTONE 9

System Design

The system design in the Alpha and Beta versions of the web application were set to be

written in HTML (hypertext markup language), using Bootstrap, JavaScript, and PHP (hypertext

preprocessor) for calls to the database. While this may have been the preferred and most flexible

method, it presented many challenges in completing all of the tasks that we outlined. Wring all

of our code from scratch would help us avoid following the format that packages have, but it

would take a much longer amount of time and we would not have close to a deliverable product

by the end of the semester. This was taken in consideration and I initially took up the challenge

of making it happen even through the time crunch.

As I progressed through the coding and meeting with the clients, I discovered that I

would not be able to meet the customer obligations at this pace, and we would be missing one of

the most important features of the web application. At the conclusion of web development, we

are set to turn over updating and small development tasks to the administrators designated by the

Mullins Family. While these individuals do have a good working knowledge of computer

applications, I did not want to leave this with a large task to make small incremental changes that

will be necessary for normal upkeep.

This led us to the decision to move the application over to the WordPress format.

WordPress is used by 29.1% of all the websites that is a content management system market

share of 60.0% (Usage, 2017). That being said, there are many benefits to moving to WordPress

such as: ease of use, large library of add-ons, security, user administration, analytics, and large

resource of help available on the Internet. While there are a vast array of templates, add-ons, and

other tools available for WordPress, challenges were presented when trying to find the tools

needed to meet the needs of the client.

RODGERS CAPSTONE 10

While WordPress is free and open source, many of the functional and useful tools come

at a cost. We elected not to pay for any premium content that may cause costs to get out of hand,

but to seek out the best in free content available. For most of the pages, we were able to find

addons that are classified as “Lite” versions. This means that we are using a basic of stripped

down version of premium tools that the publisher put in place to give clients a taste of what it

can do. This is a very good way to start with a new web application. If the client decides to

increase a certain functionality in the future, it will be up to them if they would like to pay of the

services rendered. Many software platforms are following Microsoft’s lead and going to a

subscription based fee versus a flat fee. This can make to price seem low upfront, but it can add

up over time. If you have several add-ons that cost money, you could incur heavy monthly fees.

One of the earliest decisions that need to be made during web development is the type of

database, if any, that is going to be used and a rough layout of the database. We had already

decided to use MySQL, because of its power and cost. The three largest databases used today

are Access, SQL, Oracle, and MySQL. Access is a Microsoft product that is usually bundled with

the Office Suite and provided database solutions of personal use and some small businesses. In

order to use Access on a web application, a license has to be acquired and the application has to

be installed on the webserver where the application resides, thus making it vulnerable to cyber-

attacks. Another Microsoft product is SQL (structured query language), which is a very powerful

database that is used by many major companies. This is a very good and secure database, but it

can cost nearly $2,000 for the standard edition and you will also need a dedicated server. Oracle

is another database developed by the Oracle Corporation and is comparable to SQL is quality and

costs. Another drawback of Oracle DB is the interface or use of a third party interface, such as

Toad in order to interact with the tables and functions. MySQL is becoming one of the widest

RODGERS CAPSTONE 11

used databases by home users as well as small to medium businesses. As many entry level users

graduate away from using Access, they are able to have this tool that is similar to SQL and ODB

without the costs. Even though the name may suggest otherwise, MySQL is not a Microsoft

product. It is actually an open source product developed by Oracle. This make the price of free

appealing too many. MySQL is usually included in packages with consumers pay for web server

space, making it widely used in the personal website community as a preloaded application.

As we shifted development to WordPress, this limited our choices in selecting a database.

Currently WordPress is limited to using MySQL. This did not pose any issues of us, since we

already had a database stood up and were ready to insert and transact. WordPress and its tools

and add-ons will manage most database features for you, so little working knowledge of

databases are needed to use them while using WordPress.

Our next task was designing a user interface (UI). The design of the UI was created and

settled on earlier in the semester by an INFM 372 class. That group, along with the client

decided to pursue a more classical type theme instead of some of the newer responsive themes

that have been created to be more mobile friendly and adapt to multiple screen sizes. The INFM

372 class did a very good documenting client needs and creating a layout. I was able to use the

Vr5.0 version of a wireframe created by Christian Benitez. This wireframe was very helpful and

the fact that it was interactive, made it easier to read the conditions that the client intended.

Challenges are faced when trying to create a web application using a classic web page

layout. There are many conditions that have to be properly coded to make the application

responsive to mobile devices, tablets, and other screen sizes. One approach is to employ help

from Bootstrap, which is a component library used to develop front end solutions. Bootstrap

contains HTML and CSS based design templates for typography forms, buttons, navigation and

other interface components, as well as optional JavaScript extensions (Rebert, 2016). This would

RODGERS CAPSTONE 12

require quite a bit of JavaScript in order to make the interface react the way that it is intended. Some

of these obstacle could have been avoided if we would have explored newer responsive layouts,

such as single page applications.

Since we changed over to WordPress, we solved both of these issues. WordPress has a

vast library of layout templates that you can build on that already have all of the necessary coding

done on them to accomplish any responsiveness issues and compatibility issue. As with many tools

available for WordPress, there are premium level and free or lite editions. As we are trying to keep

the cost to a minimum, we have elected to find a free layout template. After digging through several

of the thousands of free layouts available, we decided on the Tesseract WordPress theme. This

theme does have a premium paid option, but the features available on the free edition meet our

needs.

Using a theme template that is already created saved a lot of time and effort. After uploading

the theme, all we had to do was adjust layout options to match customer requirements, change color

scheme, and update menu settings. Most of these tasks were easily translated from the wireframe

diagram that was provided from the INFM 372 class. The one item that I had to obtain was the color

scheme that was at the request of the clients. The bi-yearly reunion is in Tuscaloosa, Alabama,

home of the University of Alabama. This is a school that has a popular sports team, so they had the

desire to model the color scheme after the school colors of the Crimson Tide. According to the

University Of Alabama Department Of Strategic Branding: colors, fonts and structure should all be

unique to our brand — and should be consistent across all channels (UA, 2015). They have very

strict policies regarding their brand and how it is represented. Since we are using a color and not

a logo or anything that is easily identifiable with the university, we do not need to seek

permission. The only color that we used in the application was crimson also known as Pantone 201,

C 25, R 158, M 100, G 27, Y 79, B 50, K 20, #9e1b32. Most importantly, we used the hex code to

identify the color in our application. It was used in the header, footer, and the application box on the

travel planner.

RODGERS CAPSTONE 13

At this point we have a shell of an application that has a header, footer, a menu, and color

scheme. From here we are almost able to work on the individual pages and add-ons that make

them come to life. Before we move to that we looked at the security, login, and member

management system. This will accomplish several goals for us such as: managing a database of

registered family members, allowing us to secure pages based on registration and login, and giving

our family members a place to find information about other family members.

In the early stages, when we attempted to do this using HTML and Bootstrap, we used PHP

that made calls to the MySQL. I also built modals that allowed the user to enter the information

without leaving the page. This came out very nicely, but was very labor intensive and could be

difficult to maintain for future maintainers. The best option, once again, was to find an add-on that

would accomplish these goals for me while improving ease of use for the admins as well as the end

user. The add-on that was selected is called Ultimate Membership. Once again, it was chosen

because of its functionality of its free version.

Using Ultimate Membership, we are able to just change some of the settings, and our

registration, login, and logout pages are created. The first challenge was that the registration page

did not include all of the information required by the client, so it did require some advance tweaking

to make this happen. One of the best features is how the add-on handles pages that are restricted

to members only. This can be accomplished by a simple check box. The best demonstration of this

is during user login menu creation. This menu contains three items, login, logout, and register. In

the page menu when a user is logged out, they will only see login and register. When the user is

logged in, they only see logout. This is several line of JavaScript and a call to the database that is

accomplished with the click of a box. This will be a good tool that will allow the family admin to

control user access to pages and sensitive information.

At this point we were dedicated to making the application easy to update and change for the

family admin after the reins are passed to them to manage the application. Several tutorials for

WordPress development will guide you to add a click and build feature to your application. While

seasoned developers like to avoid these features, this is a good tool for users that do not write or

RODGERS CAPSTONE 14

understand code. After reading several reviews, we selected Beaver Builder. We installed the free

version, which accomplished all of our goals. The professional version adds quite a few more

features and has very good user interaction, but cost $199. Where many of the add-ons that we

discussed earlier met our needs with the free version, and we did use the free version here, this

would be a great opportunity to utilize the paid version to save several hours of time and easily

create a good application. That cost is fairly high for one application, but for a developer, you can

use the license over several sites, which will marginalize the costs. The Beaver Builder add-on

allowed us to easily build pages graphically using templates and simply dropping them into place.

There were several settings that allowed us to tweak anything that we need to such as font, color,

and size.

One of the most important add-ons that was added was probably the easiest to configure. It

was the PayPal add-on. The PayPal add-on allows you to customize your donation form, like the

one that we put in the donation page for the family scholarship program. Having the add-on made it

easy to create a button and short code to deploy directly to the page. There was even a setting for

developers called sandbox. Sandbox allows you to run test and tweak your settings without actually

doing a financial transaction. With this in place, we received the e-mail address associated with the

Mullins family for the fund and it is live and ready to go. I ran a test in live mode and donated the

first dollar to the fund from the web application.

One of the first features that the client had a vision about when we first met over a year ago,

was a map that gave a graphical presentation of where family members lived around the world. The

thought of putting this together was very exciting. Executing this type of task can be very difficult. It

required many hours of reading and watching videos learning everything that I could about Google

API (application programming interface). With this knowledge in hand and the acquisition of a

Google Maps API Key (needed to call Google maps from your application), I was ready to create the

Mullins family map. With a few lines of code and supporting JavaScript, I had my map. The next

step was to call the MySQL database retrieve the family member’s information to insert into the map.

This proved to be quite difficult. Using WordPress had its advantages and its disadvantages. One

RODGERS CAPSTONE 15

advantage is not having to work with the backend, however that is also a disadvantage when it

comes to a task such as this. Accessing the database using WordPress is not very easy. One of

the main reasons is that almost all of the tables are created by the application or add-ons, so it is

difficult to determine what table and what column to use. After several unsuccessful attempts, I

found some documentation on using an existing add-on (Ultimate Member) that I was using for user

access to manage my database calls for the Google map. This works very well and like in previous

add-ons, it will make it easier for the admins of the future to manage to application, and provides a

secure call to the database.

To make this application fully interactive, we were employed to include a photo and video

gallery that gave the users the ability to upload their own images and videos. They also went a step

further and requested that the uploads be moderated (must be approved by a moderator before

being made public). I was able to find an add-on called User Post Gallery. This is a free add-on that

accomplished the needs that the customer had. There are other applications, such as NextGen that

would require the pay version that would be a good bit cleaner and user friendly. As with most of the

other add-ons, using the free version does work, but will create a few more obstacles for the end

users.

In addition to the add-ons above, I also used a few smaller add-ons such as Ninja Forms and

Travel Search. Ninja Forms helps the user build forms that will submit to the database and/or an

email. Travel Search is a widget that is able to be inserted into your site that allows users to find

flights, hotels, rental cars, and even cruises. There will probably be more add-ons added to this

application over time, depending on the users needs. One that will probably be in the forefront is an

add-on for analytics. Analytics has become a popular way for developers and analyst to analyze

how users use web applications and what needs to be changed to meet their needs.

RODGERS CAPSTONE 16

Cost Analysis

The goal of creating this application for this non-profit entity was $0, and that goal was met,

kind of. While no cost will be passed on to the client, it is good to have an idea of what it would cost

to develop this kind of application. All of the software, infrastructure, and labor was provided for free,

but let us examine what clients that are not as fortunate to be part of this program would pay. In the

real world, as I mentioned above when determining whether premium add-ons should be invested in,

you have to weigh paying for it versus labor hours to make the free version work. Since we elected

for the free software, all of our estimated costs will be in labor.

Estimating labor hours can be tricky. Actual time that I spent coding and researching code

was around 300 hours. However, it would be unethical to charge the client for that many hours.

Most of that time was learning and rework, which is not billable. So, that brings my billable hours

down to close to 100 hours. The next step is to determine a rate. While many professional

developers charge in the neighborhood of $150/hour for their services, this type of service for a non-

profit and a student developer will fetch closer to $30-$50/hour (Career Foundry, 2017). We will

average that out to $40/hour. This will give us a cost of $400 for the web application. What a deal.

Feedback and Results

Feedback was obtained from the clients continuously throughout the project, even before I

was involved. The clients had a good idea of the desired outcome and the INFM 372 class put it to

paper, giving me a blueprint on how to proceed. As development progressed, we were able to have

the clients test the application parts and give feedback as they were in development. This is a very

important part of agile development that ensures that the development team does not proceed to far

off course without the client’s approval. This reduces rework and frustration between the clients and

development team.

The clients recently completed a survey after answering the usability questionnaire and

adding any necessary comments. This is a very valuable document for the development team at

this point of the process. Most of the development work is complete, that will be completed during

RODGERS CAPSTONE 17

this iteration and project phase. The survey allows the development team to create a checklist of

issues that need to be addressed before releasing the application to the client. There are also

opportunities for us to plan for future projects that can be completed on this application in future

courses.

Tracking people’s eye movements can help HCI researchers to understand visual and

display-based information processing and the factors that may impact the usability of system

interfaces (Ghaoui, 2006). Eye tracking has become a very important took in a developer’s

toolbox. By tracking eye and head movements of users while they attempt to complete

predetermined tasks allow developers to see how effective and efficient object placement and

visuals are in an application. One of the biggest uses that I have been a part of using the eye

tracking system is determining where to put a “Buy Now” logo for a book website.

The eye tracking system and its software is still a fairly expensive setup, so availability

for use is not readily available. We have scheduled to do some test using the eye tracking device

on Saturday, December 16th, after this paper is submitted for review. Results of the test will be

submitted in an addendum on the landing page.

Challenges and Impediments

Every development project experiences its share of challenges and impediments. How they

are handled determines the results of the project. Identifying impediments that are beyond our

control is necessary to prevent wasting valuable time. That being said, time was the number one

impediment for this project. In and educational setting with set semester begin and end dates, we

do not have the flexibility to adjust release dates because of development issues, as you would in

the real world. Even though the timetable was identified early, we still took time down a

development path before determining that time would not allow us to proceed.

The other large impediment that we encountered was system infrastructure issues. The fist

WordPress port that we were assigned to crashed and was never able to be recovered. The second

crashed several times before I moved to my private server. These crashes came at inopportune

RODGERS CAPSTONE 18

times, where I had set aside valuable time to work on the project only to have to wait until the next

day to have the server administrator (SA) restart my service. I still have to migrate development to

the Mercer University server, so I hope that it stabilizes for that.

Other smaller challenges ranged from organizing meetings (Dr. Liu played a vital role in this),

waiting on feedback or material from the clients, and spending time finding tools to work in

WordPress without a budget. As stated earlier, the application could be put together very easily with

some pricey premium add-ons available for WordPress. As with impediments that all developers

face, non-traditional students have challenges as we did this semester such as: needing family time,

Columbus Day weekend, Veteran’s Day weekend, Thanksgiving, Hurricane Irma, etc.

Conclusion

As the development begins to wrap up, and the client is only in the initial testing mode of the

integration of the application, it has already become evident that this application will meet their

needs. Our initial goal was to create an application that improved family communication while

improving efficiency. The tools available on this application give family members one place to learn

about their family background, see photographs and videos, stay abreast on current news with the

family, and keep up with information about the next family reunion.

Having this time of information gives the family members their own empowerment. Having a

place where everyone stays informed, makes everyone feels as they are part of the process. That

will in turn make the reunions more enjoyable knowing that they are true stakeholders in the

planning process. In turn, as improvements are made to the application, the reunion committee will

be able to grasp new technologies and reduce that amount of work that they have to put in to plan

these large events.

In the upcoming weeks, updates will be made to the application, as a result of the survey and

eye tracking tests. Upon the completion of the final updates made to this project sprint, we will

migrate the application to the client’s web server as well as Mercer’s web server for further

RODGERS CAPSTONE 19

improvements. There are a few features that the client wanted that were not included that will be

good candidates for future projects. The final step is to train the family administrator, create

documentation for frequently asked questions, and provide tech support for a short period of time.

RODGERS CAPSTONE 20

Bibliography

Ghaoui, Claude. Encyclopedia of human computer interaction. Idea Group Reference,

2006.

(n.d.). Retrieved December 14, 2017, from https://careerfoundry.com/en/blog/career-

change/pricing-freelancer/

Rebert, Chris (July 25, 2016). "Bootstrap 3.3.7 released". Archived from the original on

November 23, 2016. Retrieved December 12, 2017.

Usage of content management systems for websites. (n.d.). Retrieved December 11,

2017, from https://w3techs.com/technologies/overview/content_management/all/

University of Alabama Graphics Standards. (2015, September 15). Retrieved December

12, 2017, from

https://strategiccommunications.ua.edu/img/BRANDINGSTANDARDS_Aug17_Updated10211

5.pdf

RODGERS CAPSTONE 21

Copyrights

WordPress the open source software is licensed under GPL. However, the name WordPress itself is a

registered trademark owned by the WordPress Foundation, a non-profit organization established by WordPress co-

founder Matt Mullenweg.

Microsoft Access, Microsoft SQL are either registered trademarks or trademarks of Microsoft Corp. in the

United States and/or other countries.

Oracle Database, MySQL Copyright © 2002, 2011, Oracle and/or its affiliates. All rights reserved. This

software and related documentation are provided under a license agreement containing restrictions on use and

disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement

or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute,

exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or

decompilation of this software, unless required by law for interoperability, is prohibited.

PAYPAL is a trademark of PayPal, Inc.. Filed in May 3 (2012), the PAYPAL covers Promoting the goods

of others, namely, providing information regarding discounts, coupons, rebates, vouchers and special offers for the

goods of others; promoting the goods and services of others by providing hypertext links to the web sites .

Ultimate Member is a free WordPress plugin that makes it extremely easy to create powerful online

communities and beautiful user profiles with WordPress.

Bootstrap - Copyright (c) 2015 Twitter - MIT License. Bootstrap Typeahead - Copyright (c) 2013 Terry

Rosen - MIT License. bootstrap-select - Copyright (c) 2013-2014 bootstrap-select - MIT License.

JavaScript is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other

countries.

RODGERS CAPSTONE 22

Usability Study Questionnaire

Task# 1: Signup as a new Family Member During the usability test with the family Mullins, Jerry and Denisse mentioned they would like their family users to have access to the entire website, so a disclaimer will be place in the website stating if they register their information will be public

1. No notice about public Information. 2. No instruction on minimum password requirements. 3. Browser is allowed to remember user/password. 4. Registration completion jumps to Profile page. 5. Profile shows Name twice box with a “+” for adding a picture. 6. The activity “gear” should be in the banner. Where it is the dropdown is below the page. 7. There are two different places to load a profile picture.

a. The large rectangle should be a background. b. There are size edits that eliminate perfectly good pictures.

8. What makes the sad face disappear? 9. “About“, “Post” and “Comment” have no landing. 10. An activity “gear” in the banner would allow Profile access. As is once you leave

Profile it can only be reached via Family Directory. 11. Search function is missing.\ from banner.

Task 2: Where is my uncle Bob buried? Denise/Jerry didn’t think that Newborn and Memorial pages should be under family news, instead they would like to have these listed under family history page as a better fit. We explained to Jerry/Denise, that Family history page is designed for their family ancestors.

1. Family News should be a major banner link. 2. Consider adding Weddings, Graduations, Milestone Anniversary’s, Career

Accomplishments.

Task 3: Where is the 2018 Family Reunion? and activity details? Denise suggested to keep the labelling of the buttons consistent to eliminate confusion, also Jerry added that family reunion archival events should be listed from latest to old (2017, 2016,….)

1. This should have its major banner with the minor links across the top and a “Home” link.

2. Fees and Payment link are missing. 3. Should be a label on Travel Planner page. 4. Like to add links to several travel agent referrals.

RODGERS CAPSTONE 23

5. Agenda page is blank.

Task 4: Heidy from Italy wants to book an airline ticket and make a hotel reservation. Denise and Jerry would like to replace with their own list of hotels.

1. The links I provided are missing.

Task 5: Find out local attractions in Tuscaloosa for Heidy's daughter. Denise will be providing a list of local attraction that will be included on the website

1. Graphics needed on this page from the target sites.

System Usability Scale

RODGERS CAPSTONE 24

RODGERS CAPSTONE 25

Using SUS

The SU scale is generally used after the respondent has had an opportunity to use the system being evaluated, but before any debriefing or discussion takes place. Respondents should be asked to record their immediate response to each item, rather than thinking about items for a long time.

All items should be checked. If a respondent feels that they cannot respond to a particular item, they should mark the center point of the scale.

Scoring SUS

SUS yields a single number representing a composite measure of the overall usability of the system being studied. Note that scores for individual items are not meaningful on their own.

To calculate the SUS score, first sum the score contributions from each item. Each item's score contribution will range from 0 to 4. For items 1,3,5,7,and 9 the score contribution is the scale position minus 1. For items 2,4,6,8 and 10, the contribution is 5 minus the scale position. Multiply the sum of the scores by 2.5 to obtain the overall value of SU. SUS scores have a range of 0 to 100.

The following section gives an example of a scored SU scale.

RODGERS CAPSTONE 26

Database

RODGERS CAPSTONE 27

Analytics