Sanea'a Platform

Dynamic Data Visualization in a Crowdsourcing Platform for Hackathons

and Time- Bound Events in the MENA Region

Team Members:

Haila Mohammed Al-Qaffary, HailahAlqaffary@gmail.com

Maha Saleh Al-Nasrallah, Maha.Alnasrallah@gmail.com

Taghreed Morizeq Al-Khammash, Taghreedalkhmmash@gmail.com

Amal Mohammed Al-Robayea, AmalAlrobayea@gmail.com

Supervised by:

Dr. Areej Suleiman Al-Wabil

2017 – 2018

ALL RIGHTS RESERVED BY HCI LAB AT KASCT AND COMPUTER SCIENCE DEPARTMENT AT PNU

1
List of Contacts

SECTION 1: Project Description .................................................................................................................................... 4

1.1 Problem Statement & Significance ................................................................................................. 4
1.2 Project Scope ..................................................................................................................................... 4
1.3 Project Outcomes .............................................................................................................................. 4
SECTION 2: Project Plan ................................................................................................................................................ 5
2.1 Adopted Methodology ...................................................................................................................... 5
2.2 Contingency and Risk Mitigation Plan ........................................................................................... 7
SECTION 3: System Requirements ................................................................................................................................ 8
3.1 Requirements Elicitation Process: .................................................................................................. 8
3.1.1 List and categorization of system stakeholders: ......................................................................................... 10
3.2 System Requirements: .................................................................................................................... 11
3.2.1 Function requirements ..................................................................................................................................... 11
3.2.2 Non-functional requirements ........................................................................................................................... 11
SECTION 4: System Analysis and Design ................................................................................................................... 12
4.1 High Level System Architecture: .................................................................................................. 12
4.2 System Analysis: ............................................................................................................................. 13
4.2 User Interface Design: .................................................................................................................... 17
4.2.1 User interface flow .......................................................................................................................................... 17
4.3 Implementation Requirements: ..................................................................................................... 18
4.3.1 Hardware requirements:................................................................................................................................... 18
4.3.2 Software and development tools:..................................................................................................................... 18
4.3.2 Websites used in graphics:............................................................................................................................... 18
SECTION 5: Challenges ................................................................................................................................................ 19
5.1 Technical Challenges:..................................................................................................................... 19
5.2 Non-technical Challenges: ............................................................................................................. 19
References ....................................................................................................................................................................... 20

2
List of Tables

Table 1 : Anticipated risks & contingency plan ................................................................................................................ 7

Table 2 : Use-Cases data visualization charts ................................................................................................................ 16

List of Figures

Figure 1 : Agile sprint ....................................................................................................................................................... 5

Figure 2 : Brainstorming session with the team ............................................................................................................... 8
Figure 3 : Personas card ...................................................................................................................................................... 9
Figure 4 : Behavioral archetypes ....................................................................................................................................... 10
Figure 5 : System flowchart ............................................................................................................................................. 12
Figure 6 : Data visualization process ................................................................................................................................. 13
Figure 7 : Content crowdsourcing in the Sanea’a platform .................................................................................................. 13
Figure 8 : Spatial Visualization of Time-Bounded Events in the MENA rejoin ............................................................ 14
Figure 9 : User interface flow............................................................................................................................................ 19

3
SECTION 1: Project Description
1.1 Problem Statement & Significance
As increasing volumes of data for time-bounded events are captured and become available, new
opportunities arise for data-driven analysis that can lead to insights for researchers interested in the
social dynamics and computer supported collaborative work in time-bounded events such as
hackathons.
In the MENA region, the emergence of time-bounded events that are typically focused on the creation
of a software application or hardware prototype development was slower than the global trend.
Sustained growth in the past decade has been supported by an increasing appreciation of the
contributions of time-bounded event towards innovation, community building, and accelerated
technology development. However, our understanding of the trends and challenges in organizing time-
bounded events in the MENA region is inadequate for the burgeoning analytics-driven strategic
planning, decision making that is taking place in innovation-oriented organizations in these countries.
Sophisticated tools for analysts, policy makers and researchers were needed to track, process, and
communicate data about the phenomenon of hackathons and time-bounded events and how they
contribute toward innovation eco-systems in the region.

