Challenge Overview
Welcome to "Dinnaco - Request List Tool Prototype Challenge". This app will be used by employees and clients to manage all documentation lists within their project. The main purpose of this app is to create a tool that can provide the best method to manage all documentation for a project with our clients using sharepoint enterprise app (This tool will be run in Sharepoint).
We have a design (provided in forums) and in this challenge we need to build a UI prototype that can be further developed for Sharepoint.
At the end of this challenge, we hope to have a solid UI prototype result following all UI/UX best practices.
All data must be read from JSON files and stubbed in a manner so it can be easily replaced with appropriate backend calls in future
Provide a flag or different dummy credentials to test out the ‘User’ and ‘Client’ flows
Dashboard Screen
The primary homepage view will display a dashboard to show an overview of the Dinnaco user's current request lists that allow the Dinnaco user to identify overdue items as well as the status of items in the workflow (see details later in client dashboard ‘status’ below regarding workflow stages)
Dashboard_Client shows the client view
Dashboard_User_Archive shows the user view - archived lists only
Dashboard_User shows the user view - all lists
A ‘user’ can click the ‘Add New’ button to go to ‘New List’ screen
Clicking FAQ navigates to the ‘FAQ’ screen
Clicking on a list navigates to the ‘List Detail’ screen
Clicking the magnifying glass triggers the ‘Search’ flow
Clicking SETTINGS navigates to the ‘SETTINGS’ screen
2. FAQ
Should be self explanatory
Static content, do NOT use a JSON to build this
3. SETTINGS
Store the parameters in a configuration file
-- Notification trigger – a range of options (e.g. summary, overdue, changes etc.)
-- Notification frequency
-- Notification content (i.e. which column information to include for items)
-- Notification custom text (i.e. custom introductions / messages)
- Once a request list is made 'Live' automated email reminders should be sent to the relevant “Client Contact” (ignore this part for prototype)
4. NEW LIST
–--- Pre-populated details: Client name; Project name; Request list name
–--- A default 'Due date' for each category so it does not have to be manually entered against each individual line
–--- A default 'Client contact' and 'Dinnaco contact' for each category which will auto-populate all of these fields
–--- Tailoring of the lines items to be included from the template (tick-box to keep / discard – suggest that all removed items turn grey and will not appear in the ‘final’ list when created but will be available to add back at a later stage if required).
–--- Ability to add in a new custom row with drop down options for column content where necessary (e.g. categories)
–--- Ability to add in a custom column with drop down options for column type (e.g. date, free text, numeric, user etc)
–--- A 'make live / take offline' toggle button which will make the list appear for all Client users only when live, and be included in the dashboards of the Dinnaco users, thus initiating the workflow
5. SEARCH & SEARCH RESULTS
Refer Search_Step_1 to Search_Step_6 for the search/ search results flow
This works like a filter operation as shown in Step 6
It is currently possible to chose only one search param at any point of time.
6. LIST DETAILS
List_Detail_Client - client view
List_Detail_User_Collapsed - user view collapsed
List_Detail_User_Expanded - user view expanded
7. DASHBOARD/ UPLOAD
Refer to Upload.png
- Each line of the list should have an upload function that allows Client users to:
-- Upload a files against line items quickly, including a fast and intuitive way to upload many files against their respective line items without having to repeat similar steps for each line (e.g. a drag and drop functionality perhaps)
-- Add comments to a line item (i.e. a message from the Client user to the Dinnaco user responsible for checking that item)
Client Priorities (The items that are considered highest prototype priorities)
- Great HTML/CSS conversion of the design - make sure you keep this consideration in mind that this prototype needs to be plugged into ASPX pages in future
- Quality and efficient HTML/CSS3 code that works in all the requested browsers.
- No W3C Validation Errors
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Code Documentation
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.,.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and do not build different pages for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when creating styles
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Chrome, Firefox and Safari on iPad (Landscape & Portrait View)
- Android Browser (tablets only)Final Submission Guidelines
Submit your prototype code in a zip format
Please provide any instructions to run along with notes on how to test client and user flows