Ushahdi 3.0 Design Framework

Design Framework
Ushahidi 3.0 Design Framework Project
Designed by Small Surfaces for Ushahidi
6 August 2012

This document provides a high level description of the user
interface design the next major version of the Ushahidi
platform.
Contained in this document are a set of annotated
wireframes that illustrate the way in which the software
should be organised and behave.
This document should be used by the Ushahidi team to
continue to detail the design solution for the next major
version of the platform.
Note: the icons used in this document are placeholder only,
and are not intended to be used as the final visual assets.
2About This Document

3
8
22
25
29
33
39
41
44
50
Overview
Views Tab
Submit Report
Sets Tab
Plugin Tab
Workspace Tab
Tools Tab
New Report Type Wizard
Report Designer
Plugins & Themes
3Table of Contents

Map List
User Account
Views
Report Details
Sets
About
Workspace
Tools
Submit Report
Help
Tools
See following page for details
Illustrated in this document
Partially illustrated in this document
Not illustrated in this document
5Application Map - Overview

Illustrated in this document
Partially illustrated in this document
Not illustrated in this document
Export & Share
Advanced Search
Set Details
Create / Modify Set
Views
Sets
About
Workspace Dashboard
Filtered Report Lists
Comments
Checklists
Users & GroupsTools
Permissions
Reports & Entities
Appearance
Categories
Plugins
Settings
Duplicate Manager
6Application Map - Details

CROWDMAP Maps & Plans
Submit Report
Jared Diamond
Sets About WorkspaceViews
Accident Map
Tools
HelpHelp
Categories Sets Search
Views
Category 1
Category 2
Category 3
Category 4
Category 5
Category 6
Category 7
Category 8
Category 9
Show all
Show:Categories | Stages
3
15
The Views tab is where users can visualise,
understand and interpret the data that lives in a
deployment.
1
The Sets tab is where users can create unique
groupings of subsets of the data based on search
queries. For example, a set could contain reports
that contain a particular keyword associated with
a particular location.
2
The About tab is an example of a tab that has been
created by a plugin. In this case, the plugin has
created a tab that can be used for written articles
or the display of specific media.
3
The Workspace tab is where registered users can
manage all the content that moves through a
deployment on a day-to-day basis. The Workspace
is where users manage reports, comments and
keep track of their progress against checklists.
4
The Tools tab is where the system is configured
and managed by those with administrative
permissions.
5
1 2 3 4 5
6 7
Logged in users have access to their profile
(password and other account details) through the
link of their name. When the user places the
mouse over this link, a menu is shown allowing
users to either view their account profile or log
out.
The user profile should allow users to specify
which tab should be displayed by default upon
login.
6
If the user clicks on the Map List icon, they are
shown a list of all the maps available through this
deployment. The user can also access account
settings and overall deployment configuration
through the Map List (not illustrated).
7
http://somedeployment.com/accidentmap/
Ushahidi
7Design Elements

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Views
Category 1
Category 2
Category 3
Category 4
Category 5
Category 6
Category 7
Category 8
Category 9
Show all
Show:Categories | Stages
3
15
1
2
4
3
Users can select different visualisations. Shown
here are: map, list, timeline, heat map and media
views. Views can be added by installing a plugin.
Views can be removed (if they are a plugin) or
disabled (if they are part of the core), so only
relevant visualisations are available. Visualisations
can also be made available only to users who have
logged in to the system (i.e. hidden from the
public)
1
Depending on the visualisation selected by the
user, the appropriate visualisation is shown.
2
The user can filter the data that is shown on the
visualisation using either Categories, Sets or
Search queries.
3
Users can filter the data shown in the visualisation.
In this case, the user can select either individual
categories to show on the map, or multiple
categories (using the checkboxes on the right).
The filter persists as the user switches between
visualisations.
4
5
The user can toggle the Categories view to show
either Categories or a list of the different Stages (to
view report by progression through a workflow).
5
Ushahidi
9Map with Categories

