Challenge Summary
Welcome to "Dinnaco - iXBRL Document Viewer Responsive Apps Design Challenge". In this challenge, we are looking for your help to create the best look and feel for our iXBRL (Inline eXtensible Business Reporting Language) document viewer application. This app will allow our user to 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. We want you to focus on the UI/UX interactions and bring a clean, simple and modern (creative) design solution on how this application can work. What should the user see and experience when using the application!
Round 1
Desktop and Tablet Version
01. Dashboard/Landing Screen
02. View iXBRL Document Detail Screen
Round 2
Desktop and Tablet Version
01. Dashboard/Landing Screen
02. View iXBRL Document Detail Screen
03. Query Status Screen
04. FAQ Screen
Background Overview
XBRL is an open technology standard for financial reporting, based on XML. Many countries along with their respective financial regulators require 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. Further information can be found here.
Application Description
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 our clients to collaborate with Dinnaco consultants on each document by querying parts of the document and allowing Dinnaco consultants to provide responses to those queries.
Once selecting a specific 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 (with very few exceptions) 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 document’s table of contents. Please see the wireframes for more details about interaction and layout needed for this screen.
The document for client review will already be pre-prepared with a full list of tags that follow an XML document type structure. The client is able to click on these tags 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) as well as other metadata. The UI should clearly indicate the context references on the iXBRL document. Currently, this is achieved by color coding, any other innovative ways are welcome.
Screen Requirements:
01. Dashboard/Landing Screen
- After logging in to the app (login feature is out of scope), user will be redirected to this screen.
- This screen should show summary of app activity.
- User will be able to see active "entities" (companies) list in this screen.
- User can do filtering to manage entities that user want to show in the dashboard. Please remember, there might be 100+ entities managed by the user (as well as multiple years), so the filtering needs to be very simple and easy for user.
- Each company/entity will have single iXBRL document per year that has been uploaded to the system and it shown as list in the dashboard that ready to get investigated.
- Each entity will have some high level metrics associated with them (e.g. Revenues, profit and loss, etc)
User should be able to see list of entities content as follows:
-- List of entities (grouped by year end or multiple year ends per entity)
-- Ability to download iXBRL document from 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 screen) 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 FAQs (currently a PDF).
High level metrics for the dashboard
- User will be able to see these high level metric in graphs or tables.
- User should be able to produce the stat using the list of tags for entities.
- The types of statistics that needs to be displayed are:
-- Static data from the tag list (i.e. single tags)
-- Calculated data using the information from tag list (combination of multiple tags)
- A link to the example statistics required for the design can be found here.
- User should be able to compare 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). Note that the intention will be to add further statistics (based on any number of tags in the documents) in future so we are looking for your creative input and best UX/ UI solutions for how to present and show this.
02. View iXBRL Document Detail Screen
- 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 compare versions of the document (similar to a google doc History) and show the history of changes in version.
-- A way of displaying the tagging data that works in tandem with the filtering UI element
-- A way for a customer to query parts of the document (including tag metadata) 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 (right area of the screen)
---- View the list of tags applied to the document (left area, “Tags” tab)
---- Filter the tag list
---- Download/print the tag list
---- Download/ print the document (including the highlighted tags)
---- 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/query 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.
IMPORTANT
- The underlying ixbrl (html) files will have their own styling/formatting and this should not be changed - i.e. the iXBRL Document Viewer should display the files as a standard browser would. Only the highlighting/colour coding/querying elements should be added.
03. Query Status Screen
- User can navigate to this page via main navigation.
- User should be able to see a full list of queries (query and response) for ALL of their entities (companies) on the left side .
- On the right side area, use will be able to see details content after user click any 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.
04. FAQ Screen
- Show common information related to the apps via list of general questions and its answer.
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Design Considerations
- We’re providing you with a set of wireframes that outline the basic structure and flow for this application. We are looking for you to use these as a starting point and explore UI treatments, page hierarchy, and overall look and feel that improve upon this framework. DO NOT just color in the wireframes.
- The interface needs to be clean, modern, easy and intuitive to navigate.
- Ideally the focus should be a fluid user experience through all screens.
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- How quickly could you find information?
Create it as responsive design :
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
Branding Guidelines :
- Please follow the Dinnaco Branding guidelines: https://projects.invisionapp.com/boards/3N1FFO2T5K42Z/
Documentation :
- Wireframes.
- Existing apps Screenshot.
- Sample of iXBRL file (open it in browser like chrome or Firefox)
Target Audience
- Dinnaco clients
Judging Criteria
- The overall functionality of your concepts. We are looking for an app that easy-to-use
- Your ideas and concepts!
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
Submission & 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
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.