Online Regulation Management System

Design an interface to help users manage, view & compare various versions of the regulation.

Image Source

Problem Statement

Acme corporation (fictional) wants to build a online regulation management system. Regulation has its own life cycle. It starts with drafting of regulation. Over a period of time, it goes through various discussions, amendments & additions. Design an interface to help users manage, view & compare various versions of the regulation.

A regulation contains following information
Regulation Name
Regulation Summary
Articles / Sections (1 to n)
Users assigned to it
Last modified date

Each section / article can be assigned to other users for modifications / comparison.

Deliverable

I had to design wireframes of the key screens and also show how I arrived to those.

Constraint

I was working alone on this and had 12 hrs to finish this assignment with no access to users.

Assumptions

Below are the list of assumptions I made before designing the system -
1. Users have basic technical knowledge to use web based systems
2. Regulation management is a similar system to google docs
3. There will be multiple regulations

Strategy

1. Understand what regulation management is and how it works
2. Try and use any similar system that’s available
3. Sketching and crosscheck with requirement
4. Wireframe

Problems faced

Regulation management systems, being enterprise application, were not available for free trials with personal email addresses. I tried going through google images if I can find any screenshots of the existing system but it wasn’t of much help.

Solution

Conceptually I could relate regulation management system with a book or file-folder systems.

Here is how
One regulation has many articles/sections just like a book has many chapters or a folder has many files. I started exploring cloud and — Google Drive, Dropbox and document management system — Krystal DMS.

Due to the time constraint, I couldn’t perform much of a user research and hence I thought, following the best practices implemented by the leading products would be a safe way to move ahead.

Google is an integral part of people and they are quite acquainted with it’s interface; Thanks to it’s simplicity. That’s why I thought of considering the structure of Google Drive would be the best suitable as it has similar elements as regulation management. E.g. Folders (Regulations), Files (Articles), Revisions, Sharing, Commenting.

One more product came to my mind that was Medium, again for it’s simplicity in interface. Their commenting interface is much more subtle than the google drive’s.

One more crucial feature was commenting. My development experience really helped me here as a lot of file version and comparison would happen there.

Notepad++ File Compare that colour codes the changes

Sketching

Now that I had a mental image of what and how I wanted to design the system, I started sketching the ideas for I can cross check if I’ve missed anything from the requirement and quickly iterate

Wireframes

After making sure that I’ve covered all the use cases, I started wireframing. I used Adobe Illustrator for it.

Regulation Life Cycle

Flow Chart created with Lucid Chart

Wireframes

Home Page where user sees (in the center) his recent articles he has worked on along with that, has access to all the regulations. Left side, has been kept for navigation and right side bar to see the details of selected article/regulation

Home Page Selected Article Revisions — Once user selects any article, he gets option to assign it to a user or move it to trash it (on the top of recent article title). On the right side bar, he sees Revisions segregated in New (which are unchecked) and All (below that)

Home Page Selected Article Details — Second tab (beside revision) shows details of the article such as name, summary, regulation, created and modified date along with the number of users it is shared with

Article Edit Page — When user opens an article, he gets typical File Menu and Toolbar for quick access to text formatting options (Indenting, font type, size etc). Right side bar is by default open because there are unchecked revisions for that article.

Top left has back button in case he wants to navigate back where he came from or if he needs to access any other article in the same regulation, he can do that by clicking on Regulation Name just beside the Article Name on the top.

Comments on article are shown on the right just beside the line where others have dropped in comment.

Comments (open state) — User can see who has commented on it and at what time and also can reply right there.

Compare Article View — When user clicks on Compare, he will get a side by side view of his own latest copy and the copy he wants to compare with (on the right). Color coding will help understand the users the changes which are been made. Side bar side comparison helps user see original and changed version right in front rather than recalling it.

Once, user will hover on any change (see on the right side of image), he will get three options — Comment if he wants to discuss regarding that particular change, Accept to simply accept the change or Reject to reject the change.

Limitations

There is a lot more I wanted to get into but couldn’t due to my little bit slower speed and the time restriction.

Below are the list of limitations it has

1. User roles aren’t distinguished
2. Option to remove users is missing
3. Use case where more than one person has edited the same copy and same section isn’t handled
4. Detailed requirements from actual users

Conclusion

Although this was an interview assignment, the problem statement given to me was a real time and I feel proud to say that the company did implement these solutions.

It was a great learning experience doing this assignment.

Thank you for reading this. Feel free to reach me on Twitter, LinkedIn or email — amsanket[ at ]gmail[ dot ]com