Milestone 3

INF3003W:
System Specification
Milestone 3
5 October 2020
University of Cape Town

intElligence – Team 9

Gordon Cook
Jenna Jones
Mahima Daya
Tanweer Ismail

Contents
1. Introduction................................................................................................................................4

2. Technology Platform..................................................................................................................4

2.1 Hardware............................................................................................................................. 4

2.2 Operating System/System Software....................................................................................4

2.3 Database Requirements......................................................................................................6

2.4 General Requirements:....................................................................................................... 6

3. Deployment Diagram.................................................................................................................7

4. Database Design....................................................................................................................... 8

4.1 Entity - Relationship Diagram..............................................................................................8

5. Data Dictionary.......................................................................................................................... 9

6. Expanded Class Diagram........................................................................................................14

7. Validation Controls.................................................................................................................. 16

7.1 Input Controls.................................................................................................................... 16

7.2 Data Entry Validation.........................................................................................................17

7.3 Field Combination Controls............................................................................................... 17

7.4 Output Controls................................................................................................................. 18

7.5 Database Controls.............................................................................................................19

7.6 Built-In Validation...............................................................................................................19

8. User Empathy Maps................................................................................................................20

8.1 THCT CEO........................................................................................................................ 21

8.2 THCT USER...................................................................................................................... 22

8.3 THCT ADMIN STAFF........................................................................................................23

8.4 User Experience Design....................................................................................................24

8.5 The Contexts of the Users.................................................................................................31

9. The Main Work Tasks..............................................................................................................35

10. Style Guide for UI Design..................................................................................................... 37

11. Wireframe Mockups..............................................................................................................41

12. Clever Features Included in the Interface Design.................................................................47

13. Updated Task Board.............................................................................................................48

14. Conclusion............................................................................................................................ 52
Table of figures

Figure 1 Deployment Diagram..........................................................................................................7

Figure 2 Tygerberg Hospital Children's Trust Logo........................................................................37
Figure 3 Website Colour Scheme...................................................................................................38
Figure 4 Alvania Font......................................................................................................................39
Figure 5 Nunito Sans Font..............................................................................................................39
Figure 6 Task Board 1.................................................................................................................... 49
Figure 7 Task Board 2.................................................................................................................... 50
Figure 8 Task Board 3.................................................................................................................... 51
 1. Introduction
This System Specification Document aims to provide a detailed analysis of the hardware and
software system requirements for The Tygerberg Hospital Children’s Trust (THCT) story telling
system. Other technical requirements such as the database design, expanded class diagram and
validation controls are included. The second half of the document highlights the most important
elements of the user experience design, which includes user contexts, style guides and wireframe
mock-ups.

2. Technology Platform
2.1 Hardware

2.1.2 Client Side

The THCT story telling system will be implemented as a web application. The system can be run
on several devices such as laptops and desktop computers, as well as smartphones. However,
the user experience will be different due to the smaller screen size.

2.1.3 Server Side

The THCT story telling system hardware components will partly be handled by Microsoft Azure
and will be hosted in the cloud, it will also handle the authentication. In the case of it unable to be
stored in the cloud, a physical storage which can store all user data and the application, will be
handled by the data storage company to maintain.

2.2 Operating System/System Software

2.2.1 Client Side

The system users will need a web browser software such as Google Chrome, Internet Explorer
etc. The system is accessed through the web browser via the internet. One of the main benefits of
this web-based platform is that it can be accessed from anywhere at any time, provided there is an
internet connection. The other advantage is that the system is device independent, meaning
specialised hardware is not required to use it.
 Software Platform Requirements
Desktop browser  Microsoft Internet Explorer 11+
 Microsoft Edge
Latest version of:
 Firefox
 Chrome
Mac Latest version of:
 Safari
 Firefox
 Chrome
Android  Devices running Android OS 4.0 and later (a supported processor
and operating system are required.)
 Browser
iOS  Devices running iOS 5 and later
 Safari

2.2.2 Server Side

The website will be built using Microsoft Visual Studio Community 2019, version 16.63. The web-
based application can be deployed to the cloud, to make it available for stakeholders to use.
Visual Studio and Microsoft Azure will be the cloud computing service, as a platform when
building, testing, deploying, and managing applications and services of the THCT story telling
system. Through Visual Studio, the Microsoft SQL Server Management Studio will be the main
software for database management. .NET Framework 4.5.2 or above is required to install Visual
Studio. Visual Studio requires .NET Framework 4.7.2 to run, but this will be installed during setup.
 Hardware
 1.8 GHz or faster processor. Quad-core or better recommended
 2 GB of RAM; 8 GB of RAM recommended (2.5 GB minimum if running on a
virtual machine)
 Hard disk space: Minimum of 800MB up to 210 GB of available space,
