Challenge Summary
Welcome to "Dinnaco - iXBRL Document Viewer Apps Wireframes Challenge". In this challenge, we are looking for you to help plan a great user experience for the iXBRL (Inline eXtensible Business Reporting Language) Document Viewer App. The purpose of this challenge is to create an intuitive (wireframe) interface and interactions for the app where user can view HTML files in a Google Doc style reader. Users should be able to easily navigate, review and collaborate on documents for their company as well as view high level metrics for their clients.
At the end of this challenge, we are looking to see easy to use "wireframe concepts" that will help us design and build the user interface and continue to improve the user experience in the next phase of this project! Think about the problem and the human experience!
Round 1
Initial wireframes solution for client review
Round 2
All requirements as stated in challenge details with client feedback applied
XBRL is an open technology standard for financial reporting, based on XML. Many countries along with their respective financial regulators requires businesses to submit their financial reports (e.g. balance sheets and P&L accounts) in an electronic format such as iXBRL. An iXBRL (Inline XBRL) document is essentially a HTML document that contains XBRL tags applied to key financial information within it. This makes an iXBRL document human as well as machine readable. iXBRL documents can be seen on any browser. The iXBRL tags are defined in taxonomies. For information can be found here.
The iXBRL Document Viewer is an application that allows Dinnaco's clients to review tax and financial documentation on a year by year basis. Clients are able to log in to the application and be presented with a dashboard that has links to their full list of companies (businesses that they own and/or represent) and the associated documents for each of these companies. The client is able to view high level metrics associated with a single company or a selected group of companies on the dashboard. In addition to high level metrics on the dashboard, our clients should be able to see the status of any open issues or queries about the documents for each company. Besides being a document reviewer application, the application should allow for our clients to collaborate, comment, and interact with Dinnaco consultants on each document.
Once selecting a specific client document from the landing page/ dashboard, the client is taken to a document detail review screen. In this screen we are looking for your ideas on how to best present the user interface for interacting with, reviewing, and collaborating on the document. Each document has a table of contents that should serve as a 2ndry navigation scheme allowing a user to quickly navigate the main sections of the document. This 2ndry navigation should be dynamic and will be populated by the documents table of contents.
The document for client review will already be pre-prepared with a full list of tags and filters that follow an XML document type structure. The client is able to click on these tags and filters to show highlighted areas within the document that the client is to review. The tagged information in the document has a “context reference” that indicates whether a tag relates to a specific date (instant) or a time period (duration). The UI should clearly indicate this on the iXBRL document. Currently, this is achieved by color coding, any other innovative ways are welcome.
Key Areas of Creative Input
Viewing and analyzing tags is the main area in which we are looking for your ideas on how to handle with a better user experience. The document tag viewing and filtering needs to be dynamic and be able to handle a robust amount of detail. Just to be clear, we are NOT looking for how you add tags or filters to a document, but how you use already populated tags/ filters to “skim” or jump to those specific sections of a document.
In addition to tags and filters for the document, the client should be able to see highlighted content that has changed from previous versions of the document; for example, a previous year/ version of the document. Consider how to use a color key to show a “history” of the document changes and updates. This is crucial for our user experience in that it shows the key information and content that the client should be paying attention to in their review.
Another key interaction that we want to build out is the ability to comment and collaborate with Dinnaco consultants on specific aspects of the document. Explore ways for a client to highlight a section of the document and add a comment that the Dinnaco consultant can answer in an in-line thread. This commenting feature ties back to our dashboard view and should be displayed for open issues/ queries in a high level metric.
And finally, the user should be able to download and print these documents to their desktop.
We currently have a working version of this app already, but it needs improvement for the UI and an overall better UX (check app screenshot folder in attachment section).
Wireframe Expectations:
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens mentioned in required sections below, if any requirement is missing in final submission the client will not look at it, so make a checklist for the required screens to make sure you designed all of them.
- Please show us your proposal as a movie or series of wireframes that communicate the user's intended interaction with your proposed solution.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Screen Requirements:
01. Dashboard/Landing Page
After logging in to the app (login features is out of scope), user will be redirected to this page.
- User will be able to view a summary of app activity from this screen.
- Assume there are several iXBRL documents has been uploaded to the system and it shown as list in the dashboard that ready to get investigated.
- User can upload their iXBRL documents via this screen.
- User will be able to see several "entities" (companies) in this screen.
- Each entity will have some high level metrics associated with them (% turn over rate from previous year, profit and loss, etc. See full list of metrics provided)
- A business (client) can have multiple entities; there is a single iXBRL document per entity per year.
User should be able to see list of entities as follows:
-- List of entities (grouped by year end or multiple year ends per entity)
-- Ability to download iXBRLl document for each entity
-- Ability to download some static pdf files (they are part of the deliverables)
-- Ability to view the iXBRL document (see document detail viewer) for each entity
-- Ability to select multiple entities and dynamically change the high level stats accordingly
-- A link to view the status of queries asked by the client (more details below)
- In addition to the above, the user should be able to click a link to view an FAQs PDF.
High level metrics for the dashboard
- These will be graphs and/or tables. The developer should be able to produce the stat using the list of tags for entities. The types of statistics that needs to be displayed are:
1. Static data from the tag list
2. Calculated data using the information from tag list
- A link to the required statistics can be found here.
- The site should show comparisons of data across years (for a particular entity), across client (i.e. multiple entities for a given year) and across the Dinnaco population of files (e.g. turnover of £X is Y% above average/in the Zth centile). We are looking for your creative input and best UX/ UI solutions for how to present and show this.
02. View iXBRL Document Detail Page
This is essentially a document review UI.
This page should display the following:
- A UI element that is dynamic that follows a table of contents for a document and allows a user to quickly navigate sections of the doc
- A dynamic filter UI element that allows a user to select items in which to scan and review the document
- A color key UI element that allows a user to see versions of the document (similar to a google doc)
- The color key should also show items that have changed from previous year
- A way of displaying the XML table data that works in tandem with the filtering UI element
- A way for a customer to comment/ tag parts of the document that allow for collaboration with the account admin, so consider some sort of similar functionality display as a Google Doc
- When clicked on the view button the user should be able to:
-- View the iXBRL (HTML) document on screen
-- View the list of tags applied to the document
-- Filter the tag list
-- Download/print the tag list
-- Download/ print the document
-- Clearly view which information (fact) is tagged in the file (highlight the tagged information)
-- See a record from the tag list when clicked on a fact and vice-a-versa
-- Ask a query by way of clicking on the fact or a record in tag list
-- Ask queries for multiple entities and submit all in one form in the Query Status page.
-- View the highlighted information in colour coded fashion. There should be a colour per year tagged in the file and a split of instant and duration tags
-- Ability to compare list of tags with previous year for the entity (YOY analysis)
-- Ability to print/download the YOY analysis
- The developer should be able to link the tags in iXBRL file (which are in XML format) to the tag list (JSON).
- View Query Status, The user should be able to view the status of the queries they have asked. This should be linked from the landing page.
03. Query Status Page
- In an page accessed from the main navigation, the client should be able to see a full list of queries (comment and question threads) for ALL of their entities (companies). A client should be able to click into a single query and be taken to that comment thread within the specific document the query references. In addition...a client should be able to create an overall Query that spans multiple entities and or companies.
Target User
Dinnaco clients
Target Devices
We are looking for responsive solutions down to tablet. Make sure you are adjusting user flows, layouts, and using common mobile mechanics and practices once you get to tablet.
Desktop: 1280px wide, height can expand as needed
Tablet: 1536px wide, height can expand as needed
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Judging Criteria
- Overall User Experience
- Completeness and accuracy of the wireframe as defined in the challenge spec
- How well your wireframes provide a consistent user flow.
- How well your wireframe captures all the functionality.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client).
Submission and Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
All requested contest requirements as clickable HTML files generated by Axure. All the content must be listed and the pages are linked together to show page flow.
Source Files
- Wireframes should be built in Axure. The resulting source files used to generate the clickable HTML files.
- All the content must be listed and the pages are linked together to show page flow.
- All fully editable original source files of the submitted wireframe as required by the contest under "Source Files" in the sidebar should be included in your Source zip file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.