Proposal for Redesign of company Document Management System.

1. A PROPOSAL FOR RECONSTRUCTION
FAIZ SHARIFF
Freyr Inc
Assistant Manager/Business Development
March 2013

2. 2
INTRODUCTION
03 DOCUMENT PURPOSE
04 DOCUMENT INFORMATION
PROJECT OVERVIEW
05 AN ETHIC OF INTUITIVENESS
06 PARAMETERS FOR CONSIDERATION
APPLICATION OVERVIEW
07 EXISTING FEATURES
RECONSTRUCTION
08 PROPOSED IMPROVEMENTS
12 WIREFRAME MOCKUPS

3. 3
This essay serves to document, complement and contextualize my project
work for the Document Management System Reconstruction at Freyr Inc
in 2013. On a practical level, this work will result in the production and
distribution of a series of wireframes and prototypes
1
(one prototype, we’re
hoping, if all goes well), covering a range of parameters. Through their
content, design and distribution, we aim to redesign the DMS as a vehicle
of usability, intuitiveness and efficiency.
Even a cursory overview of the growing body of data on Document
Management Systems reveals information that points towards one key
notion: ease of use and efficiency cost money. This project keeps this point
in mind and provides workarounds using Open-Source Technology
2
at
every possible juncture. Given the current technological climate, these
discussions of investment of capital and manpower seem all the more
urgent.
My personal interest lies in the issues surrounding the ease of use, the time
taken for data transfer, and the reliability of the system. The aim here is to
rely less on the system and focus more on the work at hand. This in mind,
we set out to devise a system that requires minimum investment in time for
learning and adaptation, less clicking and screen time, flat design (with
colors easy on the eye and color coding for file batching/segregation),
beautiful typography and effortless design that gets the job done in
minimum time. Data will be cloud-based with availability for desktop
synchronization if required.
The project drew skeptical looks from the programming and management
teams on account of its eccentric nature: between a set of formal strategies
within graphic design; contextual separation, reductionism and idealization,
and the context within which they all operate. It was criticized that this
project went against accepted norms of interface design and user
accessibility. I will not lie: it does these things, but in a good way. A lot of
time and effort has gone into developing a system, which, at the risk of
sounding arrogant, allows you to be lazy and careless, because it takes care of
things.
I wanted to approach this project from an understanding of praxis-based
learning — of learning through doing, of complementary theory and
practice — and as such I was engaged in a cycle of continual research,
experimentation, production and reflection. This is the first in the series of
reports that are aimed towards the finished product.
Document Purpose
1. The aim here was to make a single
finished prototype and begin testing
immediately. Workflows are to be
integrated and amalgamated to produce
one finished product of high quality.
2. ArborJS was the Javascript Library of
choice because of its Open-Source MIT
License, and TimelineJS (from
KnightLab) allows data input from
Google Spreadsheets.

4. 4
C HA NGE HI STO R Y
Version Date Author Comments
1.0 11/02/2013 Faiz Shariff Initial Draft completed.
1.1 20/02/2013 Faiz Shariff
Arjun Teja
Initial Design Layout
completed.
1.2 26/02/2013 Faiz Shariff
Arjun Teja
Data and Technical
Specifications completed. Icon
Legend for Data Types and
other obligations completed.
1.3 07/03/2013 Faiz Shariff Initial Proposal Draft
completed.
AU TH OR IZA TION HIS TOR Y
Version Date Status Comments
1.0 11/02/2013 Faiz Shariff Initial Draft reviewed.
1.1 20/02/2013 Faiz Shariff
Arjun Teja
Initial Design Layout Plan
reviewed. Technical
Specifications to be reviewed.
1.2 26/02/2013 Faiz Shariff
Arjun Teja
Documentation completed.
Product Features to be
reviewed.
1.3 07/03/2013 Faiz Shariff Testing initiated, Draft
submitted for review.
INT EN DE D A UD IEN CE
This document is intended to be read and understood by all readers of: The
Software Development Team, who wish to plan, architect or implement
applications, components or interfaces facilitating interoperability; The
Design Team, who wish to plan, architect or implement design protocols and
matters of usability, legibility and aesthetics; The End-Users, who wish to
evaluate the clinical suitability of the DMS with regards to documents
currently in use and their adherence to EMA Standards.
Document Information