depending on features installed; typical installations require 20-50 GB of free
space.
 Hard disk speed: to improve performance, install Windows and Visual Studio on
a solid-state drive (SSD).
 Video card that supports a minimum display resolution of 720p (1280 by 720);
Visual Studio will work best at a resolution of WXGA (1366 by 768) or higher.

Supported Operating Systems

Visual Studio 2019 will install and run on the following operating systems (64 bits
recommended; ARM is not supported):
 Windows 10 version 1703 or higher: Home, Professional, Education, and
Enterprise (LTSC and S are not supported)
 Windows Server 2019: Standard and Datacentre
 Windows Server 2016: Standard and Datacentre
 Windows 8.1 (with Update 2919355): Core, Professional, and Enterprise
 Windows Server 2012 R2 (with Update 2919355): Essentials, Standard,
Datacentre
 Windows 7 SP1 (with latest Windows Updates): Home Premium, Professional,
Enterprise, Ultimate

2.3 Database Requirements

To allow for compatibility when interfacing with Visual Studio and other associated systems THCT
will interact with, for example the existing website and existing database, the SQL framework will
be used for the THCT story telling system.

2.4 General Requirements:

 Users must have an active valid email address to register for a membership
 SMS (Snap Scan mobile app required)
 Internet connectivity must be present for the THCT system to run on these hardware
platforms
 3. Deployment Diagram
Below is a structure diagram used in modelling the physical aspects of an object-oriented system, which shows the
connections that make up the THCT system.

Figure 1 Deployment Diagram

 4. Database Design
4.1 Entity - Relationship Diagram

This entity relationship diagram (ERD) shows the relationships of entity sets stored in the THCT database. An entity set is a collection of similar entities. An entity in this context is an
object, a component of data. These entities can have attributes that define its properties.
 5. Data Dictionary
Key fields highlighted in yellow are defined as a composite key for that specific entity. The data dictionary displays the set of information describing the contents, format, and
structure of the THCT database and the relationship between its elements which are used to control access to and manipulation of the THCT database.

Story
Attribute Type Key Allow Nulls Description
StoryID integer Primary Key No Unique story identifier
StorytellerID integer Foreign Key No Storyteller identifier
StaffID integer Foreign Key Assigned staff member identifier
MetricsID Integer Foreign Key No Story metrics identifier
DateSubmitted datetime No Date of story submission
StoryCategory Int No
Title nvarchar(300) No Story Title
Introduction nvarchar(4000) Story Introduction
Body nvarchar(4000) Story Body
Conclusion nvarchar(4000) Story Conclusion
BrandedStatus boolean Branded story status indicator
PublishedStatus boolean Published story status indicator
DatePublished datetime Date story was published by a staff member to the
website.
DateEdited datetime Last edited date
Comment
Attribute Type Key Allow Nulls Description
CommentID integer Primary Key No Unique comment identifier
StoryID integer Foreign Key No Unique story identifier
UserID integer Foreign Key No Unique user identifier
Comment nvarchar() Comment content
Date Datetime No Date of comment submission
User
Attribute Type Key Allow Nulls Description
UserID integer Primary Key No Unique user identifier
FirstName varchar() No User first name
LastName varchar() No User last name
Staff_Story
DateOfBirth datetime User date of birth
The StaffID andvarchar()
Email StoryID are both foreign keys, and together they
User formaddress
email a unique composite key.

Phone
Attribute integer
Type Key Allow NullsUser Description
phone number
Password varchar() No User password
StaffID integer Foreign Key No Unique staff identifier

StoryID integer Foreign Key No Unique story identifier

Storyteller
Attribute
DateAssigned Type Key
datetime Allow Nulls Description
Date story was assigned to staff
StorytellerID integer Primary Key No Unique storyteller identifier
UserID integer Foreign Key No Unique user identifier
Consent bool Storyteller Ts & Cs accept indicator
File
Attribute Type Key Allow Nulls Description
Admin Staff
FileID
Attribute Type integer
Key Primary Key
Allow Nulls No
Description Unique File identifier
AdminStaffID
FileName integernvarchar(255)
Primary Key No Unique admin staff identifier
Stores the name of the file
UserID integer Foreign Key No Unique user identifier
ContentType nvarchar(100)
AdminPrivileges bool Admin privileges indicator
Content varbinary(MAX) The file content is stored in binary format. This is represented
as an array of bytes in .NET which Entity Framework maps to
StoryMetrics
the SQL Server varbinary(max) data type.
Attribute Type Key Allow Nulls Description
MetricsID integer Primary Key No Unique metrics identifier
StoryID integer Foreign Key Unique story identifier
FileType int Describes the type of file e.g. profile picture or story photo.
Views integer Number of views
FileType is an enumeration
Likes integer Number of likes
Shares
StoryID integer int Number of
Foreign Key Noshares Unique story identifier
Report
Attribute Type Key Allow Nulls Description

