2. About this document
This document provides a high-level, high-fidelity description of the user interface design for the next major
version of the Ushahidi platform on the web, as seen on small-screen devices.
Contained in this document are a set of annotated visual design mockups that illustrate how the software should
be organized and behave.
This document should be used to continue to detail and implement the design solution for the next major version
of the platform.
4. Design elements
The ‘Menu’ button is a global, persistent
1 trigger that reveals a deployment’s top- 2
level menu items.
1 3
A deployment can be customized to display
2 any color or image as its background. If an
image is used (as in this example), a blur
filter is applied.
The ‘Share’ button is contextual trigger that
3 reveals sharing and export options for the
content currently in view.
The ‘slider’ is a user interface pattern for
4 offering users a trigger to reveal more
detail and functionality related to the
content currently in view.
4
5. Design elements
The first of the items displayed in the off-canvas
1 menu is a button to “Submit report,” making it
accessible from anywhere in the deployment.
1 8
Menu items set on the grey background represent
2 public content, starting with “Views,” where users 2
can visualize the data that lives in a deployment.
3
The “Sets” menu item links to user-created
3 subsets of the data (using search queries).
4
The remaining menu items are examples of
4 administrator-created pages that can leverage
plugins to display articles or specific media.
5
5
Menu items on the white background represent
administrative-related and support-related content,
6
starting with users’ “Workspace,” where registered
users can manage the deployment’s content. 7
The “Tools” menu item links administrators to
6 system settings.
Logged in users can access their account settings
7 from the off-canvas menu.
The off-canvas menu can be closed by either
8 selecting the ‘Menu’ button or swiping the primary
content area right-to-left, back into view.
6. Design elements
The off-canvas ‘Share’ view can be closed
1 by either selecting the ‘Share’ button or
swiping the primary content area left-to-
right, back into view.
1 2
2
The first of the items displayed in the off-
canvas view is a button save the current
3
view (in this case, a map) as an image.
4
The second group of items are related to
3 sharing the current content on external
services, like Twitter and Facebook.
5
If appropriate for the current content, the
4 ‘Share’ view will offer the URL for its real-
time RSS feed.
If appropriate for the current content, the
5 ‘Share’ view will offer embeddable HTML
for visitors to include the content in their
website.
8. Map view
Users can select different visualizations
1 using the ‘Views’ tabs. In view by default
are map, list, trends and heat map.
Additional views are accessible by either
swiping the tabs horizontally or selecting
the arrow button.
1
The content area below shows the selected
2 visualization; map, in this case.
Users can reveal search options to help
3 narrow the reports in view by either swiping
up or selecting the ‘Search’ slider. 2
3
9. Map view with category-based search
Users can reveal and hide search options
1 for the current view by selecting or swiping 1
vertically on the ‘slider’ tab.
At any time within the ‘Search slider,’ users
2 can apply a keyword-based search to the 2
view.
3
More advanced search tools are available
3 in three tabs, offering category-, date- and
Set-based searches. In this example,
category-based search is visible.
4
The deployment’s categories are displayed
4 in a grid and, upon selecting a category,
reveals its color for reference in the view
behind.
10. List view
When in ‘List’ view, reports are summarized
1 with either their photo, publish settings or
comment total. Reports that are not
published publicly are marked with the
‘locked’ icon.
Reports that include a photo are
2 summarized with a square thumbnail
image.
3
Reports with comments are marked with a
comments icon along with the total number
1
of comments.
2
3
11. List view with date-based search
Users can apply a date-based search by
1 designating the start and end date for the
search query parameters. By selecting an
input, a calendar picker is revealed.
1
12. Report detail (public view)
As its visible to the public, a report’s
1 detailed, full-screen view includes all of its
primary content, along with a ‘Settings
slider’ to expose data the administrator
chooses.
1
13. Report detail (private view)
As its visible to users with permission, a
1 report’s detailed, full-screen view includes
added functionality within the ‘Settings
slider.’ The user can perform tasks like flag,
publish and delete.
1
14. Edit report (private view)
After revealing the report’s ‘Settings slider,’
1 three tabbed views are available: Private,
history and edit.
If the report has multiple ‘Stages’
2 associated with it, they’re revealed above
1
its standard fields with an indication of
which stage the user is managing at the
moment. 2
16. Submit report form
At any point in the authoring process, a
1 user can submit their work at the top-right
of the screen.
1
If location data is associated with the report
2 type (as in this example), a ‘Location
slider’ is available to display the estimated
location and offer a trigger to expose tools
for better specifying the location.
2
17. Submit report location form
Upon revealing the ‘Location slider,’ the
1 user can simply find the desired location
using keyword-based search, which re-
orients the map below.
The map displays the user’s current 1
2 location, their keyword search results or
the location they’ve selected from the list
below. The user can manually move the pin
wherever they like on the map using their
finger or mouse cursor. 2
Upon selecting a location from the list
3 below, the map places the pin at the
appropriate location on the map. 3
19. Set list
Headings help group sets (e.g. My sets, All
1 sets), and provide a trigger to ‘Create’ a
new set, where appropriate.
Set summaries include its title, description
2 and icons to indicate the total number of 1
reports included, the default view applied to
them and its privacy settings. Red report
totals indicate that new reports have been
added to the set.
2
20. Set detail
The set’s title is paired with a link to its
1 parent page for navigation and sense of
place.
The set’s default view is selected, while all 1
2 of the deployment’s alternative views are
still accessible.
Metadata and settings configuration are
3 accessible via the ‘Settings slider.’
2
3
21. Set detail: Configuration
The first (and publicly visible) view within a
1 set’s ‘Settings slider’ is its configuration,
which summarizes the search parameters
applied to it. The remaining tabbed views --
privacy and edit -- are accessible with
permission.
1
22. Set detail: Privacy
Set owners can toggle the set’s privacy.
1 When set to ‘private,’ the user can
designate which users can access the set.
People with access to the set are
2 represented by their avatar.
1
2
23. Set detail: Edit
The set’s title, description and search
1 parameters are all editable via the ‘Edit’ tab
within the ‘Settings slider.’
1
25. Workspace
Within the “Workspace” section of a
1 deployment, a ‘Stats’ trigger appears at the
top-right of the screen, providing access to
high-level data about activity on the
deployment. 1
Users’ “Workspace” includes a home
2 screen with buttons that lead them to each
of its seven sub-categories.
2
26. Workspace stats
With the off-canvas ‘Stats’ view revealed,
1 users can see select data about the total
number of reports, comments and users on
the deployment.
1
Deployments that use checklists for its
2 users to complete include the user’s
progress in the ‘Stats’ off-canvas view.
2
27. Workspace dashboard
Every view within a user’s “Workspace”
1 includes its page title paired with a link to
its parent for navigation and sense of
place.
Summaries of activity on the deployment
1
2 include an icon to indicate the type of
activity (e.g. comment, task, publish, new
report, new user).
2
28. Workspace: All reports
When listing reports, users can user the
1 ‘Edit’ button to toggle the view into ‘Edit
mode,’ which would allow them edit
multiple reports in one view.
Reports are summarized just as they are in 1
2 the public ‘List’ view. Users can perform
per-report actions by selecting the report to
display the report’s detailed, full-screen
view.
2
29. Workspace: All reports (edit mode)
Toggling the view into ‘Edit mode’ reveals a
1 toolbar and checkboxes to the left of each
report.
The toolbar includes triggers to flag,
2 publish or manage duplicates among the 1
selected reports 2
30. Workspace: Manage duplicate reports
Selecting a toolbar’s ‘Duplicates’ trigger
1 displays a modal view for managing the
selected reports. The button at the top
collects the reports within the designated
“primary report” and closes the view.
1
Any of the listed reports can be marked as
2 the primary report, or removed from the list.
2
32. Tools
Like “Workspace,” users’ “Tools” includes a
1 home screen with buttons that lead them to
each of its seven sub-categories.
1
33. Tools: Reports & entities
Report and entity types are listed with the
1 total number of reports (or entities) created
using them. A ‘lock’ icon is used to indicate
types that are disabled.
Users can create a new type at the bottom
2 of each list.
1
2
34. Tools: Report type detail
After selecting a report or entity type, users
1 see a summary of its fields and actions.
Users can create a new field at the bottom
2 of the list of fields.
1
2
35. Tools: Report type field
After selecting a report or entity type’s field,
1 users see a summary of its field type and
related options.
1
36. Tools: Report type field (add)
After choosing to add a field to an existing
1 report or entity type, users first select its
field type. The selected field type will
populate the view with the related options.
1
37. Tools: New report type (Step 1)
The step-by-step modal wizard provides a
1 button to advance at the top-right of each
view.
1
Users can select from a handful of built-in
2 report templates, which include a summary
of the field types included.
2
Users can optionally create a report type
3 from scratch, requiring them to create all of
its fields.
3
38. Tools: New report type (Step 2)
The second step in the step-by-step modal
1 wizard asks the user to determine how
they’d like new reports of this type to be
processed.
1