1.2 Project Scope

In the context of data science, our aim is to develop an Interactive visualizations website to help
Explore, interact and discover patterns of hackathon and time-bounded events in the MENA region. In
this project, we aim to bring together machine intelligence with human intelligence through Visual
Analytics.

1.3 Project Outcomes

• Take advantage of data visualization by relatively broad bandwidth between a human’s eyes
and the mind which helps users to not only see and visually explore, but also understand
information in large amounts, all at once.
• Explore and understand the large datasets of hackathons to aid in the processing,
comprehension, tracking, and retention of data on time-bounded events in static, animated,
dynamic and interactive visuals.
• Develop an interactive platform, to visualize the phenomenon of hackathons in the MENA
region and to provide the capability to visually understand and explore the crowdsourced
datasets spatially and temporally.
• Visual representation of the patterns and trends translate data gathered from the crowd into a
visible form that highlights important features, including commonalities and anomalies for
time-bounded events in time and space.

4
 • Produce visual representations of time-bounded events easy for users to perceive salient aspects
of regional distribution of events as well as the density of events across time.

SECTION 2: Project Plan

2.1 Adopted Methodology
After examining the existing methodologies for designing “Sanea'a” platform, we decide to follow
Agile Software Development. That refers to number of different iterative and incremental software
development methodologies that share common principles and practices.
We use Agile to develop our project for these reasons:
• Early testing gives higher quality and less defects.
• Team self-assessment in every sprint provide early and regular process improvement.
• Iterative life-cycle is associated with lower risk and better success, productivity and defect rete.
• Iterative development accommodates and provokes early change which is suitable for software
product development.
2.1.1 Agile life -cycle

Agile methodology promote empirical processes over prescriptive processes. Nonetheless, the
iterative and incremental life-cycle of an agile project is a defined process that require discipline
to follow. The process is composed of self-contained mini projects (sprints) and release. Each
sprint iterations can vary from 2 to 4 weeks. In other word, agile projects usually run multiple
sprints before the software is released, and the project can be divided into multiple releases that
each have their own scope and schedule.

2.1.2 Agile sprints iteration

Design

Figure 1: Agile sprints

5
 2.1.2.1 Concept & prototyping sprint:

In this phase, a primary study for project is done to identify the problem, requirements,
Discovering goals and define the project scope and to create communication plan, schedule to deliver
project plan.
In this phase, we shall design system features to distinguish between our system and similar
Design
systems.
In this phase, we will prototype the system design and specify the functional and non-
Develop functional requirements by analyzing the characteristic and behave of our main stakeholders
to refine the website based on their needs and requirements.
Test In this phase, summarizes the system’s perceived readiness.
2.1.2.2 Persona & behavioral archetypes sprint:

In this phase, we need to understand and empathize with our users’ needs and their behavioral
patterns so that we can anticipate how they will interact with our system. Personas are
Discovering fictional characters, representing slices of our customer base. These semi-fictional
representations of our prototypical customer are developed based on customer demographics,
along with our own understanding of their motivations and needs.
In this phase, we shall design some scenarios in which the persona has needs to use the system
Design
to create a more plausible environment.
In this phase, we shall use collaborative toolkit to help us to build behavioral archetypes
Develop
based on the market profiles of our target audience
In this phase, after designing relevant scenarios and motivational mindsets that influence the
behavior of our target audience, we will have the basis for behavioral archetypes. These initial
Test
behavioral archetypes will help us to evaluate behavioral commonalities and differences
amongst our target audience that help us to determine which solutions or features to focus on.

2.1.2.3 System analysis sprint:

In this phase, a primary studying a system by examining its component parts and their
Discovering interactions. To organize information gathered during requirements determination into a
meaningful representation of process, data, and logic views of the information systems.
In this phase, we shall design models and diagrams to visually represent a system that we
Design want to build, for better understanding the functionality of a system, data flow, set of actions,
services, structure of database, stored data and functions that the system needs to perform.
In this phase, we shall develop crowdsourcing platform to encourage users to contribute
Develop towards maintaining the accuracy and quality of data submitted through the platform's
frontend.
In this phase, we shall apply verification and validation procedures that are used together for
Test checking that a product, service, or system meets requirements and specifications and that it
fulfills its intended purpose.