5. 5
An Ethic of Intuitiveness
The DMS Reconstruction Project aims to propose enhancements for the
DMS, keeping in mind the current business strategy employed to attract
customers, with a focus on developing business and incorporating
innovation into the service portfolio and its corresponding value chain.
Up till now, brand awareness has been generated using 'impression' as a
means of attracting customer attention. An alternate approach is proposed
herewith using Product Design and Usability. Here is the logic behind the
process:
A single file upload, assigned to a particular web folder, doc group, user, and
finally security privileges on average takes 10-15 mouse clicks. This is a
VERY conservative number. If it takes 10 clicks per file, for 10 files we have
100 clicks. We have bypassed this with the bulk upload option. Even then
the click count ranges around 12 clicks.
There is a major flaw in this process. It employs a function-based approach
rather than a process based approach. If a user has to upload 10 files, the
first upload is done only after all 10 have been selected. There is no
simultaneous file transfer mechanism. What if there was a way to allow the
user to bulk upload, while saving his/her time? What if the first upload
started WHILE the user selected the second file and so on?
Seeing things from this perspective changes things drastically. By saving a
few seconds with each file, we save thousands of minutes for hundreds of
users. Every minute saved in time correlates with a $ or € saved in currency.
This is possible, feasible and highly productive. Introducing new elements
into the source code can do this:
1) A Drag and Drop Uploading script that allows the user to drag and
drop one or more documents into the existing interface without any
pop-up windows. Then the work is done in a single click.
2) An Upload Status Bar that shows the individual upload status of
each file upload, with the time remaining for uploads completion. A
side bar would allow user to 'clear' completed uploads from the
screen, if he chooses to.
3) A redesigned 3-part interface: to display the Cloud Storage, the
Workspace, and a collapsible Details block. The Cloud Drive
section displays the current user’s files; the Workspace, the largest
section in the page, allows the user to make all required actions and
the collapsible dynamic Details block displays all other details, with
hierarchy and structure of files stored in the Cloud Server.

6. 6
The first thing we kept in mind was the end-user, including an
understanding of needs, objectives, skills, preferences, habits and
tendencies. Once we did that, we looked into the following:
The best interfaces are almost invisible. They blend into the workspace and
do not get in your way by avoiding unnecessary elements. They are clear in
labeling and in the message they convey.
We maintained consistency by using common UI Elements. By doing this
we give users more comfort and efficiency. We kept in mind a steep
learning curve for faster progress. Once a user learns how to do something,
they should be able to transfer that skill to other parts of the site.
We ensured ‘purpose’ in the Page Layout. Considering the relationships
between different items on the page, we structured the page based on level
of importance and ease of access. Carefully placed items help draw attention
to the most important data and aid scanning and readability.
The strategic use of color directs attention toward or away from items to the
user’s advantage. The chosen color scheme pushes site content into the
foreground without distraction. Types of color variations include Hover
Effects, Borders, Subtler Text Over Highlight Color, Light and Shadow
Effects and Gradients when necessary. Every element of the 3-part Layout
uses a separate monochromatic color scheme.
We used typography for hierarchy, clarity and quick access. The typefaces
chosen do not get in the way of the workflow and were carefully considered.
We ensured that they blend into the layout. Font size and arrangement of
text helps increase legibility and readability. Working with large batches of
files is a lot easier with good typography aiding you.
Parameters for Consideration
SIMPLICITYCONSISTENCYPURPOSECOLORTYPOGRAPHY