ReportID integer Primary Key No Unique report identifier

CreationDate date Report creation date

StartDate date Report start date

EndDate date Report end date

TotalStoriesSubmitted integer Count of all stories submitted

TotalStoriesPublished integer Count of all stories published

TotalShares integer Count of total shares

TotalViews integer Count of total views

TotalLikes integer Count of total likes

Averageviews double Average of total views

AverageShares double Average of total shares

AverageLikes double Average of total likes

StaffID integer Foreign Key No Unique staff member identifier

 6. Expanded Class Diagram
The THCT class diagram in the Unified Modelling Language (UML) showcases the type of static structure diagram which describes the structure of a THCT story telling system by
showing the THCT system's classes, their attributes, operations (or methods), and the relationships among objects.
In addition to the domain classes, the following controller classes will be included. They are responsible for handling user requests and returning an appropriate response:
 7. Validation Controls
These THCT validation controls are used to implement page level validity of data entered in the
server controls.

7.1 Input Controls

7.1.1 Textboxes
Textboxes will be used for the users to register and log in, as well to fill in the story template with
the specified data input through data validation controls to allow for data validity. Textboxes are
used in the case if text is required to be string, or an email address.

7.1.2 Buttons
Buttons will be used to allow the user to interact with the THCT system, to allow for appropriate
functionalities to be put into action. An example of button application is when the user clicks the
submit button to submit the story template or to login for the system to verify their profile.

7.1.3 Login Controls

Login controls will be used to implement access control for the different users of the views of the
THCT system. This will be done by allocating a role scheme to ensure that different users access
different user interfaces. Staff members will have access to the “Manage Stories” webpage, where
all submitted stories will be displayed.

7.1.4 Menu Controls

Menus controls will allow for simple navigation to various webpages of the THCT website
categories. Menus bar will include Home, Stories, Donate, Report, About and Contact page.

7.1.5 API controls

API controls will be used to allow users to register on the THCT system using a social media or
Google accounts.

7.1.6 Third Party Controls

Third party controls such as Snap Scan will verify the user through SMS, this will be implemented
into the THCT payment system to improve the security and simplicity of the system and to ensure
users that the system is secure.
 7.2 Data Entry Validation

7.2.2 Value Limit Controls

Value limit controls for numeric cell phone numbers will be used. This is to ensure that the number
falls under the specified range. Text fields will also be used for the story template input, which
allows for a maximum and minimum number of characters. Users will be able to upload a
maximum of three images, of a maximum file size to accompany their story.

7.2.2 Data Validation Controls

Data validation controls will be used to ensure that data entered by the user into the various input
fields is valid and correct. Passwords will have to be of a certain length and strength. User’s email
must follow the “x@y.domain” format.

7.2.3 Restriction Controls

Restriction controls will be used to restrict users from entering information into certain fields that
have predefined values, such as drop-down lists for categories when creating a story. Restriction
controls will prevent users from altering data in certain fields. Storyteller’s will be able to edit their
story before it is submitted for review and if a THCT Staff Member requests additional information.
Staff members will be able to edit a story once the template has been submitted for review and
even after it has been published. The Manager cannot edit stories but can generate a report.

7.3 Field Combination Controls

7.3.1 Completeness Controls

Completeness controls will be used on the registration, log in, and story template page to ensure
that all required fields are complete. The THCT system will not accept any forms that the user
requested to submit unless all the required fields are filled in.

7.3.2 Authorisation Controls

Authorisation controls will ensure that only registered users will have access to certain functionality
of the THCT system. For example, the regular user will only be able to view regular stories and the
recurring donor will be able to view branded stories in addition to this.

7.3.3 Automated Entry Controls

Automated entry controls will populate certain fields based on entries in other fields and previous
selections by the user. For example, when a storyteller inserts text into the story template which
they partly complete but never submit and later come back to complete it, the existing answers to
the template will be visible and already filled in.
 7.4 Output Controls

7.4.1 Display Controls

Display controls will be used on the story page for the administrator to view details of the stories
that are being processed by the system and THCT Admin Staff. Display controls include grid views
that will provide a summarized output and detail views that will provide a more detailed output.
Summary line and bar graphs will be displayed on manager-generated reports. These graphs will
provide insights into the impact of each story.

7.4.2 Completeness and Accuracy controls

Accuracy and completeness controls will ensure that all outputted data is correct and suitable and
all relevant information is being displayed. This will be important in the reporting, graphing and
averaging of the THCT story telling system report elements.

7.4.3 Destination Controls