6
 2.1.2.3 Visualization chart sprint:
In this phase, understand the need arises for interactive information visualizations to aid in
Discovering the processing, comprehension, tracking, and retention of data on time-bounded events in
static, animated, dynamic and interactive visuals
In this phase, we shall design charts for data visualizations in different patterns to provide a
Design better understanding to the users while navigating through the different datasets through the
portal. Each chart provides different views and explores depending on the user needs.
In this phase, we shall be producing interactive and dynamic data visualization by using (d3.js
Develop library) that could allow users to navigation through the platform by choosing between
searching, exploring or interacting with the different components and visualizations.
In this phase, we shall test interactive platform that users can explore the data to gain insights
Test from the data visualizations and analysis. The idea is to trigger the sense of search and
exploration for the user needs.

2.1.2.4 System architecture sprint:

In this phase , we defines the structure, behavior, and more views of a system. A system
architecture primarily concentrates on the internal interfaces among the system's
Discovering
components or subsystems, and on the interface(s) between the system and its external
environment, especially the user.
In this phase, we shall produce interactive prototypes, wireframes or sketches that is simple
Design and easy interface for users. Designed by using (Fluidui.com) this prototyping well help
defining our website features.
In this phase, we shall develop the informational content of the elements comprising a system,
Develop
the relationships among those elements, and the rules governing those relationships.
Test In this phase, we shall test the prototype that we created to insure its initial success.

2.2 Contingency and Risk Mitigation Plan

Anticipated risks
1 Retreat team members
2 Misaligned expectations and scope
creep
3 Requirements inflation
4 Platform interfaces not responding
for different screen sizes
5 Platform got hacked
Table 1: Anticipated risks & contingency plan
Contingency Plan
Increased collaboration and information sharing on
the team.
Set prioritize functions for a website and define the
initial scope of a site based on those prioritize to
keep the project quality high.
Constant involvement of customers and
developers.
Use Bootstrap patterns and practices when
building the platform, to get responsive web
platform for different devices.
Backup version of website and make security
measures up to date.
7
SECTION 3: System Requirements
3.1 Requirements Elicitation Process:
Description of the methods that have been used to gather the project requirements, to design and build
a usability product. We use personas and behavioral archetypes activity to understand and empathize
into expected users, this includes technology selection, look and feel, interaction design patterns and
use cases.
In order, to facilitate these decisions, we aggregate and interpret our user research into representational
customer profiles – Personas and Archetypes. These tools help curate seemingly faceless data points
into something relatable and serve as a tangible element that generates customer empathy and
understanding from team members and stakeholders.

Creation process:
Personas focus on the “who” of your audience research. As shown in Figure 3, they include
demographic details such as age, gender, occupation, education, interests, etc. They are useful to
provide insight into the characteristics of a target audience, but often don’t include details on behavioral
patterns.
Personas creation belongs at the beginning of the project, as personas can inform site functionality, help
uncover gaps, or highlight new opportunities.
To ensure the personas are accurate representations of our users and have the support of our
stakeholders throughout the process.
• Conduct user research: Answer the following questions: Who are our users and why are they
using the system? What behaviors, assumptions, and expectations color their view of the
system?
• Condense the research: Look for themes/characteristics that are specific, relevant, and universal
to the system and its users.
• Brainstorm: Organize elements into persona groups that represent our target users.
•

Figure 2: Brainstorming session with the team

• Refine: Combine and prioritize the rough personas. Separate them into primary, secondary, and,
if necessary, complementary categories.

8
 • Make them realistic: Develop the appropriate descriptions of each personas background,
motivations, and expectations.

Figure 3: Personas card

That yields valuable information on how to customize the user experience to specific types of people
based on their attitudes, behaviors, and motivations. This exercise makes the design task at hand less
complex and Identify the features, functionality and content to develop for a platform release, ensuring
that value is delivered to users from day one of the release, they guide our ideation processes, and they
can help to achieve the goal of creating a good user experience for our target user group. This potent
combination of personas, goals and scenarios help us to avoid thinking in the abstract and to focus on
how platform could be used in an idealized yet more concrete and humanistic future.

