Challenge Summary
Welcome to “Odyssey MVP Application UI Design Challenge”. In this challenge we are looking for you to create the initial design concepts of a new MVP for a smart contract quality/security workbench web app.
Let us know if you have any questions in forum!
2) Onboard a Github project
3) Run a security tool analysis
4) Issues Overview
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1) Login
2) Onboard a Github project
3) Run a security tool analysis
4) Issues Overview
5) Issue Detail
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03
In this challenge, you create a MVP for a smart contract quality/security workbench web app. The web app integrates with Github and allows auditors or developers to automatically run various tools, such as linters and security analyzers, on a smart contract project. In the first iteration, it should be possible to connect to a Github account, onboard projects from that account, and run a security analysis using Mythril. Issues discovered can be triaged into true positives and false positives.
feedback was not captured correctly on a paper or is lost.
Things to think about
- This challenge is focused as a desktop web application, however think mobile first when designing your concepts. Simplicity should be your focus.
- This web application must feel clean, professional, modern and easy to use.
- A user needs to be able to easily find any information.
Required Screens
1) Login Page
- In order to use this application users must be able to login to access all features.
- Provide the design for both cases:
- Please refer to this link for content reference: take.ms/02YJn
2) Onboard a Github project
- As a user I would like to register one or more github repositories so Odyssey has access to the code of the smart contract project and can use it for analysis.
- If a user has no project on boarded yet, show the public repos that are available in the user's Github profile and let him select a project to proceed.
- Please refer to this link for content reference: take.ms/73M5r
- After the user has selected a project and confirmed the selection a wizard is shown that shows that the scan is in progress. (see 3. run a security tool analysis)
- After login or registration the user will automatically be redirected into the project onboarding menu if there is no onboarded projects.
3) Run a security tool analysis
- As a user I would like to run an automated security scan for onboarded Github projects so that the issues it finds are stored and shown in the user interface.
Content reference: The page says “The analysis is in progress. This could take a couple of minutes.” when the analysis is started manually. It be great to have some animation for this as well. We need you to propose the best UX to achieve this.
4) Issues Overview
- As a user I would like to have access to a project overview so I can see information about number, severity and type of issues found.
- Show a basic table for each project with the title of the finding, filename, line number, affected code (use Solidity syntax highlighting) and an option to show the details of the issue.
Dummy Data to be used for visualisation:
Project Integer Overflow code: interger_overflow_1.sol and scan results integer_overflow_1_mythril_scan_results
Project Reentrancy code: reentrancy.sol and scan results reentrancy_scan_results
5) Issue Detail
- As a user I would like to see the details of an issue and choose to process it further.
- User story:
Dummy Data to be used for visualisation:
Project Integer Overflow code: interger_overflow_1.sol and scan results integer_overflow_1_mythril_scan_results
Project Reentrancy code: reentrancy.sol and scan results reentrancy_scan_results
Screen Sizes:
- This will be a desktop application. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
- Think mobile first when designing.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding
- You can find full HD logo on this drive folder:
https://drive.google.com/open?id=11VgN2SDyQCSuZzhl3XRDec9C5pkWdRXy
Target Audience:
- Auditors
- Developers
- Security Analyzers
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI 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 Desktop PNG/JPG Screens.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop so PSD source files, or Sketch, AI files, and Adobe XD.
Final Fixes
As part of the final fixes phase, you may 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.
Let us know if you have any questions in forum!
Round 1
Submit your initial designs on these key screens for a checkpoint feedback:2) Onboard a Github project
3) Run a security tool analysis
4) Issues Overview
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your Final designs:1) Login
2) Onboard a Github project
3) Run a security tool analysis
4) Issues Overview
5) Issue Detail
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03
In this challenge, you create a MVP for a smart contract quality/security workbench web app. The web app integrates with Github and allows auditors or developers to automatically run various tools, such as linters and security analyzers, on a smart contract project. In the first iteration, it should be possible to connect to a Github account, onboard projects from that account, and run a security analysis using Mythril. Issues discovered can be triaged into true positives and false positives.
feedback was not captured correctly on a paper or is lost.
Things to think about
- This challenge is focused as a desktop web application, however think mobile first when designing your concepts. Simplicity should be your focus.
- This web application must feel clean, professional, modern and easy to use.
- A user needs to be able to easily find any information.
Required Screens
1) Login Page
- In order to use this application users must be able to login to access all features.
- Provide the design for both cases:
- Password
- Remember Me / Forgot Password features
- Please refer to this link for content reference: take.ms/02YJn
2) Onboard a Github project
- As a user I would like to register one or more github repositories so Odyssey has access to the code of the smart contract project and can use it for analysis.
- If a user has no project on boarded yet, show the public repos that are available in the user's Github profile and let him select a project to proceed.
- Please refer to this link for content reference: take.ms/73M5r
- After the user has selected a project and confirmed the selection a wizard is shown that shows that the scan is in progress. (see 3. run a security tool analysis)
- After login or registration the user will automatically be redirected into the project onboarding menu if there is no onboarded projects.
- Show available projects in the Project Overview.
- Show a status that project has been synced successfully or failed
- Show repo name
- Show repo visibility (private/public)
- Show when the last commit happened
- Show the number of issues
3) Run a security tool analysis
- As a user I would like to run an automated security scan for onboarded Github projects so that the issues it finds are stored and shown in the user interface.
Content reference: The page says “The analysis is in progress. This could take a couple of minutes.” when the analysis is started manually. It be great to have some animation for this as well. We need you to propose the best UX to achieve this.
4) Issues Overview
- As a user I would like to have access to a project overview so I can see information about number, severity and type of issues found.
- Show a basic table for each project with the title of the finding, filename, line number, affected code (use Solidity syntax highlighting) and an option to show the details of the issue.
Dummy Data to be used for visualisation:
Project Integer Overflow code: interger_overflow_1.sol and scan results integer_overflow_1_mythril_scan_results
Project Reentrancy code: reentrancy.sol and scan results reentrancy_scan_results
5) Issue Detail
- As a user I would like to see the details of an issue and choose to process it further.
- User story:
- I am able to see a few lines before and after the issue
- The issue is highlighted in the code
- Solidity syntax highlighting
- I also see all the details of the issue listed below
- As a user I would like mute issues that are false positives, so that they don't show up again in the future scans.
Dummy Data to be used for visualisation:
Project Integer Overflow code: interger_overflow_1.sol and scan results integer_overflow_1_mythril_scan_results
Project Reentrancy code: reentrancy.sol and scan results reentrancy_scan_results
Screen Sizes:
- This will be a desktop application. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
- Think mobile first when designing.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding
- You can find full HD logo on this drive folder:
https://drive.google.com/open?id=11VgN2SDyQCSuZzhl3XRDec9C5pkWdRXy
Target Audience:
- Auditors
- Developers
- Security Analyzers
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI 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 Desktop PNG/JPG Screens.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop so PSD source files, or Sketch, AI files, and Adobe XD.
Final Fixes
As part of the final fixes phase, you may 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.