Destination controls ensure that all information is sent to the correct and relevant users to of the
system. For example, the story template once submitted will be directed to a THCT Admin staff
member for review.

7.4.4 Audit trail

The THCT system will be able to trace the transactions related to the donations or recurring
payments made. This will be a manual process. The system will keep track of the date and time a
story template is submitted, the last time it was edited, and when it was published for all users to
see. The details of the staff member that completed these actions will also be stored.

7.4.5 Access restrictions

Access restrictions will be used to monitor access to the system using log in functions where users
will be required to enter both their username and password to access relevant functionality. This
will ensure that users are provided access to different systems output depending on their roles.

7.4.6 Navigation Controls

Navigation controls will help the user to interact with the system and to navigate easily through the
system.
 7.5 Database Controls

7.5.1 Update Controls

Update controls will be used to manage data from multiple resubmissions of the same story
template. This will prevent conflicts and prevent data from being overwritten; for example, when
the storyteller would like to resubmit or make changes to the same story template, no story will be
duplicated (a different key will be given for each new story).

7.5.2 Transaction Logging Controls

Transaction controls will be used to log all updates to the database to keep track of the updates
made by the THCT donors

7.5.3 Access Controls

Access controls will be used to restrict access to the database to authorised users only. The
database will be available to THCT Admin Staff members to access or modify data.

7.5.4 Data Encryption

Data encryption will be used to encode sensitive information contained in the database, such as
the user’s passwords.

7.5.5 Backup and Recovery Protection

Backup and recovery protection will be used to protect the database from information loss as the
database contains important and sensitive information such as the stories and the user personal
details. Frequent backups of the database will be implemented throughout on a timely basis.

7.6 Built-In Validation

 Client-side input validation will be performed on the client’s browser to validate information
that is being entered or edited. The story template will not be submitted if there are any
errors and the user will be notified by the THCT Admin Staff if additional information is
required.
 Email validation will be used to confirm the email addresses used to register. A test email
will be sent to the specified email address, requesting confirmation.
 Tooltips and messages will be used to guide the THCT system users when entering
information.
  Users of the system will be required to log in and will be given different access according to
the role associated with their log in details. Log in information for the roles of THCT Member,
Administrator Staff and Manager will be encrypted in the database.
 Controls will be used to disable certain fields to restrict certain users from editing information
that should remain unchanged. This would prevent the user and THCT manager from editing
information entered by the storyteller on the story template.

8. User Empathy Maps

The maps below explain each user’s context and shows how using the THCT system affects them,
to help the designer understand the users. It highlights the main experiences and concerns of the
THCT user. It considers the user’s feelings whilst using the website and considers the user’s
general life experiences.
 TEAM 9 : MILESTONE 3

8.1 THCT CEO

Empathy mapping is an exercise that captures the attitudes and behaviors of the THCT CEO, giving UX professionals a quick visual reference to understand the THCT CEO’s
mindset.
 TEAM 9 : MILESTONE 3

8.2 THCT USER

The empathy map below is a collaborative visualization used to articulate what we know about a THCT system user. It externalizes knowledge about users to create a shared
understanding of user needs, and aid in decision making.
 TEAM 9 : MILESTONE 3

8.3 THCT ADMIN STAFF

The empathy map below represents a simple, easy-to-digest visual that captures knowledge about a THCT Admin Staff behaviors and attitudes. It is a useful tool which helps our
team better understand the THCT Admin Staff user THCT system.
 8.4 User Experience Design

Description of the users of the application

Jason Falken

Occupation: Chief Executive Officer

Demographic Description: Supported by many years of exploring, discovering, and implementing

technologies in the applied sciences industry, I have discovered a passion
for a future in innovation-led businesses. I am currently the Chief Executive
Officer of Tygerberg Hospital Children’s Trust. I am now focusing on
facilitating initiatives where better ways of thinking and doing can unleash
greater value by designing better business
Motive for use of the web-based There is a huge amount of content sitting with our patients’ experiences and
system: I feel that a community can be made where people from all over can engage
with our patients and read their stories. These stories can create a platform
for almost anyone to be a part of. The stories, combined with various
branding tactics can be used as a source of funding where readers can
decide to donate to the various departments in the trust such as: Neonatal,
General Pediatrics, Specialised Care and Social Development.

Usage intent for the web-based system:
 Take upon the Administrator role by ensuring that everything is
running smoothly with the application and have the rights to approve
or revoke anyone or anything when needed.
 Generate reports on how many stories were posted and the impact of
the stories through comments and likes.
 Create a story on behalf of Tygerberg Hospital Children’s Trust.

Usages the persona will avoid:  Creating stories as a patient based off past experiences.
 Donating as a user towards the trust.
 Approve of patients’ submitted stories.
 Prisha Robinson