Submit Report
Login or Register
AboutViews
Accident Map
Help
Views
Category 1
Category 2
Category 3
Category 4
Category 5
Category 6
Category 7
Category 8
Category 9
Show all
3
15
1
3
Tabs may be placed in any order by system
administrators. The visibility of tabs may be
configured based on the permissions of the user.
The example shown here illustrates how the Sets
tab is hidden from members of the public.
1
Permissions may also be set for the different views:
in the example shown here, members of the public
have access to only the map and list views.
2
A single report on the map is represented as a dot
and coloured according to its primary category.
3
Multiple reports of the same category are shown
as a larger dot with a number.
4
2
4
5
Reports that are associated with a region are
shown as a dot, but when the user places their
mouse cursor over the dot, the entire region is
highlighted. In the example shown here, the
reports associated with the region are from
multiple categories, and so are shown in grey.
5
Category 5A
Category 5B
6
6
If a category has sub-categories, the user can
expand the list to show available sub-categories.
Sub-categories are shown in the same colour as
the parent category.
6
Ushahidi
10Public View

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Views
Type to ﬁnd Set
Set 1
Set 2
Set 3
Set 12
Set 8
Set 4
Set 5
Set 6
Set 7
Show all
My Sets
All Sets
List
Export & Share
Hide unpublished
Last 24 hours | All
Man hits tree after skidding off road
"Bacon ipsum dolor sit amet ullamco drumstick
veniam, pork deserunt ham hock kielbasa..."
Category 3Today, 12:20 PM
5
Details
4
1 2
5
3
When the user places their mouse cursor over the
toolbar, the different visualisations are highlighted,
and tooltips are shown as appropriate.
1
When the user places their mouse cursor over the
toolbar, labels for the icons on the right-hand side
are shown.
Export & Share allows users to either export the
data shown in the current view & with the current
filter. This could include: CSV export, Embedding a
map in a 3rd party web site, RSS feed,
Downloading an image of the map. The options
for exporting and sharing depend on the chosen
visualisation.
Hide Unpublished allows logged in users to
remove data from the visualisation that has not yet
been published (shown as items with the lock icon
on the illustration here).
The final filter allows the user to filter reports by
recency (illustrated in more detail later).
2
If the user clicks on an individual dot on the map a
pop-up is shown. For further discussion of map
pop-ups, see later in document.
3
Both sets that have been identified as 'Featured'
by an administrator, and those which have been
flagged by the user are shown at the top of the All
Sets list.
5
If the user selects the Sets filter, a list of both the
sets that have been created by the user (My Sets)
and all sets in the system (All Sets) is shown. For
further discussion of Sets, see the section of this
document dedicated to this feature.
4
Ushahidi
11Map with Sets and Popup

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Views
Bacon ipsum dolor sit amet ullamco
"Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock
kielbasa incididunt qui voluptate spare ribs ﬂank pastrami do..."
Category 3
Published
Rob EndersToday, 12:20 PM
5
All
Keyword
Category
Stage
Date
Location
Advanced search
All
Nakawa
Within 1 kms
Search
Clear search
All
Category 3
Translation
5
72 hours
1 week
1 month
3 months
Export & Share
Hide unpublished
Last 24 hours All
Drumstick veniam, pork deserunt
Category 6
Published
5
Ham hock kielbasa
Category 5
Published
5
Includes 2 duplicates
6
3
4
1
5
For logged in users, an indication is shown next to
reports as to whether the report is published (and
visible to the public) or not.
1
The user can filter results to limit results to a time
range in relation to the current time (in addition to
any filter applied using the standard filters on the
right-hand side). This range should automatically
adapt based on report volume over time periods.
2
When the user places the pointer over an item in
the list, the item is highlighted, and additional
information and tools are shown (on right-hand
side).
3
If the user has permission, they can edit or flag the
report. Additionally, the user can export or share
the report.
4
If the user is logged in, and the report is broken
into stages (see later sections on report design for
details about this), the current stage is displayed.
5
The user can invoke an advanced search, if
needed. While not illustrated here, the advanced
search should function in a manner similar to the
way the Edit Set screen behaves.
6
2
Ushahidi
12List with Search

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Views
Last 24 hours All
Today, 12:20 PM
Published
Rob Enders
5
All
Keyword
Category
Stage
Date
Location
Advanced search
All
Nakawa
Within 1 kms
Search
Clear search
AllToday, 10:37 AM
Translation
Rob Enders
5
Export & Share
Hide unpublished
Last 24 hours All
Yesterday, 4:55 PM
Published
Rob Enders
5
Yesterday, 12:20 PM
5
1
If the report form is simply a single textual
description, the list should be shown in this way.
The title is replaced by a timestamp.
If the user is collecting media only (e.g. photos),
then the List view is not optimised for this kind of
content. Users in this scenario would disable the
List view, and use the Media view (the last icon on
the toolbar illustrated here) instead.
1
Published
Rob Enders
When the user enters a query in the search box, all
fields that the user has permission to view should
be searched (e.g. title, description, category, sets,
submitter).
2
2
Ushahidi
13List with Search - Description-Only Reports

6
37
"Bacon ipsum dolor sit amet ullamco
drumstick veniam, pork deserunt ham..."
Category 3Today, 12:20 PM
5
Details
6 reports
Ham hock kielbasa
Exercitation fugiat aliquip consequat
Single Report
Several Reports - Single Category
Man hits tree after skidding off road 5
Details
Single Report - Image
Today, 12:20 PM
Details2 more reports
Category 4
37 reports
Ham hock kielbasa
Exercitation fugiat aliquip consequat
Details34 more reports
Multiple categories
Several Reports - Multiple Categories
1
2
4
5
6
A toolbar is shown with functions that are
available to the current user based on their
permissions. Shown here are editing, flagging and
sharing tools.
1
The header includes an indication of the number
of comments on the report (if commenting is
enabled), and the publishing status of the report
(if the user is a logged in user).
2
If the report contains images, a thumbnail should
be shown.
3
If the report contains an image or video only, a
large thumbnail should be shown.
4
If the map datapoint refers to several reports of
the same category, the number of reports and the
category is shown long with the most recent
reports from the category.
5
If the map datapoint refers to multiple reports
from different categories, the pop-up indicates
this.
6
3
14Popup Variations - Standard Reports

