01.01
Funded by the EU
The project was funded by the European Union, and the total budget for the project was 41,000,000€.
About client
CARNET was established in 1991 as a project of the Ministry of Science and Technology in Croatia. It is the national research and education network of Croatia, and it's funded from the government budget. CARNET operates from offices in Zagreb and five other cities.
CARNET's activities can be divided into three primary areas: Internet service provision, encouragement of information society development, and education for the new era.
About project
Project is a part of the "E-Škole" initiative aimed at establishing a digital network of elementary schools and high schools throughout the Republic of Croatia.
We worked on designing and developing digital education content for Chemistry and Biology. Project involved cooperation with dozens of experts from various fields of work.
1991
The year CARNET was established
140+
Employees
1650
Educational institutions connected through CARNET
70+
Service offers
01.Project
goals
Big and impactful projects, like this one, come with a lot of challenges and ambitious goals.
EU FUNDS
01.02
Digital revolution
Connecting educational institutions in Croatia through the digital medium was the primary goal of the project. The pilot project involved middle schools and high schools.
01.03
All shapes and sizes
Digital education content needed to be completely responsive and scalable. The desktop resolution, tablet resolution, mobile resolution, online or offline, we needed to cover everything.
01.04
Learning from interactions
Digital medium opened up new learning possibilities. First ones being video materials and interactions that should further increase student interest in the subject.
02.Content
navigation
Content navigation needed to be intuitive and straightforward for every student.
02.01
Three levels of depth
Navigation through the content should be simple and easy to understand. It generally follows the traditional textbook structure transferred to a digital medium.
Content Architecture
Level 1
Level 2
Level 3
02.02
Chapter navigation
Navigation through the content should be simple and easy to understand. It generally follows the traditional textbook structure transferred to a digital medium.
03.Chapter
elements
Transformation of a textbook experience into a digital platform allows for numerous innovative opportunities.
03.01
Chapter content
Rich chapter content consists of items such as images, videos, low and high-level interactions, quizzes, questionnaires, etc. All aimed at enhancing the learning experience.
CONTENT ARCHITECTURE
Interaction example
03.02
Pedagogy content approach
Chapter content was designed with the student experience in mind. Text is always broken up with different elements such as images, videos, or interactions to avoid potentially dull walls of text.
Broken up text
03.03
Other elements
Other links in the header consist of a glossary, chapter index and, in case of chemistry, periodic table of elements.
Header links
04.Design decisions
The design needed to follow accessibility rules and practices, but it also needed to be modern and welcoming.
04.01
Typeface choice
Chosen font had to tick a lot of boxes. Readability is a major one, the font had to cover various resolutions and devices. Additionally, it had to cover extended Latin letters as well as Greek letters because of mathematical equations. Ultimately, we chose Roboto.
04.02
Spacious design
Wide margins around the content create a visual hierarchy that directs the eye towards the center. This is important to capture and keep the focus of the students on learning material.
04.03
Strong contrasty colors
Bright colors were used throughout the project. Cyan color was used as a primary color for the chemistry, and bright green was used as a primary color for the biology. They needed to capture attention on both light and dark backgrounds.
05.Development decisions
Specific content requirements of the project informed the selection of suitable tools for development.
05.01
Languages and frameworks
Vue.js was used to create all of the interactions on the project since it offers a lot of functionality in a simple package. Mathjax and Mathlab javascript plugins were used for mathematical equations.
05.02
Distribution process
We created a build process which prepared educational content for every platform. The exported content is uploaded on the repository, thus being readily available to the end users.
Update
06.Accessibility
features
Accessibility was the absolute imperative of the project, and we delivered.
06.01
Letter size, dyslexia-friendly font, contrast, and more
There are many accessibility features woven in the app. Content is made with screen readers and other assistive technologies in mind. Every video comes with built-in subtitles (closed captioning). Going further, we provided an option for font size, enhanced contrast, and night theme.
Additionally, there is an option for enabling dyslexia-friendly font, that should help students with reading difficulties.
Dyslexia font example
Dyslexia
font
example
font
example
07.Authoring tool
Content creation and editing needed to be natural and straightforward. Our authoring tool delivered that experience.
07.01
Create content easily
Authoring tool was made to make content creation simple, easy, and fluid. Custom elements were created in heavily customized CMS to make this happen.
08.Results
Clicks don't lie. We aim for metrics that can confirm our work and guide future efforts.
25000
Students are using digital education content
7000
Teachers involved
151
Schools are in the pilot project
Services used
Web development
- Frontend development
- Backend development
- Accessability
- User research and testing
Website strategy
- Client workshop
- Research
- Platform architecture
UX and UI Design
- Information architecture
- User experience
- Prototyping
- UI design
Quality assurance
- Performance testing
- Functionality testing
Interested in working on a project with us?
Next project
Website
Website
Twiplomacy is a website that follows world leaders on social media. Would you like to know who the 5th most influential world leader on Twitter is? Twiplomacy has your answer.
- STRATEGY
- USABILITY RESEARCH
- UX AND UI DESIGN
- WEB DEVELOPMENT