Archetypes are steeped in user behavior. As shown in Figure-3, They contain details from user
interviews around a group’s needs, motivations and pain-points. Archetypes focus on the “who does
what, when they do it, and why” of your audience research. They provide insight into behavior patterns
– how a customer is using a product or service currently. Archetypes most directly help determine the
approach and functionality of a user experience, as well as contributing to determining, validating, and
prioritizing product features.

9
 3.1.1 List and categorization of system stakeholders:
1. Investors
2. Academic
3. Companies
4. Organizers
5. Freelancers
6. Pre-collegiate
7. Sponsors
8. Participation
9. Researchers and higher students
10. Business and Technology Incubator
11. Business and Technology Accelerator
12. Small and Medium Enterprise (SME's)

Figure 4: Behavioral archetypes

10
3.2 System Requirements:
3.2.1 Function requirements
Functional requirements capture the intended behavior of the system “what the system should do“. This
behavior maybe expressed as services, tasks or functions the system is required to perform.

1. The platform will allow user to visualize the phenomenon of hackathons in the geographically
scope of the MENA region which embeds information visualizations that can be explored
spatially and temporally .
2. The platform will provide a clear view to the user of regional events and when he clicks on a
specific pin the map will retrieve all related events along with detailed information about each
event.

3. The platform will facilitates closely coupled human and machine analysis by spatiotemporal
visualization of time-bounded events in the MENA region.
4. Platform supports dynamic chart visualizations overlaid on the spatial plots of events were
designed to amplify viewers' cognitive capabilities by enhancing the recognition of patterns of
when and where time-bounded events are held.
5. The platform's data visualization can be filtered across time and geographic locations such as
the country of the event. As well as, demographic filters are also applied to search the time-
bounded events by event themes whether if it is for health, humanity, technical and sport etc.
Any used filter will reflect the data retrieval of all other filters automatically.
6. The platform is a crowdsourced event by allowing users to add new time-bound events for
scaling up the content of hackathon events. In addition, the administrators will validate these
events “data entry” by email and URL of the event.
7. Platform provide secure registration system that validates email addresses, sends confirmation
emails, provides forgotten password functionality, stores passwords securely, validates input
forms. In order to allow user to edit entered information of events.

3.2.2 Non-functional requirements

Nonfunctional requirements are requirement that describes not “what the system will do, but “How
the system will do it “. One could also think of it as quality attributes of system.

1. Security: Platform have two rolls of authorization

• Administrator authorized to post events on the platform and validate user entry.
• User authorized to add event, visualize data, search and view upcoming event and
historical event.
2. Usability: The user enters event information into a single form, finds searches and finds
events on a single page, reducing time to move between pages. The user enters the data, it will
be verified by the admin to reduce the errors.
11
 3. Safety: The used system shall not cause any harm to human users.
4. Probability: Ability and ease of using the platform in different configurations or
environments.
5. Maintainability: The system must be maintained frequently to ensure the good improvement
of functionality and reliability of the system.
6. Accuracy: Data should be free from mistakes or error and having the value that the end user
expects.
7. Reliability: Ability to do a required function under stated conditions with a specified period
of time without failing.

SECTION 4: System Analysis and Design

4.1 High Level System Architecture:

Figure 5: System flowchart

The Flowchart Diagram Above shows the system process where the data insertion and updating process
are correlative with the process of D3 data-driven visualization, it demonstrates the process initially
when the user insert or sign up for update the data entry then the administrator verify the user for posting
and updating data into the platform.

D3 data-driven visualization model consists of a three-tier structure:

• data processing layer
• data application layer
• data visualization layer

Correspondingly, the user follows three steps to use D3: loading data, binding data to graphic
elements, and rendering. Finally, users will be thankfully notified of the completion of posting and
updating.
12
 1. Loading data: to convert the raw data into the format suitable for rendering and to load it into
the web browser. D3 supports loading data from an array or the local data files in JSON, CSV,
TSV formats. D3 provides 12 functions for layout. They are not for traditional visualization.
Instead, they are committed to mapping the raw data to the format for a specific type of charts,
namely data conversion.
2. Binding data: to bind data to the specific DOM elements, and to update, create, or delete
elements accordingly. Binding data to DOM elements is the key to implement interactivity.
3. Rendering: the user analyzes the value scope of DOM objects, sets their corresponding visual
properties, and renders graphics in SVG canvas. The last step changes the view from abstract
data into intuitive graphics.

Basically, web-based visualization process is divided into two

parts, one on the client side and the other on the server side and it
responds with D3 visualization library. Figure 5 shows the process
of web-based visualization where a web-based server fetches the
data from data storage, processes it to a graphical format, and
delivers it to a web client.

Figure 6: Data visualization process

4.2 System Analysis:

The intelligent visual analytics platform that we are developing is designed in two main phases. The
first phase is the data collection, where the platform’s contents are crowdsourced from the community.
This crowdsourcing approach was considered to facilitate a sustainable dynamic data set and to
encourage users to contribute towards maintaining the accuracy and quality of data submitted through
the platform's frontend.

Figure 7: Content crowdsourcing in the Sanea’a platform

The content crowdsourcing architecture of Sanea’a platform, depicted in Figure 6, is the bridge between
the often abstract goals of a crowdsourcing application and the final concrete resulting web platform.
While the path from abstract to concrete can be complex, the block diagram in Figure 6 shows the set
13
of structures needed to reason about the hackathon platform (i.e. software elements of location data and
event-oriented data, the relations among them and the properties of both) and the administrator should
verify the contents that are going to be embedded for visualization by checking the event’s website
URL and institutional email.

The second phase is launching the interactive visualizations to the general public (historical data) to
enable decision makers to explore the data sets and interact with the visual analytics, so they can grasp
difficult concepts aligned with the insights that they are looking for and to identify new patterns. With
interactive visualization, they can take the concept a step further by using technology to drill down into
charts and graphs for more details, interactively changing what data they see and how it’s processed, to
recognize a pattern that would help make crucial business decisions.

Figure 8: Spatial Visualization of Time-Bounded Events in the MENA rejoin

In the Sanea’a platform, the visualization has two modes of operation: filter/search mode and statistical
mode. The first mode allows the users to explore spatially by zooming in and out of regions and
countries, and temporally by exploring the data sets across a timeline using a lever/slider to move from
one-time frame to another. Moreover, the data can be filtered across time by location, theme (e.g. health,
humanitarian aid, sport). Filters are applied to explore subsets of datasets, as shown in Figure 7.

The second mode is the Data Visualization and Exploration mode. In this mode the user can explore
the data to gain insights from the data visualizations and analysis. we had implemented more than 5
data- driven analytics charts for decision making by addressing the main components of time bounded
events (i.e. date, time, themes, prizes, etc.) The user can gain insights in different levels, scales and
view the data geospatially. Table 3 shows a sample of the statistical mode in which users can toggle on
or off the categories and the dynamic visualization refreshes on-screen in the platform to provide
14
instantaneous data tailored to the needs of stakeholders. These visual representations of time-bounded
events make it easy for users to perceive salient aspects of regional distribution of events as well as the
density of events across time. The visualizations augment the cognitive reasoning process with
perceptual reasoning through color-coded visual representations of these time bounded events and
support relatively easy perceptual inferences of relationships that are otherwise more difficult to induce.

15
 Data Visualization Charts

1 2

3 4

5 6

Table 2: Use-Cases data visualization charts

Data visualization emerged widely through storytelling on a global scale to show insights into complex
data and static visualizations. Through the storytelling method, a series of questions or visuals can be

16
 created that takes the decision makers to the desired conclusion by explained the whole concept through
a story, it creates a different scenario altogether that helps to draw meaningful conclusions.

4.2 User Interface Design:

User interface (UI) is a part of Human Computer Interaction (HCI), it’s a visual part of computer
application which a user interacts with a computer or a software. In the platform we focus to design UI
easy to access all component and understanding by user.

4.2.1 User interface flow

Figure 9: User interface flow

17
4.3 Implementation Requirements:

To reach the highest expectation and effective implementation of Sanea’a Platform we set a varios
hardware and software requirments in order to achieve our goal.

4.3.1 Hardware requirements:

• Laptops: with sufficient processor speed and hard drive capacity for installing and
developing the platform.
o Operating system Windows 7, 10 ( 32 / 64 ) bit).
o 64 bit CPU , with VT-x or AMD-V capability.
o 400 MB disk space.
o 2GB RAM.

