Challenge Summary
Welcome to the "TELUS - Data Validation and Feedback WebApp Design Challenge". The goal is to create a simple and easy to use data validation web app by downvote, upvote and add their comments or observations.
Round 1
Submit your initial designs for checkpoint feedback01) Login/Authentication Account
02) Dashboard Screen
03) Data Validation Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final designs with all checkpoint feedback implemented01) Login/Authentication Account
02) Dashboard Screen
03) Data Validation Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2
CHALLENGE OBJECTIVES
- Simple web app for desktop.
- 3 unique screens
- Design the best solution and journey to simplify the data validation process.
BACKGROUND OVERVIEW
- TELUS is a national telecommunications company in Canada that provides a wide range of telecommunications products and services including internet access, voice, entertainment, healthcare, video, and IPTV television.
- The source will be data files: CSV, TSV, XLS, or XLSX
- The data can contain more than 10.000 rows of information. In order to serve larger datasets while maintaining responsiveness, the solution should split data into chunks and display an efficient number of rows at a time to ensure responsive interaction within the tool.
- The validation process is to verify the validity of the data and only involves downvoting, upvoting, and adding comments or observations per row.
- Multiple users work at the same time on the same data source.
TARGET AUDIENCE
- Non technical, TELUS employee who need an easy to use webapp to manually validate the data.
PERSONA
- Name: Kyle Reeves
- Occupation: Data Validator
- Goals: Completing his task to validate 100 rows or more of data.
- Frustrations: Validating huge amounts of data is a daunting job and prone to error.
- Wants:
- A simple way to complete the validation task faster and minimize errors.
- To keep track of the validation progress each day.
- To distribute data validation tasks among his peers in the same business unit.
USER STORY
- Kyle Reeves works as data validator at TELUS. He opens the web app and enters his TELUS email address to self-identify his credential.
- After authenticating his TELUS email id, he lands at the dashboard where he can see a list of data in various formats: CSV, TSV, XLS, and XLSX. Each file will show the progress or status of whether the data is ready to review. But at any given time, he only can modify one file.
- The data is prepared by backend, so no need to search the data. He clicks on one of the list items (eg. TopCoder_VendorNormalization_Sample.csv) to start validating.
- After clicking the data, he navigates to the Data Validation screen, where a table with more than 10.000 rows of data is divided into chunks across multiple pages. The table displays information details needing validation. Each row also displays the numbers of downvotes, upvotes and comments from other users.
- He can validate the data by selecting upvote if the data is correct or downvote if it is wrong. He is also able to enter comments in any rows.
- When downvoting, he is required to comment on why this data is not correct, and how it should be corrected.
- He keeps doing this validation process until he completes his work. Once all rows are validated, the system will show him a popup notification and he can continue to another data set.
DESIGN CONSIDERATION
- Modern, simple and clean look & feel.
- No need to include Search functionality. The list of data is provided by the backend..
- Multiple users will access and work on the same file.
- Overall design needs to follow TELUS branding guidelines available at: https://www.telus.com/en/brand-resources
- Provide both mouse and keyboard interaction.
- Seamless and easy to use navigation.
- Reduce the number of interactions required from users as much as possible
- Use color or visual cues to help users through the workflow.
- Visually simplify pages that may be over overcrowded with information.
CHALLENGE FORUM
If you have any questions regarding challenge requirements, please ask in the forum challenge.
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
-
Creativity: 8
- 1: barely new ideas
- 10: a utopic product with features not proven to be able to be fully implemented
-
Aesthetics: 8
- 1: low-fidelity design, wireframe or plain sketch
- 10: top-notch finished looking visual design
-
Exploration: 10
- 1: strictly follow an existing reference or production guideline
- 10: open to alternative workflows/features not listed here that would help the overall application
-
Branding: 10
- 1: don’t care at all about the branding just functionality
- 10: without a properly branded product there is no success
SCREEN REQUIREMENTS
01) Login/Authentication Account
- User will enter their work email. This authentication will work as SSO that is linked to their TELUS email id.
- This should be a very straightforward authentication screen. Focus on dashboard and validation process for creative design.
02) Dashboard Screen
- This will be a simple dashboard screen.
- There is no need for a search feature.
- User should see a list of files in various formats (CSV, TSV, XLS, XLSX) that are ready for validation.
- Show status or progress of each file.
- Users are not allowed to download the files.
- Users will be able to switch between English and French. A simple toggle on navigation will help.
03) Data Validation Screen
- After clicking a data item from the dashboard, the user will navigate to the Data Validation screen. Think how to simplify the validation process. Will a table be the best solution? Is there a better way to help a user get his/her job done?
- Use sample data provided by clients for reference.
- Users should see a table or portion of a table. The data is made up of more than 10.000 rows of data rendered from the file.
- Multiple users will be accessing the same files. This should be indicated on screen.
- To keep the display manageable, the data could be divided into chunks and displayed in an efficient number of rows at a time. We are open to ideas! Think creatively on how to solve this display challenge.
- Number of rows displayed can be either an option set from the GUI or a parameter to be hardcoded by admin.
- Each row of the table contains:
- Details of information needing validation
- Number of downvotes
- Number of upvotes
- Comments from other users
- Include sort and filter options per column.
- The number of columns will vary per data file. Some data will have only 2 columns (i.e. 1-old data, 2-clean new data) and some may have more. Your solution should be flexible to show any number of columns to the user (similar to Excel).
- User is NOT allowed to download, modify, edit or export the data.
- Users will validate the data by pressing upvote if the data is correct or downvote if they think the data is wrong.
- User is able to enter comments in respective rows.
- Important: comments are mandatory if data is downvoted. User must provide reason for downvoting.
- All the comments and votes will be saved automatically.
DOCUMENTATION
- TopCoder_VendorNormalization_Sample.csv. You can use this dataset sample on your design.
- Client branding. Color guide and font that client use.
BRANDING GUIDELINES
- You can find the look and feel from the client site: https://www.telus.com/en/brand-resources
- TELUS uses a custom font. You may use Helvetica and have it replaced if you win this challenge.
TARGET DEVICES
Desktop WebApp: 1440px width with height adjusting accordingly
MARVEL PROTOTYPE
- We need you to upload your screens to Marvel App
- Please request for marvel app in the challenge forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
SUBMISSION AND SOURCE FILES
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
- Declaration files document contains the following information:
Source Files
All source files of all graphics created in either Sketch, Adobe XD, Figma, or Photoshop and saved as an editable layer
FINAL FIXES
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors
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.