7. 7
Existing Features
U S E R D A S H B O A R D
The current User Dashboard consists of 5 tabs, 5 quick links and 2 sub-tabs.
D O C U M E N T U P L O A D W I Z A R D
A 5 step wizard form uploading documents. Current process is Document
Upload à Assign Doc Groups à Assign Doc Group Fields à Assign
Folders à Workflow Users.
D O C C E N T E R
A central repository of documents with different views for checking
documents.
U S E R C O N T R O L P A N E L
Provides accessibility to internal and external users. Features entailed:
Create New Users, Edit/Manage user roles, and Delete Users
D O C U M E N T D A S H B O A R D
Provides the history and entire details of the document. This is a centralized
place where the user can make multiple changes to the document. Features
entailed at this panel: Document Timestamps, Versioning History,
Associated Folders, Associated Doc Groups, Comments section,
Comments Attachments, Workflow Users.
F O L D E R S T R U C T U R E S
The user can create sponsor defined folders and hierarchies.
M E T A D A T A S Y S T E M
Document Group Rules Based Routing System. The user can create fields
in Doc Group properties depending upon the existing system and its fields.
B A T C H P R O C E S S I N G
Bulk Upload Feature. However, this creates a pop-up window where files
are to be individually selected, making it time consuming. Furthermore, this
does not allow the user to simultaneously bulk-upload documents from
different folder locations. If the user needs to do so, the process must be
performed twice.

8. 8
Proposed Improvements
M A I N S C R E E N D A S H B O A R D
The Interface has been redesigned to discard the current ‘tabs and wizards’
model in favor of a new dynamic integrated 3-part interface, which is
explained in details in the mockups in the following pages.
D O C U M E N T U P L O A D M E C H A N I S M
There is no wizard for uploading documents anymore, discarded in favor of
a drag and drop model, along with the ability to manually upload
documents the old-fashioned way of selected via Windows/Mac folders.
Metadata is assigned AFTER uploading documents, as this allows users to
save time. While files are being uploaded in the background, users can
assign metadata individually or to entire groups of files. Users can now
alert/summon other users to view, edit, contribute and comment on shared
documents and/or project information with the assurance that their data is
safe and secure.
D R A G & D R O P
The Drag and Drop mechanism allows users to quickly drop files into the
workspace, either for uploading or for viewing. Editing mechanisms have
not been put in place at the moment, as users prefer to edit documents
locally. For this reason, documents may be uploaded or downloaded via drag
drop only. This reduces cycle times within docs centered procedures. This
model allows you to assign folder locations to documents by dragging them
to specific locations within the interface. The following scripts are being
considered:
1. Droppable: This script allows placement of elements within holders.
The application of this script was to allow graphical visualization of
documents, users, labels and any other assignable categories.
2. Gridster: This script allows drag and drop scripts within the workspace.
Similar to Firefox Tabs, this allows users to create their own sub-
workspaces within the parent workspace. We are working on
integrating this with droppable to allow users to resize as well as refill
in their own node blocks within the parent grid.
3. Shapeshift: This script allows placement of elements within a column
based grid and numbered placeholders on data containers, all items
flowing from right to left, top to bottom. Data in one container can be
dragged to another, and the responsive grid realigns itself to new
dimensions created by the appended data. What separates this script is
the included jQuery UI Touch Punch plugin, which allows usage on
touch screen devices.
3. mcpants.github.io/jquery.shapeshift/
1. jqueryui.com/droppable/
2. gridster.net/