Occupation: Public Relations Officer

Demographic Description:
I am 36 years old and currently working at Tygerberg Hospital Children’s Trust
as a Public Relations Officer. I have been working with Tygerberg Hospital
Children’s Trust for 2 years and it has been one of my best experiences to date.
I love engaging with people and being in this position allowed me to meet so
many people and I appreciate all the relationships that I have built.

Motive for use of the web-based I have heard about the Tygerberg Hospital Children’s Trust Story project for a
system: long time and it is exciting to see it in action. It is an honor to be appointed as an
admin staff member for the application. I will oversee inspecting patients’
submitted stories for proper use of English and grammar as well as checking for
any profanity before publishing them for the public to see and read. I am also
responsible for making certain stories of high quality a Tygerberg Hospital
Children’s Trust branded story. Since this is a new project and my first time
engaging with something new and unique, I am very excited to be a part of this
project and would really like to see it succeed.

Usage intent for the web-based  Check all patients’ submitted stories for any grammatical errors or
system: profanity used, and then correct or remove the errors.
 Approve of patients’ submitted stories if they meet the requirements,
which will then be released for the public to see and read.
 Make a story a Tygerberg Hospital Children’s Trust branded story if the
story is very impactful.
Usages the persona will avoid:
 Creating stories as a patient based off past experiences.
 Donating as a user towards the trust.
Occupation:
Demographic Description:
Motive for use of the web-based system:
Usage intent for the web-based system:
 Generate any sort of management reports.
Bruce Bayne
Retired
I am 61 years old and have recently entered retirement. Before
retirement I managed to acquire a large amount of investments in
properties and shares so that I would be financially secure during
retirement. During my youth I always tried my best to give back to the
community by helping on fundraisers or help feeding schemes. After
my first year of retirement I discovered that I have saved up way too
much and I have too many investments. I decided to start donating to
various organisations in South Africa
I try my upmost best to help communities in need, but since I am
getting older it became difficult for me to physically help at charity
events. However, I can contribute financially towards various
organisations. I have heard about Tygerberg Hospital Children’s Trust
starting a story platform where patients will be able to share their
experiences and I am very excited to engage with these stories. I am
very keen on to donate to specific categories within the trust especially
the Specialized Care department as I have a soft spot for children who
are in that specific circumstance.
 Read various patients published stories on the platform.
 Donate to different categories within the trust.
 Become a recurring donor and view branded stories.
Usages the persona will avoid:
Occupation:
Demographic Description:
Motive for use of the web-based system:
Usage intent for the web-based system:
 Any admin or staff website features.
 Creating stories as a patient based off past experiences.
Betty Fox
Unemployed
I am 35 years old and currently am a hairdresser at All About Hair. I have
a 11-month-old son, Tom, which I love very much. My husband has died 2
months after Tom was born from stage 4 lung cancer and I have raised
Tom alone since then. I am trying my best to find a job to be able to
provide for Tom but due to the Covid-19 lockdown, I am finding it
extremely difficult.
Tom has suffered from severe acute malnutrition since birth and since I
am struggling to find employment and my husband has died, I really
struggled to find Tom the proper treatment and diet. However, I reached
out to Tygerberg Hospital Children’s Trust for help and they helped us
without hesitation. They helped Tom with this new machine they bought
recently, and I was so happy Tom was finally being treated. I really would
like to share my story for everyone to read to show my appreciation
towards Tygerberg Hospital Children’s Trust.
 Register on the Tygerberg Hospital Children’s Trust Story platform.
 Create a story on the Tygerberg Hospital Children’s Trust Story
platform for everyone to read and engage with.
Usages the persona will avoid:  Any admin or staff website features.
 8.5 The contexts of the users

A user context means all the permissions and access settings that are provided to a user will be followed strictly

THCT Story Submitter

Usage and  Login/Register
age  Submit Story
 Fill out Story Template
 Review Unpublished Story
 Edit Story
 Delete Story
 View Published Story
 Update Published Story
Design  User interface that is easy to navigate
Goals  A template that provides guidelines and validation
 A fast and easy editing story process
Location  Users will use the website from anywhere in the country.
Device  Mobile Phone
 Notebook
 Tablet
 PC
 Laptop
Frequency  The user will use the website frequently to see the story progress

Admin Staff Member

-Any employee of Tygerberg Hospital Children’s Trust that has been given privileges by the administrator
Usage and  Login into the system with admin staff member privileges.
age  View, Edit or Delete submitted stories before they are published.
 Publish submitted stories for the public to view
 View, Edit or Delete published stories.
 Give stories a Tygerberg Hospital Children’s Trust Branded Status
 Give users who become recurring donors a recurring donor privileges which allow them to