4.3.2 Software and development tools:

• Web development languages: HTML5, CSS3, SVG , JQuery , JavaScript, PHP.
• Bootstrap: framework for developing responsive, mobile-first websites.
• Data-Driven-Document (D3.js): is a JavaScript library for producing interactive and dynamic data
visualization in web browser.
• Leaflet: open-source JavaScript library for mobile-friendly interactive maps.
• Database: MySQL is used as database as it is easy to maintain and return records by simple
queries.
• JavaScript Object Notation (JSON): For exchanging data between a browser and a server.

4.3.2 Websites used in graphics:

• Creately.com: online website used to create flowcharts, organization charts, mind maps, project
charts, and other visuals.
• Fluidui.com: online website used to create web prototypes.
• Gantt team : online website used to create Gantt chart.

18
SECTION 5: Challenges
5.1 Technical Challenges:
• Education and Training is requires for the researchers and practitioners to share the basic
principles and skills about information visualization methods.
• The lack of Intrinsic quality measures means there is no common evaluation and selection
mechanism plus the unavailability of bench marks undermine advances in visualization
methods.
• Scalability, how to manage huge visualization in available space.
• Information visualization changes over time, means there is dynamism in visualization.

5.2 Non-technical Challenges:

• Usability issues are critical issues for visualization, which means how to make it easy to use
and efficient.
• Understanding elementary perceptual– cognitive tasks is the basic step regarding information
visualization engineering, providing it according to human capability.