Today, 12:20 PM
"Bacon ipsum dolor sit amet ullamco drumstick
veniam, pork deserunt ham hock kielbasa
incididunt qui voluptate spare ribs ﬂank pastrami
do"
5
Details
Single Report - Description Only
Today, 12:20 PM 5
Details
Single Report - Image Only
1
2
If the report contains only a description, the
header should display a timestamp, and the body
only the content of the description.
1
If the report contains only a media item, the
header should display a timestamp, and the body
only a thumbnail of the media.
2
15Popup Variations - Single Content Type Reports

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Views
Related
Link
Close
History EditPublic
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock
kielbasa incididunt qui voluptate spare ribs ﬂank pastrami do.
Exercitation fugiat aliquip consequat, short loin quis nulla esse andouille bresaola
salami tongue ribeye incididunt. Do short ribs dolore, irure in prosciutto cow beef ribs
brisket.
Sets
Category 3
Stage 2
Rob Enders
Today, 12:20 PM
5Comments
Visible to public
5 3
Turducken fatback qui ut culpa
Capicola dolore chicken ground round
Lusmod consequat duis incididunt est
Frankfurter ex drumstick
Consectetur non tempor labore dolor
Add
Bacon ipsum dolor sit amet turducken sed fatback, short ribs pork belly prosciutto ad.
Eiusmod salami non, ham eu aute cillum venison short loin anim.
Aliqua dolore andouille consectetur frankfurter. In aliquip ﬁlet mignon sint. Tail sint
ullamco spare ribs. Filet mignon velit swine, laborum rump qui pig sausage elit short
ribs andouille eu hamburger.
Drunk Driver Kills Tree (The Monitor)
Private
1 2 3 4
5
The Public tab shows how the report is
represented to users who are not logged in. If
reports are not visible to the public, this tab is not
displayed.
If the user is not logged in, none of the tabs shown
here are displayed (i.e. only the Public view is
shown).
It is possible to reach this screen directly using a
URL for the report (e.g. some deployment.com/
accidentmap/r/43924
1
The Private tab shows all the report metadata
(including both information published publicly,
and information that is hidden from the public) in
read only form.
2
The History tab shows a reverse chronological
history of changes to the report, including
information about who made what changes.
3
The Edit tab allows users to modify any aspect of
the report they have permission to change.
4
Users can explore other similar content, either
reports that are related (generated
computationally), or sets that this report is a
member of.
5
Ushahidi
16Report Details - Public View

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Views
Update
Close
In Edit mode, the user can step through each of
the report stages.
1
If a stage has been completed, the information is
displayed in read-only format. If the user has
permission, the information can be updated. This
change will be recorded in the report History.
2
The publishing status of the report is displayed
along with a button that allows the user to publish
the report immediately. The button is disabled
until all the mandatory report fields in all the
report stages are completed.
3
History EditPublic Private
Initial Report
Veriﬁcation
1
2
Title
Description
Location Nakawa
Bacon ipsum dolor sit amet ullamco drumstick
veniam, pork deserunt ham hock kielbasa incididunt
qui voluptate spare ribs ﬂank pastrami do.
Exercitation fugiat aliquip consequat, short loin quis
nulla esse andouille bresaola salami tongue ribeye
incididunt. Do short ribs dolore, irure in prosciutto
cow beef ribs brisket.
Not published
Publish now
3
Ushahidi
17Report Details - Edit Completed Stage

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Views
Close
The user can enter data for incomplete portions of
the report, where they have permission
1
Once the user has made any necessary changes,
work can be saved by pressing the Save button.
2
History EditPublic Private
The police confirmed the accident details.
Bacon ipsum dolor sit amet
ullamco drumstick veniam, pork
deserunt.
Ham hock kielbasa incididunt
qui voluptate spare ribs flank
pastrami do. Exercitation fugiat
aliquip consequat.
1
2
Notes
Reliability 80%
Called police
Called reporter
Not published
Verification
Initial Report
Save
Publish now
Verification Team is responsible for this stage of the report.
Ushahidi
18Report Details - Edit New Stage

AboutViews Sets
Accident Map
Views
3
15
1
2
When displayed on a mobile device, the header
adapts to show only limited tabs, the user login
information if moved to a tab (see next screen)
and the help link and submit report button are
made smaller.
1
The filters in the View tab are shown below the
visualisation, docked to the bottom of the browser
viewport.
2
19Mobile - View Map

AboutViews Sets
Accident Map
Views
Category 1
Category 2
Category 3
Category 4
Category 5
Category 6
Category 7
Category 8
Category 9
Show all
Featured1
When the user taps on any of the filter icons, the
filters appear as an overlay placed on top of the
visualisation.
1
20Mobile - Choose Visualisation Filter

AboutViews Sets
Accident Map
Views
Link
History EditPublic
Bacon ipsum dolor sit amet ullamco drumstick
veniam, pork deserunt ham hock kielbasa
incididunt qui voluptate spare ribs ﬂank
pastrami do.
Exercitation fugiat aliquip consequat, short loin
quis nulla esse andouille bresaola salami
tongue ribeye incididunt. Do short ribs dolore,
irure in prosciutto cow beef ribs brisket.
Drunk Driver Kills Tree (The Monitor)
Private
5Comments Add
Bacon ipsum dolor sit amet turducken sed
fatback, short ribs pork belly prosciutto ad.
Eiusmod salami non, ham eu aute cillum
venison short loin anim.
Aliqua dolore andouille consectetur
frankfurter. In aliquip ﬁlet mignon sint. Tail sint
ullamco spare ribs. Filet mignon velit swine,
laborum rump qui pig sausage elit short ribs
andouille eu hamburger.
1
The report detail view is reorganised to flow as a
single column.
1
21Mobile - Report Details

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Views
Submit Report
Title Tree hits man
Description
Location
The tree was chasing
text FInd
Show advanced map tools
drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate
spare ribs ﬂank pastrami do. Exercitation
fugiat aliquip consequat, short loin quis nulla
esse andouille bresaola.
Cancel
SubmitPreview2
1
Contextual help is shown along-side the report
submission form to help reporters provide more
accurate or appropriate information.
1
Users can optionally preview a report before
submitting it.
2
Ushahidi
23Submit Report - Show Form

Go to Site >
Jared Diamond
Accident Map
HelpHelp
Submit Report
SubmitPreview
If users come directly to the Submit Report form
from a third party referring site or application, the
user is shown a modified version of the page.
The header is limited to showing only the map
name and user tools, and a link to the main site.
In this situation, the form is not shown in an
overlay.
1
Title Tree hits man
Description
Location
The tree was chasing
text FInd
Show advanced map tools
drumstick veniam, pork deserunt.
Ham hock kielbasa incididunt qui voluptate
spare ribs ﬂank pastrami do. Exercitation
fugiat aliquip consequat, short loin quis nulla
esse andouille bresaola.
1
Ushahidi
24Submit Report - Deep Link

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Sets
All Sets
Set 1 Set 2 Set 3
drumstick veniam, pork deserunt ham hock
kielbasa.
Mollit laboris sunt, fugiat nisi officia sirloin
kielbasa aliqua brisket consequat nulla
cillum cow.
Shankle t-bone non strip steak.
Type to find Set
Minim excepteur prosciutto, turkey qui filet
mignon pig.
Jerky bacon in, exercitation biltong
consectetur pork loin hamburger deserunt
leberkas corned beef.
Pig qui t-bone, aliquip ball tip swine ea
tenderloin ut laborum.
5 new reports
47 2713
8 new reports
Set 12 Set 8 Set 4
122 1468
12 new reports
My Sets Create Set
FEATURED
If the user has created any Sets, those sets are
displayed first. If the user has not created any Sets
yet, some information about the purpose of sets
should be displayed.
1
Sets that have been created by other users are
displayed.
2
Administrators can select sets to be 'Featured'.
These sets are displayed first in the All Sets list.
3
Users can choose to flag individual Sets so they
can easily return to them later. These Sets are
shown after the Featured Sets.
4
The user can choose to display the Set in the Views
tab.
5
Additional information about the Set is shown,
including the number of reports and its visibility to
the public.
6
1
2
54 6
3
Ushahidi
26Set List

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Sets
Export & Share
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock
kielbasa.
Category 1 or Category 4
Containing keyword "fast"
Within 5km of Nakawa
Jared Diamond
Updated today, 12:20 PM
Private to you + 3 others
27 reports
5 new reports
Set 3 View Edit
Category 3
Translation
5
Category 6
Published
5
Ham hock kielbasa
Category 5
Published
5
Me + Administrators
Hide unpublished
5
2
1
3
In the Set Details view, the user is shown a
summary description of the Set and the search
parameters that are used to create the Set.
1
Reports contained in the Set are listed in reverse
chronological order. The user can paginate
through the list of reports, but cannot perform any
other search or filtering actions on the data in this
view. The user can view the details of the report
(shown in the standard report overlay).
2
The View button allows the user to display the
currently selected Set in the Views tab.
3
If the user has administrator permissions, the user
can make a set featured, which ensures that it is
promoted in the list of All Sets for all users (see
prior illustration).
4
Make Featured4
If the user places the mouse pointer over any
permissions indication, more details are shown in
an overlay.
5
Ushahidi
27Set Details

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Edit Set 3
Save
Location Nakawa, Kampala, UgandaWithin 5 kms of
Cancel
and
Keyword FastAny ﬁeld Contains
Add
Add location
Verify location
Time
Category Any
Stage Any
Reliability Greater than Moderate
/ /Between / /
Group Any
Name
Description
Set 3
Bacon ipsum dolor sit amet ullamco drumstick veniam, pork deserunt ham hock kielbasa.
deserunt.
aliquip consequat.
1
2
The user can provide a name and description for a
Set, and then define the search parameters for the
Set as appropriate.
1
Inline help is shown, as appropriate.
2
3
By default, only the Name, Description and
Keyword fields are enabled. All other fields are
dimmed.
If the user places the mouse cursor over any
dimmed field, the field is highlighted and enabled.
If the user sets a criterion for the field, the field
remains enabled and highlighted.
3
Ushahidi
28Edit Set

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
About
The Team
Latest reportsThe Accident Map Project
Links
Bacon ipsum dolor sit amet turducken sed fatback, short ribs
pork belly prosciutto ad. Eiusmod salami non, ham eu aute
cillum venison short loin anim.
Aliqua dolore andouille consectetur frankfurter. In aliquip ﬁlet
mignon sint. Tail sint ullamco spare ribs. Filet mignon velit
swine, laborum rump qui pig sausage elit short ribs andouille
eu hamburger.
More >
Capicola dolore chicken ground round esse anim
Consectetur non tempor labore dolor, nostrud qui
kielbasa ball tip jowl short loin dolore.
Non incididunt ut, sint in in quis mollit shoulder est
ham turkey do.
Turducken fatback qui ut culpa.
Lusmod consequat duis incididunt est frankfurter
1
The About tab is an example of a plugin-based
tab. In this case, the plugin is designed to show
summary or static information (so could be used
to show general information about the
deployment, for example).
There are several kinds of content blocks available,
that can be enabled and customised by the user.
The content blocks could include: written content,
photographs, lists of recent reports, lists of links, a
report submission form, or a small version of the
map.
The user configures the behaviour and content of
the tab in the Tools section.
1http://somedeployment.com/accidentmap/
Ushahidi
30Multiple Content Blocks

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
About
The Accident Map Project
Bacon ipsum dolor sit amet turducken sed fatback, short ribs pork belly prosciutto ad.
Eiusmod salami non, ham eu aute cillum venison short loin anim.
Aliqua dolore andouille consectetur frankfurter. In aliquip ﬁlet mignon sint. Tail sint ullamco
spare ribs. Filet mignon velit swine, laborum rump qui pig sausage elit short ribs andouille
eu hamburger.
Ea pastrami spare ribs non sed aute anim. Ex adipisicing irure ribeye laboris.
Tail sint ullamco spare ribs. Filet mignon velit swine, laborum rump qui pig sausage elit
short ribs andouille eu hamburger. Ea pastrami spare ribs non sed aute anim. Ex
adipisicing irure ribeye laboris. Elit mollit hamburger, voluptate pastrami exercitation ea
dolore duis spare ribs ribeye ut commodo. Do chuck eu pork non turkey, ea esse ullamco
aliqua nulla tongue ofﬁcia ut.
1
This illustration shows how a longer article could
appear within the About tab.
1http://somedeployment.com/accidentmap/
Ushahidi
31Details of Individual Content Block

AboutViews Sets
Accident Map
About
The Team
The Accident Map Project
Bacon ipsum dolor sit amet turducken sed
fatback, short ribs pork belly prosciutto ad.
Eiusmod salami non, ham eu aute cillum
venison short loin anim.
Aliqua dolore andouille consectetur frankfurter.
In aliquip ﬁlet mignon sint. Tail sint ullamco
spare ribs. Filet mignon velit swine, laborum
rump qui pig sausage elit short ribs andouille eu
hamburger.
More >
Latest reports
Capicola dolore chicken ground round
esse anim
Consectetur non tempor labore dolor,
nostrud qui kielbasa ball tip jowl short loin
dolore.
1
This screen illustrates how a longer article would
be reflowed for display on a mobile device.
1
32Mobile - Multiple Content Blocks

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboardDashboard
30%
Next: How mapping will help your project.
Recent Activity Statistics
Checklists
"Turducken fatback qui ut culpa."
Anonymous Today 4:20 AM
"Capicola dolore chicken ground…"
Gerald Durrell Yesterday 5:56 PM
Updated
New Comment
"Lusmod consequat duis incididunt est frankfurter"
Jared Diamond July 13, 4:45 PM
Published
Anonymous July 12, 12:53 AM
New Report
487 Reports
Received
88
Comments
Posted
New user registration
Bart Engels July 11, 4:20 AM
"Capicola dolore chicken ground…"
Gerald Durrell July 10, 5:56 PM
Updated
Jared Diamond July 10, 4:45 PM
Published
17 Registered
Users
8
9
The Workspace tab is dedicated to managing the
user contributed content in a deployment (i.e.
reports and comments). The Dashboard shows a
summary overview of the status of the
deployment.
1
The All Reports view lists every report in the
system.
2
The Report Type and Stage view allows the user to
choose which kind of report they would like to see,
or within each of those, reports of which stage
they would like to view. See subsequent pages for
more detail.
3
The Worklist view is visible only if there are reports
that have people assigned as responsible for
different stages (see Advanced Report Designer
for more details). All the reports for which the
current user has been identified as responsible for
are listed in this view.
4
Any reports the user has Flagged anywhere in the
system is shown in the Flagged view.
5
The Comments view lists all comments in the
system and allows the user to moderate
comments as appropriate.
6
The user can access checklists for setting goals and
checking progress.
7
1 2 3 4 5 6 7
Recent Activity shows everything that has been
happening in the deployment in reverse
chronological order.
8
The user's progress with respect to their goals set
in Checklists is shown to encourage continued
work on checklists and goals.
9
Ushahidi
34Workspace - Dashboard

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Workspace
CommentsAccident Reports - Awaiting Review... Worklist FlaggedAll Reports ChecklistsDashboard
Category 3
Published
5
Category 3
Translation
Category 6
Published
2
Ham hock kielbasa
Category 5
Published
Next stage: None
Steve Burchovsky is editing
Next stage: Translation
Next stage: None
Next stage: Approval
Search within 'All Reports' Advanced search
3
2
6
4
If the deployment is using only simple reports (no
workflow, only submit & publish), the worklist is
not shown.
If the user does not have permission to moderate
comments or manage the checklist, these items
are not displayed.
1
If another user is currently editing a report, this is
shown. The user cannot edit a report while
another person is also editing the same report.
3
If the reports have multiple stages (as specified in
the Advanced Report Editor), then the next stage
is displayed.
4
Select All
Accident Reports - Awaiting Review... FlaggedAll ReportsDashboard All Reports1
If a report has been marked as having duplicates,
this is indicated in the list.
2
The tools available here are: Edit, Flag, Export &
Share, Delete and Mark as Duplicate. If the user
clicks Mark as Duplicate, the report is added to the
Duplicate Manager list.
5
5
When the user enters a query in the search box, all
fields that the user has permission to view should
be searched (e.g. title, description, category, sets,
submitter).
If the user selects Advanced Search, a screen
similar to the Set Editor screen should be
displayed to allow the user to construct a complex
search query.
6
Duplicate Manager 3
Ushahidi
35Workspace - Unpublished

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Workspace
Category 3
Published
5
Category 3
Translation
Category 6
Published
2
Ham hock kielbasa
Category 5
Published
Next stage: None
Steve Burchovsky is editing
Next stage: None
Next stage: Approval
Flagged
Un-ﬂag Publish Delete Duplicates
Accident Reports
Awaiting Review & Publishing
Published
Hospital Status Reports
Awaiting Veriﬁcation
Awaiting Review & Publishing
Published
3
2
1
Users can select multiple reports in the Workspace
views. Once multiple reports have been selected
the toolbar at the bottom of the screen shows bulk
actions that can be carried out on the reports.
1
In this menu, users can see each report type that
has been created for the deployment, and each of
the stages that the reports have. Users can choose
to view just a particular kind of report, or a
particular kind of report at a particular stage.
2
When the user has selected multiple items using
the checkboxes, the toolbar at the bottom of the
screen changes to show bulk actions that can be
carried out on the reports. If the user selects
Duplicates, the selected reports are added to the
Duplicate Manager.
3
Duplicate Manager 3
Ushahidi
36Workspace - Flagged

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Workspace
Any reports that the user has added to the
Duplicate manager are listed here.
1
The user can mark all the listed reports as
duplicates. The first item in the list will be made
the primary report for the purposes of display.
2
The user can mark the report as primary (in which
case the primary report moves to the second
position in the list).
3
Category 3
Published
5
Category 3
Translation
Category 6
Published
2
Ham hock kielbasa
Category 5
Published
Duplicate Manager
Make primary
Mark 4 reports as duplicates
Close
Remove from list
Primary Report
1
3
2
Ushahidi
37Workspace - Duplicate Manager

ToolsWorkspace
Accident Map
ProfileWorkspace
Worklist
kielbasa incididunt qui voluptate spare ribs
flank pastrami do..."
Category 3
Published
Rob Enders
Today, 12:20 PM 5
kielbasa incididunt qui voluptate spare ribs
flank pastrami do..."
Category 3
Translation
Rob Enders
Today, 12:20 PM
Next stage: None
Steve Burchovsky
is editing
Search within 'Worklist' Advanced
The user can scroll the available tabs. In this
illustration, the second set of tabs is shown. Note
that the user profile is now a tab rather than a text
link as shown in the desktop design.
1
When shown on mobile, the different views are
made available through a drop down list.
2
1
2
38Mobile - Worklist

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Tools
Reports & Entities Plugins SettingsUsers & Groups Appearance CategoriesPermissions Reports & Entities
Report Types
Basic Report Accident Report New Report Type
Entity Types
Hospitals
Hospital Status
New Entity
Disabled
Active
12Entities
Active Active
0Reports
187Reports
45Reports
8
1 2 3 4 5 6 7
9
The Tools tab is for deployment administrators to
manage the configuration of their deployment.
The Users & Groups section is used to manage the
people with permission to log in to the
deployment.
1
The Permissions section is used to manage the
level of access that different groups have within
the deployment. This is focused on the different
tabs and views that people have access to (e.g.
that members of the public cannot see the Sets
tab). Permission management for individual
reports is achieved through the Report Designer.
2
The Reports & Entities section shows the different
kinds of reports that can be submitted through
the deployment, and what kinds of entities exist in
the system (e.g. for collecting sensor data).
3
The Appearance section is used for managing
components such as themes or the organisation of
the tabs.
4
The Categoies section is used to manage the
categories that exist in the deployment.
5
The Plugins section is used to install and enable
plugins. Additionally, any configuration of plugins
should be handled through this section.
6
The Settings section is used to handle basic
system configuration (e.g. URL, site name).
7
The user can create multiple different report types.
Each report type is a form template.
8
The user can create multiple different entity types.
Entities are used when multiple reports need to be
associated with a static entity within the system
(e.g. gathering sensor data). Each entity has its
own set of metadata (e.g. Hospital name, Hospital
Address), and must be associated with a specific
form which contributes additional metadata to the
entity (e.g. the Hospital Status form, which could
include the number of available beds).
9
Ushahidi
40Tools - Reports

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Tools
Reports & Entities Plugins SettingsUsers & Groups Appearance CategoriesPermissions
Ushahidi
Choose report type
Basic Report Photo Checkin
Title
Description
Location
Category
Photo
Description
News Gathering
Title
Description
Links
Category
Reliability
Bacon ipsum
Title
Description
Location
Blank Report
Design your own
report from scratch.
Cancel
Next
1
2
When users create a new report type, a wizard is
displayed. The first step of the wizard offers the
users different built-in report templates. This set of
5-10 templates should address the needs of the
majority of users without customisation.
1
Users can choose to create a blank report. If the
user chooses this option, the wizard completes in
the next step, and the user can then use the
Report Designer to modify the report.
2
42New Report Type Wizard - Choose Template

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Tools
Reports & Entities Plugins SettingsUsers & Groups Appearance CategoriesPermissions
Ushahidi
Submitting and reviewing reports Cancel
Next
Who is allowed to submit this kind of report?
Only registered users
Anyone
How should it be published?
The report should be published immediately
The report should be reviewed and approved before publishing by
Should people be notiﬁed when a report is submitted?
Yes
No
All registered users
Back
Administrator
1
If the user chooses a report template, a series of
screens are shown that ask the user basic things
about how the report should be handled. This will
alleviate the need for the majority of users to make
use of the Report Designer. Only one screen from
this flow is illustrated here.
1
43New Report Type Wizard - Choose Settings

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Workspace
Ushahidi
Accident Report
CancelSave
Location
Add field
Switch to Advanced Report Designer
Kampala, Uganda VerifyDefault location
LocationField title
Field type Location
Title
Description
Notifications
Approvals
Category
PreviewDesign
Provide a clear and complete description
of the accident, including the kind and
number of vehicles involved.
deserunt.
aliquip consequat.
1
4
2
3
The Report Designer is used to create and modify
report forms. The Report Designer can only be
used on non-smartphone devices (larger-screen
devices such as laptops or tablet computers).
The Simple Report Designer is used for creating
reports that have only one or two stages (one
stage would be for immediate publication on
submission, two stage would be for moderation
before publication). Additionally, the Simple
Report Designer supports only simple
notifications and approvals rules.
The user is presented with a list of fields that can
be re-ordered (by drag and drop) and configured.
1
The field that is selected for editing is highlighted.
2
The characteristics of the field can modified. The
user can specify many characteristics of the field,
including who is able to edit the field (either
members of the public upon submission, or
administrators of the deployment). Any more
complex permissions management requires the
Advanced Report Designer.
3
The user can preview a form to ensure the design
is working during the design and editing process.
4
Basics
Help
Advanced
Visible to Public
Field ID DESCRIPTION
Editable by Public
Mandatory field
45Simple Report Designer - Modify Field

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Workspace
Ushahidi
Location
Add ﬁeld
Long text
Photo or VideoPhoto
Video
Short text
Number
List of options Yes / No
Link
Introduction
Date & timeReliability
Accident Report
Switch to Advanced Report Designer
Title
Description
Notiﬁcations
Approvals
Category
deserunt.
aliquip consequat.
PreviewDesign
CancelSave
1
When the user chooses to add a field, a palette of
field choices are shown.
1
The user can click on any field type to add it to the
form (in which case it is added to the end of list of
fields), or drag and drop it into the sequence of
form fields.
2
The user can configure who will be notified when
the form is submitted.
3
The user can specify the approval rules for the
form. With the Simple Report Designer, the only
kind of approval possible is Administrator
approval. For more complex approvals (using
specific groups of users, for example), the
Advanced Report Designer must be used.
4
3
4
2
46Simple Report Designer - Add Field

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Workspace
Ushahidi
Title
Media
Email Administrators
Add action
Stage 1: Initial Report
Stage 2: Verification
Stage 3: Publishing
Field name
Add stage
Permissions
PreviewDesignAccident Report
Description
Location
Submitter
IP
Add field
CancelSave
Visible to
Description
Field type Text field
Max. characters 50
Public
Field ID DESCRIPTION
Mandatory field
Editable by Public
Help Provide a clear and complete description
of the accident, including the kind and
number of vehicles involved.
deserunt.
aliquip consequat.
Basics
Cannot switch to Basic Report Designer
1
The Advanced Report Designer allows the user to
create forms that have multiple stages, have varied
permissions for each stage, and complex actions
that are carried out at the end of each stage.
Stages are used to build workflows within the
platform. For example, if a report needs to be
verified before publication, a Verification stage
could be added.
Permissions can also be assigned to each stage, so
particular people have access to modifying only
particular aspects of reports.
Additionally, it is possible to nominate individuals
or groups as responsible for a particular stage, in
which case relevant reports will appear on their
Worklist (in the Workspace).
1
2
Some fields are not published to the public. Fields
that are private to the logged-in users only are
differentiated using an icon.
2
Advanced
Mandatory field
47Advanced Report Designer - Modify Field

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Workspace
Ushahidi
Title
Media
Description
Location
Submitter
IP
Add ﬁeld
Add action
Stage 2: Veriﬁcation
Stage 3: Publishing
Add stage
Permissions
CancelSave
deserunt.
aliquip consequat.
Containing
What to do
To
Name
Send email
Report
Administrators
Action
1
At the end of each stage, multiple actions can be
carried out automatically. This could include email
notification, sending data to third party systems
through standard web APIS, sending messages to
Twitter, etc. This could be extended through
plugins.
1
48Advanced Report Designer - Modify Action

Submit Report
Jared Diamond
Accident Map
Tools
HelpHelp
Workspace
Ushahidi
Category
Reliability
Notes
Add ﬁeld
Stage 2: Review & Approval
Stage 3: Publishing
Add stage
Permissions & responsibility
CancelSave
Add action
Permissions & responsibility
deserunt.
aliquip consequat.
Add
Administrators can edit this stage
Choose user or group
Responsible for this stage (will appear on worklist)
Andrew Murray can edit this stage
Responsible for this stage (will appear on worklist)
1
3
2
For each stage of a report it is possible to define
permissions (who can modify this stage of the
report) and responsibility (who is in charge of
taking the report through this stage). Those who
are responsible for the stage will have the reports
at this stage show on their Worklist in the
Workspace.
1
The user can add users or groups to this of those
with permissions and responsibility for the stage.
2
Users or groups can be removed from the
permissions and responsibility list. There must be
at least one person or group in the list.
3
49Advanced Report Designer - Modify Permissions & Assignment

Plugins
Users can install plugins to Ushahidi. The plugins allow the
users to modify the appearance and behaviour of the
system.
Users should be able to install plugins that achieve the
following effects:
Add new view to the Views tab
Add new tab
Configure permissions for views and tabs
Add custom settings UI for both views and tabs
Add new kinds of data types to Report Designer
Add new kinds of actions to Report Designer
Allow report data to be published to third party applications
and services
Further discussion and investigation is required to fully define
the capabilities granted to plugins.
Themes
Users can install custom themes. The themes allow the users
to modify the appearance of the system.
Users should be able to install themes that allow them to
change a subset of the site CSS achieving the following
effects:
Change colour scheme of header area (including both
colours and any image assets)
Change colour scheme of body area (in fairly limited ways)
Change logo
Themes should allow for users to create 'single tab themes'
that do not show any of the tabs to members of the public
(thus showing a simplified header area to non-logged-in
users.
Further discussion and investigation is required to fully define
the capabilities granted to themes.
51Discussion

Gabriel White, August 2012
gabriel@smallsurfaces.com
www.smallsurfaces.com

Ushahdi 3.0 Design Framework

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (8)

Similar a Ushahdi 3.0 Design Framework

Similar a Ushahdi 3.0 Design Framework (20)

Más de Ushahidi

Más de Ushahidi (20)

Último

Último (20)

Ushahdi 3.0 Design Framework