meta data for this page
Evaluation
| Metric | Needs improvement | Good | Excellent | References |
|---|---|---|---|---|
| Understanding of the challenge | ||||
| Process | ||||
| Agility | No agreements were made on how to work in a team | Plans were noted down on what needed to be accomplished each day | 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 | No prototyping technique used | Documented prototyping process, paper prototypes (Paper or Balsamiq) with brainstorming sessions and discussions that lead to it | 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 | No analysis tools were used | Used one tool to measure energy and data efficiency | Used multiple tools to measure energy and data efficiency and noted to averages of them | |
| Tools used for (green) coding | Used no tools beyond VScode, Netlify, React | Used SonarLint or SonarQube (or equivalent) | Used SonarLint or SonarQube and WebPack | SonarLint, SonarQube, WebPack |
| Tools used for teamwork | No teamwork tools used | Used Git(Hub) | Used Git(Hub) and Trello/Jira | GitHub, Trello, Jira |
| Sustainable Design decisions | ||||
| Green UI Design | Created a tool in light mode | Created a tool in dark mode | Created a tool that is in dark mode by default, but can be toggled to light mode | |
| Minimal features | design contains unnecessary features and flashy animations that affect negatively users | Minimalistic and understandable design (no flashy animations) | The flow of the application is simple and understandable with no unnecessary steps and clicks (+ good req) | |
| Accessibility | No consideration regarding accessibility | Minimalistic design and applies color conventions | Minimalistic design, prevents user errors, and applies color conventions | |
| User’s sustainability awareness | No prompts for energy-efficient settings or greener choices for end users | Some prompts for energy-efficient settings and greener choices | 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 | No caching; redundant data fetching | Basic caching implemented | Advanced caching strategies with high cache hit rates | WebPack, React Caching |
| Content (Assets) Optimization | Too large images, videos fetched fully | compressing of uploaded images, use of SVGs where possible, MP4 | Lazy loading, conducted font optimization, different resolutions for different screen sizes, informed user choice for content quality | React Lazy |
| CDN Usage | No implementation of CDN | Basic use of CDN with some inefficiencies | Highly efficient CDN with edge caching and minimal latency | Tool for measuring CDN efficiency |
| Clean Code | a lot of unused methods and comments perceived in the team’s code | SonarLint was utilized to maintain code’s cleanness | SonarQube was utilized to maintain codebase and results are well documented and elaborated on | SonarLint, SonarQube |
| Data fetching | fetching data that is not being utilized | use of JSON, fetching only the truly necessary data | fetching images separated from fetching of other information, fetching when requested | Lighthouse, Browser console (inspect element) |
| HTTP Requests | unnecessary and uncontrolled number of HTTP requests is happening (bug or intentionally implemented this way) | Uncontrolled HTTP requests are not happening and requests are optimized to certain extent | optimized way of requesting information and communicating through APIs | Lighthouse, Browser console (inspect element) |
| Presented environmental sustainability knowledge | ||||
| Energy efficiency tracking | : You did not track the energy efficiency of your system | : You measured the energy efficiency of your system once and presented it | : You measured the energy efficiency of your system regularly and presented the progression over time | See Tools below |
| Data efficiency tracking | : You did not track the data efficiency of your system | : You measured the data efficiency of your system once and presented it | : You measured the data efficiency of your system regularly and presented it | See Tools below |
| Identification of inefficiencies | : You did not identify the causes of inefficiencies in your system | : You identified and presented 2 causes of inefficiencies in your system and presented the solution to at least 1 | : 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
- SonarLint - Tool that forces efficient code on the webpage-level
- SonarQube - Tool that benchmarks your code and tells you how to improve upon it
- WebPack - Code and media minifaction tool
TEMP: Green Code categories