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
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

Suggested Green Code practices

Patterns and Energy Consumption

Best practices for React

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

Aalto University - Green Page Analyzer

Green development

SonarLint - Tool that forces efficient code on the page-level

SonarQube - Tool that benchmarks your code and tells you how to improve upon it

WebPack - Code and media minifaction tool