meta data for this page
This is an old revision of the document!
Evaluation
* Evaluation - How will we evaluate?
| Metric | Needs improvement | Good | Excellent | References |
|---|---|---|---|---|
| Understanding of the challenge | ||||
| Process | ||||
| Agility | +0 No agreements were made on how to work in a team | +1 Plans were noted down on what needed to be accomplished each day | +2 Plans were noted down on what needed to be accomplished each day; it was clearly communicated what work each team member took upon themselves | Trello/Jira |
| Tools used for design | +0 No prototyping technique used | +1 Documented prototyping process, paper prototypes (Paper or Balsamiq) with brainstorming sessions and discussions that lead to it | +2 Team developed a Figma prototype that showcases the basic flow of the application (+ good req) | Figma, Balsamiq, https://roadmap.sh/ux-design |
| Tools used for analysis | +0 No analysis tools were used | +3 Used one tool to measure energy and data efficiency | +4 Used multiple tools to measure energy and data efficiency and noted to averages of them | |
| Tools used for (green) coding | +0 Used no tools beyond VScode, Netlify, React | + 1 Used SonarLint or SonarQube (or equivalent) | +2 Used SonarLint or SonarQube and WebPack | SonarLint, SonarQube, WebPack |
| Tools used for teamwork | +0 No teamwork tools used | +1 Used Git(Hub) | +2 Used Git(Hub) and Trello/Jira | GitHub, Trello, Jira |
| Sustainable Design decisions | ||||
| Green UI Design | +0 Created a tool in light mode | +1 Created a tool in dark mode | +2 Created a tool that is in dark mode by default, but can be toggled to light mode | |
| Minimal features | -1 design contains unnecessary features and flashy animations that affect negatively users | +1 Minimalistic and understandable design (no flashy animations) | +2 The flow of the application is simple and understandable with no unnecessary steps and clicks (+ good req) | |
| Accessibility | -0 No consideration regarding accessibility | +1 Minimalistic design and applies color conventions | +2 Minimalistic design, prevents user errors, and applies color conventions | |
| User’s sustainability awareness | +0 No prompts for energy-efficient settings or greener choices for end users | +1 Some prompts for energy-efficient settings and greener choices | +2 Frequent and encouraging prompts for green options with some potential incentives for the end user | Checklist for user-centered awareness features- UX design |
| Green Code | ||||
| Caching | +0 No caching; redundant data fetching | +2 Basic caching implemented | +4 Advanced caching strategies with high cache hit rates | WebPack, React Caching |
| Content (Assets) Optimization | -1 Too large images, videos fetched fully | + 2 compressing of uploaded images, use of SVGs where possible, MP4 | +4 Lazy loading, conducted font optimization, different resolutions for different screen sizes, informed user choice for content quality | React Lazy |
| CDN Usage | +0 No implementation of CDN | +3 Basic use of CDN with some inefficiencies | +4 Highly efficient CDN with edge caching and minimal latency | Tool for measuring CDN efficiency |
| Clean Code | -1 a lot of unused methods and comments perceived in the team’s code | +2 SonarLint was utilized to maintain code’s cleanness | +3 SonarQube was utilized to maintain codebase and results are well documented and elaborated on | SonarLint, SonarQube |
| Data fetching | -4 fetching data that is not being utilized | +1 use of JSON, fetching only the truly necessary data | +3 fetching images separated from fetching of other information, fetching when requested | Lighthouse, Browser console (inspect element) |
| HTTP Requests | -2 unnecessary and uncontrolled number of HTTP requests is happening (bug or intentionally implemented this way) | +2 Uncontrolled HTTP requests are not happening and requests are optimized to certain extent | +4 optimized way of requesting information and communicating through APIs | Lighthouse, Browser console (inspect element) |
| Presented environmental sustainability knowledge | ||||
| Energy efficiency tracking | +0: You did not track the energy efficiency of your system | +1: You measured the energy efficiency of your system once and presented it | +3: You measured the energy efficiency of your system regularly and presented the progression over time | See Tools below |
| Data efficiency tracking | +0: You did not track the data efficiency of your system | +1: You measured the data efficiency of your system once and presented it | +3: You measured the data efficiency of your system regularly and presented it | See Tools below |
| Identification of inefficiencies | +0: You did not identify the causes of inefficiencies in your system | +2: You identified and presented 2 causes of inefficiencies in your system and presented the solution to at least 1 | +4: You identified and presented 3 causes of inefficiencies in your system and presented the solution to each of them | See Tools below |
How do I meet the criteria?
Recommended practices
Tools
Testing web performance
- EcoGrader - Gives extremely comprehensive analysis of your website
- Digital Beacon - compares first and return visit to the websit
- Globemallow - a browser add-on that generates a report on the environmental sustainability of the website and gives advice on how to optimize it
- Website Carbon - estimates the carbon emissions attributed to a website.
- Lighthouse - dev tools tab that offers most of above mentioned analyses
- Green Frame - open-source solution that allows developers to decarbonize their websites by detecting carbon leaks
Green development