view branded stories.
 Delete user posted comments.
Design  User interface that is easy to navigate
Goals  A fast and easy publishing and editing story process
 A modern-looking and uncluttered user interface that is easy to use and responsive.
 Easy to understand controls for all the features that will be used.
 Easy to follow process on publishing submitted stories
 Fast processing of inputs.
 Automated update of the website to display all recent changes and inputs.
Location  Users will use the website from anywhere in the country.
Device  Mobile Phone
 Notebook
 Tablet
 PC
 Laptop
Frequency  The user will use the website frequently to update the story progress
 The user will use the website frequently to run regular maintenance and website traffic
 The admin staff member will use the application daily to check if new stories are submitted
and to check them so they can be published. They will also have to check if a user has
become a recurring donor so they can update that user’s privileges.
THCT Once-off Donor
Usage and  Upgrade to Premium
age  Make Payment
 Able to receive Payment Confirmation
Design  Snap scan visible code to scan
Goals  Aesthetically pleasing and easy to navigate website

Location  Users will use the website from anywhere in the country.
Device  Mobile Phone
 Notebook
 Tablet
 PC
 Laptop
Frequency  The once-off door will not use the website frequently, once the donation has been made

THCT Regular Member

Usage and age  Login/register
 Logout
 Register/upgrade as Premium Member
 Able to receive payment details
 View stories (branded or normal stories)
 Comment on stories
 Share stories

Design Goals  Aesthetically pleasing and easy to navigate website

 An easy registration user interface
 A secure looking webpage when filling in payment details
 Quick and easy way to comment and like in real time
Location Users will use the website from anywhere in the country
Device  Mobile Phone
 Notebook
 Tablet
 PC
 Laptop
Frequency  The user will visit the website occasionally

Administrator
-The only person who will have administrator privileges is Jason Falken
Usage  Login into the system with administrator privileges.
 Generate reports on how many stories were posted and the impact of the stories through
comments and likes.
 Give or remove employee Admin Staff member privileges.
 Create a story on behalf of Tygerberg Hospital Children’s Trust.
 View, Add, Edit or Delete any published story.
 Add or Delete any comment.
Design Goals  A modern-looking and uncluttered user interface that is easy to use and responsive.
 A simple reporting feature that will allow the administrator to make good business
decisions.
 Fast processing of inputs.
 Automated update of the website to display all recent changes and inputs.
Location Users will use the website from anywhere in the country
Device  Desktop Computer
 Laptop
 Tablet
 Frequency The administrator will use the application when an event happens, and he wants to post a story
on behalf of Tygerberg Hospital Children’s Trust. The administrator will use the application at the
end of every month to generate a report to do checkups on how the story platform is performing
and make appropriate business decisions.

THCT New User

Usage and  Login and Register
age  Select Register New Member Option
 Able to receive successful registration email
 View normal stories
 Like and comment on story
 Register and Login into the system as a user.
 View all published stories.
 Create and submit a story based off past experiences.
 Delete a story if the user is the author of the story.
 Like or add a comment on any published story.
 Donate towards the Trust once off or on a recurring basis through Snap Scan.
 View branded stories if the user is a recurring donor.
Design  Aesthetically pleasing and easy to navigate website
Goals  An easy registration user interface
 A secure looking webpage when filling in payment details
 A modern-looking and uncluttered user interface that is easy to use and responsive.
 A neat and simple view of all published stories for the user to view.
 Easy to follow process to register and create a story.
 A simple template for when a user is creating and submitting a story to minimize data
input error.
 An upload process that is easy to use if the user would like to add pictures to their story.
 The use of Snap Scan to make donations easier and secure for the user.
 Fast processing of inputs.
 Automated update of the website to display all recent changes and inputs.

Location  Users will use the website from anywhere in the country.
Device  Mobile Phone
 Notebook
 Tablet
 PC
 Laptop
Frequency  The user will use the website frequently as it is a member and expects to make use of
what has been signed up for
 Depending on the user’s will to use the application, the user will use the application
whenever he/she decides to view published stories, wants to create a story, or would
like to donate towards the trust.
 9. The main work tasks
The diagram below shows the functionality from the viewpoint of a storyteller, a regular member and recurring donor.

 A regular member will not have access to the “Tell Your Story” web page; they would need to register as a storyteller. When a
user clicks on the “Our Stories” menu item, they can select either patient stories (that have been submitted by
patients/families) or newsroom stories, which include radio clips, newspaper, and magazine articles. They will be able to search
and filter using story categories (Neonatology, Specialised Care, General Paediatrics or Social Development), dates and
keywords. A list of stories will be displayed, and the user can click on a story to read further.
 Only recurring donors have access to branded stories