9. 9
4. Interface: This script has been the key proponent of the first block in
the new proposed 3-part interface. This allows a simple visual folder
tree with the ability to drag and drop folders and document into each
other, exactly like Windows explorer.
5. Dropzone: This element allows clean uploading via drag and drop. The
benefit of this element is the upload verification ticker, as well as
image previews of uploaded documents.
The user can drag and drop the uploaded files directly into folders in the
workspace and rename, move, cut, copy, paste and delete, like a normal
Windows folder hierarchy. For ease of use, each web folder zooms and
grows in size as the mouse pointer hovers over it. This is so that the user
does not miss and drop the files into any folder. We can either go with the
drag drop approach here, or hold the control key and select multiple files.
Once the user control selects the required files, he can use the 'Send to
folder' option as well.
V I S U A L I Z A T I O N (Force-direc ted gra phs)
The ArborJS script allows for a force-directed approach to data visualization.
Integrating this with color-coded elements allows users to get a bird’s eye
view of their data in a visually elegant and appealing manner. Trials
conducted with:
The Halfviz Mod allows color-coding and directional representation of
data relationships
The Atlas Mod were found to be too rigid and unusable.
The Echolalia Mod was found to be best suited for summaries of smaller
data-sets.
ArborJS provides the following benefits:
1. Visually assign privileges to users in a beautiful molecular structure,
allowing for actual granular authoring.
2. Quickly monitor all users in this view with zoom and pan
functionality. Manage/review/publish/approve/delete can be
incorporated into this, as sub-nodes of a single node. Multiple
nodes, each representing a user, can be highlighted through click-
drag and can simultaneously be assigned privileges. The focus may
be shifted from docs to user as well.
3. Creating an invisible layer over this view for administrators and
other users to write sticky notes, tag and highlight important files,
as well as set alarms for pre-submission notifications. We can even
develop web apps that let users monitor process status and
communicate each other on their mobile phones.
4. interface.eyecon.ro/
5. dropzonejs.com/
arborjs.org/halfviz/#/date-with-destiny
arborjs.org/atlas/
arborjs.org/echolalia/

10. 10
D O C C E N T E R
W O R K S P A C E
The Doc Center has been reassigned the title of Workspace. This is because
unlike the existing ‘Doc Center’, the functionality of the Workspace is not
limited to Documents alone and extends to the creation and manipulation
of folders, labels, users and metadata. The 3-part layout, of which the 3rd
is
collapsible, offers greater maneuverability with big data while maintaining a
user-friendly layout and interface.
C O L O U R C O D I N G
User-assigned colour coding of folders is being looked into. This serves as a
complement to the 'Favourites' view, now reassigned to ‘Bookmarks’. All
color-coded folders directly allot a lighter shade of colour to the files within
them, and a beautiful colour palette welcomes the user in the bookmarks
section. The names of folders can be displayed either within the colours
themselves or may be displayed using a similarly coloured font.
T I M E S C A L E
This allows the admin, as well as individual users to view data and
documents in visualized timelines. It gives the user the power of Project
Management. Its biggest strength lies in: Pre-planned operation, through
remote control, or timer-based executions.
While the above is highly difficult on a scale of thousands of files, it holds
its promise in individual files. The timeline view can either do the above
(Remote control/timer-based functions), or it can be used to display the life
of a file since its entry into the web drive. So rather than have a column that
displays the version of the file in the workspace, we can have a timescale.
This also takes care of the inability of a user to view the continuous progress
of a file since its introduction into the system.
These timelines are not static, they are dynamic and interactive, and give the
user linkages to other useful media. The following scripts are being
considered:
1. Simile Timeline: An open-source web widget that allows the display of
timelines either with Hotzones, sections of the Timeline with a
different resolution, usually higher OR mouse-wheel zooming. Other
features include using handlers instead of popup bubbles; custom detail
display; adding day labels with months when interval units are days;
mouse-wheel scrolling and zooming; custom date ranges; and moving
the Timeline via Javascript.
2. TimelineJS: This script allows the display of visually dynamic and
interactive timelines. Integration with Google Spreadsheets allows for
direct input of raw data for visual representation.
1. simile-widgets.org/timeline/
2. timeline.knightlab.com/

11. 11
F O R M V A L I D A T I O N S T A T E S
The provision of validation states in input boxes allows for reduction of
errors in data entry, and helps communicate situations that users may have
to deal with, with messages for errors, warnings, info and success messages.
This is shown below:
Something may have gone wrong
Please correct the error
Folder name taken
Success!
C R O S S - P L A T F O R M C O N S I S T E N C Y
Different browsers and platforms will render the interface differently. For
this reason, Normalize.css has been used to render data consistently with the
same dimensions regardless of platform. This css element has been included
as-is before the style sheet.
Input with warning
Input with error
Input with info
Input with success
necolas.github.io/normalize.css/