19
References

[1] S. Almishari, N. Salamah, M. Alwan, N. Alkhalifa, and A. Al-Wabil, “The Rise of Hackathon-Led
Innovation in the MENA Region: Visualizing Spatial and Temporal Dynamics of Time-Bounded Events,”
Social Computing and Social Media. Applications and Analytics Lecture Notes in Computer Science, pp.
367–377, 2017.
[5] A. Draghici, T. Agiali, and C. Chilipirea, “Visualization system for human mobility analysis,” 2015 14th
RoEduNet International Conference - Networking in Education and Research (RoEduNet NER), 2015, IEEE
Computer Society.
[3] Chen and H. Zhou, “Research and application of dynamic and interactive data visualization based on
D3,” 2016 International Conference on Audio, Language and Image Processing (ICALIP), 2016.
[4] Shklar,L.and Rosen,R.(2003).“Web Application Architecture: Principles,Protocols and Practices”. John
Wiley and Sons. ISDN 0-471-48656-6.

[5]User Interface Elements | Usability.gov. [online] Usability.gov. Available at:

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html [Accessed 24 Nov. 2017].
[6] Pirkka, R. (2011) '', User-Centered Design in Agile Software Development Harvard Business Review”.
Available at: http://tampub.uta.fi/bitstream/handle/10024/82310/gradu04854.pdf; (Accessed: April 2011)

[7] Doneva, R. (2017). Behavioural archetypes instead of personas | Common Good.

[online]CommonGood.Availableat:https://common-good.co/behavioural-archetypes-instead-of-personas
[Accessed 9 Dec. 2017].
[8] Smashing Ideas. (2017). Behavioral Archetypes - Smashing Ideas. [online] Available at:
https://smashingideas.com/behavioral-archetypes/ [Accessed 9 Dec. 2017].
[9] Bernstein, G. (2017). How To Create UX Personas. [online] UX Mastery. Available at:
https://uxmastery.com/create-ux-personas/ [Accessed 9 Dec. 2017].
[10] K,Muzammil (2011) '', Data and Information Visualization Methods, and Interactive Mechanisms: A
Survey, 34(), pp. [Online]. Available at: (Accessed: ).

20