Count me in!

Hosted on Vercel.

Database hosted on Firebase, using realtime database solution.

Low Fidelity mockups

Made with Figma

Wireframe view of interface:

Main_page_wireframe

Wireframe view of mobile interface:

Main_page_wireframe_mobile

High Fidelity mockups and design materials:

Selected color palette:

Node: addional shades of some colors were used for contrast.

Palette

Desktop mockup:

Main_page

Mobile mockup:

Main_page_mobile

Final product:

Some slight differences from design documents can be seen, however good amount of consistency between what was planned and what was done.

Desktop screenshot, as deployed:

Changes from design version: some slight adjustments to fonts etc., different system for deletion of entries.

Final

Mobile screenshot, as deployed:

Changes from design version: smaller entries, can display bigger number on screen. Different deletion system.

Final_mobile

Used tools:

Fonts paired using AI-driven tool.

Color palette roughtly selected using AI-driven tool. Additional refinement by hand.

Metrics:

Google PageSpeed results:

PageSpeed

Desktop results are good. Performance results are adequate (given realiance on realtime database updates for rendering) even on simulated throttled connection. No data is stored locally, so first load will be expected to be slower, but the desktop version of the site handles it rather well.

PageSpeed_mobile

Mobile results are considerably worse. The first load takes much longer, due to the aforementioned Firebase database. This could perhaps be improved by choosing some other hosting solution (the free tier of hosting is limited in some ways) or exploring some other design choices that don't involve relying too much on a remote database not under our control. Additionally, the layout shift is rather high, likely due to the detection and switching to mobile mode.

Overall accessability could be improved on both versions, but for such a specialised niche tool, this results can be considered adequate.

Details from the design:

Higlights on button mouseover:

highlights

Tooltips on mouseover of some elements:

tooltips

Contextual clues when delete mode is enabled:

delete

Simple, tooltip based editing dialogues:

delete

Automatic sorting of entries by initiative count:

sorting