The second diagram shows the functionality process from the viewpoint of the admin, manager, and story editors.
 Story editors will be allocated stories to review, edit, publish, and update. They will also create, edit, and publish radio
clips, newspaper/ magazine articles on the Newsroom page.
 The Manager will be able to generate and view a report that includes a summary of the number of new registered
users, the number of stories submitted, the impact of stories through the average number of comments, likes and
shares. Various filters can be applied such as period (monthly or annual) and story category (Neonatology, Specialised
Care, General Paediatrics or Social Development). The manager can export the report in multiple formats or print the
document.
 TEAM 9 : MILESTONE 3

The following functionalities are a basic representation of the more complex diagrams above
Here the THCT Admin should be allowed to review a story, assign a story status, publish the website, update the story details, access and generate reports and manange user roles.

THCT
ADMIN Access THCT Website

5. Access and Generate

1. Review Story 2. Assign Story Status 3. Add/Publish Website 4. Update Story Details 6. Manage User Roles
Reports

2.1 Assign Branded or

1.1 Edit Story
Regular Status

1.1. Send Request for

Additional Information
 TEAM 9 : MILESTONE 3

 Here the Regular User can login, register, upgrade to premium, view stories, comment and share the stories

 The general user should be given the basic functionality of login, registering, viewing non branded
published stories and liking and commenting on stories.
 The Story Teller
should be able to
login, register, fill

story template, review

unpublished story,
view and update published
stories timely

.
 10. Style guide for UI design
This style guide analyses the various design elements and patterns that will make up the THCT stories website. The
goal is to create a consistent website that invokes emotion by enhancing patient stories with visually appealing graphics
and colours. In order to increase brand recognition and the effectiveness of fundraising campaigns, the style elements of
the existing Tygerberg Hospital Children’s Trust website will be followed closely.

Visual Hierarchy
The website content should be displayed logically and be easy to navigate. Important information should be accessible
through the navigation menu in three or less clicks. Website elements will be displayed in a manner that suggests their
level of importance. This will be achieved by utilising the following five visual hierarchy elements: scale, colour, contrast,
alignment and proximity. There should also be a balance between text and images, to ensure that website users do not
experience information overload. The F-shaped pattern will be applied to our patient stories. The most important
information will be displayed in the top left corner – as the majority of users will read from top left to bottom right.

Logo

The Tygerberg Hospital Children’s Trust logo was inspired by the physical structure of the hospital – divided into the four
sections or baskets of care. The logo and tagline featured below should be used wherever possible. The individual
silhouette images will be used to represent the various baskets of care.

Figure 2 Tygerberg Hospital Children's Trust Logo

Imagery
According to the Trust’s image guidelines, images should “portray the work that the hospital does with the children in a
positive, empowering light, emphasising the excellent work that is being done.” In order to encourage funding, the
website should also highlight the “vast equity gaps in funding” and the “impact that a chronic lack of resources has on
the ability of the hospital to do even more good work.”

Where explicit consent has been given, stories should ideally be accompanied by images or videos of the patients or
volunteers. This will help create a connection and invoke an emotional response from website viewers. If consent has
not been given, images that show the special relationships between patients, their caregivers and hospital staff should
be chosen. Examples include close ups of children’s hands or feet.
Colour Scheme
There are four primary brand colours that will be used extensively throughout the website. These colours correspond
with the trust’s four main baskets of care: light blue for neonatology, purple for specialised care, yellow for general
paediatrics and orange for social development. These will be applied when categorising and displaying patient stories.
The secondary colours will be used for text and other graphical elements. Bright, joyful colours that appeal to children
have been selected.

Figure 3 Website Colour Scheme

Typography
The trust’s logo was created from the Alvania font. It is quirky and playful but should be used sparingly. Nunito Sans font
will be used for the trust’s logo tagline and the majority of text found on the website. Various weights will be used to
achieve a visual hierarchy. A lighter weight will be used for large blocks of text, while darker weights will be applied
sparingly to headings.

Figure 4 Alvania Font

 Figure 5 Nunito Sans Font

Design principles

The website should be simple, intuitive and provide an excellent user experience. This will be accomplished in a number of
ways. Firstly, when registering, filling out story templates and donating, the user’s progress should be displayed. This will
keep them informed and motivated. User’s should have the option to frequently save their work and undo their mistakes.
Informative feedback should be provided, for example, a message will be displayed confirming the successful submission of
a story. Lastly, the principle of affordance will be applied; the appearance of website icons will help suggest its function e.g.
the continue button can be shaped as an arrow.

Element Sizes

Website elements that require the user’s attention will be larger relative other elements on the webpage.

Element Description

Buttons The Register, Submit and Donate buttons will be large and eye catching. They will stand out on the
webpage through the use of contrasting colours.

Navigation The navigation bar will be located as a continuous strip along the top of the webpage. It will always be
visible and remain consistent. It should be simple and intuitive use e.g. if the logo is clicked, the user
will be redirected to the home page.

Headings Headings will signify importance according their colour, size and proximity relative to other website
content. Headings styles will decrease in size and darkness as they become less significant.

Footer The footer will display contact information and links to the trust’s social media pages. It should also be
consistent and appear on every webpage.
 TEAM 9 : MILESTONE 3

11. Wireframe mockups

11.1 Home Page
The home page provides access to the full navigation bar but has a limited amount of links in the body of the page. The smaller amount allows for the user to be less overwhelmed
and bombarded by information when they first visit or log on to the website. The links displayed above the navigation bar are shown on every webpage, to give universal access to
that content at any time. The donate button is very important to the sponsor, as it is the key tool needed to keep funding coming into the trust.
 TEAM 9 : MILESTONE 3

11.2 Submit Story Page

The story category field is a drop-down list, to ensure that only acceptable categories are applied to the stories. This will aid in filtering the stories later on when viewing them.
The template elements are used to help structure the story being submitted by the user. This will help in displaying the information later. The UI only contains the elements
required for the story, so that the storyteller is not distracted by any other unnecessary images or text.
11.3 Donate Page
 TEAM 9 : MILESTONE 3

The donations page is kept clean and simple, to make the process of donating to TCHT as easy as possible. Having all three options of donation on one page, reduces the amount
of clicks necessary for a user to make, in order to donate.
 TEAM 9 : MILESTONE 3

11.4 View Stories Page

The stories page contains the submit story button at the top, to make it clear to users and easy to find. The filter can be used to view the story categories that the user would prefer.
The stories are displayed underneath, giving the title and introduction, providing enough information to the user as to what the story is about, at a glance. If needed, a user can
search the story for content they choose, using the search bar at the top of the page
 TEAM 9 : MILESTONE 3

11.5 Login Page

The login page allows for admin roles, so that user of the THCT website have different access to different view of the site.

11.6 Register Page

 TEAM 9 : MILESTONE 3

The register page allows news users to become a member of the THCT membership. Once a member, they can upgrade to premium or remain as a regular member or unsubscribe.
 12. Clever features included in the interface design
 the user interface is minimalistic and aesthetically pleasing (using our uniform colour scheme) as possible without
sacrificing usability or excluding functionality
 easily readable, clean font
 uses spell checker
 automatic website backup feature, THCT site is regular backed up and easy to restore.
 SSL, the THCT has a security certificate, especially when collecting personal information
 site caching feature, with many visitors in a day, the THCT website will not crash
 designing the page layouts in a very segmented or tiled manner marking a clear segregation of sections with the help
of page aesthetics. A very clear and precise differentiation of the segments helps generate a very clear and intuitive
UX unlike a cluttered one.
 social media share buttons are present
 THCT Users and Administrators will be able to sort the stories based on their category
 website can be accessed on any device to accommodate those who do not have a desktop computer(i.e. it is mobile
responsive only when the setting “Desktop Browser View” is selected)
 contact information in the footer of each webpage
 upload of image feature for storyteller
 site search and newsroom are visible
 comment and like feature for story rating
 auto validations feature which gives the user a real time experience of knowing right away if a new password being
set follows the minimum guidelines laid out or if a new username being set already exists or not
 the THCT admin can have a broader view of the internal works of the website
 THCT admin can look at their past reports generated from stories
 an email confirmation is sent when a user is registered

13. Updated Task Board

Our team is using Trello, a cloud-based collaborative application to create project task boards. We selected this option, as it
is free and integrates well with Microsoft teams. The software provides great flexibility and allows for easy task allocation
and tracking. Each task is given a due date, can be assigned to a team member, and given a colour coded label. One can
filter tasks using team member names or task labels. Currently, our team has completed the Business Case and User
Requirements Specification. We are in the process of completing and reviewing our Systems Specification documentation.
Deliverable 3 tasks have been moved forward from the To-Do list to the Review list. The remaining Milestone 3 tasks are in
our “Doing” list. Coding components one and two have also been added to the task board.
 TEAM 9 : MILESTONE 3

Figure 6 Task Board 1

 TEAM 9 : MILESTONE 3

Figure 7 Task Board 2

 TEAM 9 : MILESTONE 3

Figure 8 Task Board 3

 14. Conclusion
This System Specification Document provided a detailed analysis of the technical aspects of the
Tygerberg Children’s Trust storytelling system. It included an in-depth analysis of expected users,
UI design guidelines and website wireframes. The task board shows how the team has progressed
throughout the system development life cycle and highlights the next phase of the project.