01.

School Atlas: Costa Rica

UX|UI design

Type of project: usability study

Role: UX Researcher | UX|UI designer

A B O U T   T H E   P R O J E C T

More than a learning tool

School Atlas is a usability study that led to the creation of a digital tool designed to teach school children about the geography of Costa Rica. This project was developed with the support and collaboration of the Ministry of Public Education (MEP) of Costa Rica, the entity responsible for public education.

More than just a digital tool, School Atlas serves as a valuable resource to enhance and facilitate the teaching and learning process in schools across the country. It has been meticulously designed to meet functional, aesthetic, and technical requirements, ensuring optimal navigation and interaction for its users. The content adheres closely to MEP’s guidelines, and the design is tailored to the needs of its primary users: children and their teachers, who will use it for learning.

D E S I G N   P R O C E S S

Stages

F I R S T   S T A G E

Discover

  • p r o b l e m

In today’s fast-paced world, technology has become an indispensable part of our daily lives, and the realm of education is no exception. It’s unacceptable that there is a lack of digital tools to facilitate collaboration in the teaching-learning process within schools. Furthermore, the absence of engaging and user-friendly digital resources on essential subjects, such as geography, for school education is a concerning gap that needs to be addressed.

  • s o l u t i o n

The goal is to create a mockup of a digital tool that enhances the teaching-learning process in schools. This tool will be developed through a comprehensive usability study, ensuring it meets the functional, aesthetic, and technical requirements necessary for seamless navigation and interaction with users. The objective is to provide an effective and user-friendly digital solution that significantly improves the educational experience within school environments.

  • c o m p e t i t i o n   a n a l y s i s

A referential analysis was carried out with helped to obtain references of what’s in the market. Important aspects like navigation, organisation, elements, hierarchy, among others were analysed. Some highlights and problems found were:

  •  Excessive noise due to the big number of graphic elements.
  • Use of bright colours.
  •  Not clear hierarchy between visual elements.
  •  Overwhelming visuals.
  • Clear and simple navigation.
  • Problems presenting information: too much or too little information.
  •  Inconsistency with graphic elements.
  • Problems identifying buttons.
  • Very shallow content.
  • Good readability.
  • u s e r   r e s e a r c h

Due to the nature of the project, two groups of users could be defined from the beginning. The first of them was composed by teachers who used the tool as a support to teach their lessons. And as a second group formed by the students, who will use the tool as a support to learn the subject. Although many of their needs are aligned, each group also has its particularities that must be considered when creating the tool.

For the project, a sample of ten users was taken. Five teachers, from five different public schools, and heads of the Social Studies department of their respective schools. This specific department is in charge of teaching the geography of Costa Rica. On the other hand, we have five students from first to fifth grade who belong to three different public schools in the metropolitan area.

S E C O N D   S T A G E

Define

  • p e r s o n a s
  • e m p a t h y   m a p
  • i n v e n t o r y

The inventory was developed following the agenda of I and II cycle of the MEP (Costa Rican Ministry of Education). With the help of the guide teachers, a subject filter was carried out in order to define the essential aspects and information to be included on each topic.

T H I R D   S T A G E

Ideate

  • t r a f f i c
The traffic was defined with the guidance of the teachers, establishing it based on the number of hours and lessons dedicated to each topic. Thus, determine the contents that consume the most time.
  • c a r d   s o r t i n g
Through card sorting, the mental models of the user were shown, validating the structure and nomenclature of the contents.The test was carried out on the users’ groups: students and teachers. Both had to organize the cards in the order that seemed best to them, and were able to correct the nomenclature if necessary.
  • i n f o r m a t i o n   a r c h i t e c t u r e

Several drafts of organizational structures for the contents were made, such as by topic or by grade. These drafts and the results obtained in the card sorting test resulted in the creation of an “alpha” architecture that takes into account the needs of both groups of users.

F O U R T H   S T A G E

Design

  • l o f i   w i r e f r a m e s
  • Paper Prototyping

The wireframes were verified through the Paper Prototyping test. This basically allows a simulation of the interface and to observe the interaction of the users before it is designed and developed. A sample of 10 users was selected, 5 teachers and 5 students. They were given the paper wireframes and a list of tasks to complete, simulating the navigation in the tool.

  • c o l o r   s c h e m e

A color scheme composed of complementary colors with dispersions in analogues is used, to which variants in hue, saturation and luminosity are added in order to have greater chromatic variety and seek a more striking appearance. Each theme has assigned a main color to represent it. 

In addition, a scale of neutrals is used as a chromatic accent.

  • t y p o g r a p h y
  • f i n a l   s c r e e n s
  • m o c k u p
The mockup was created in Figma. Due to the great extension of the contents, the mockup represents the main functionalities in one of the themes. This allows it to exemplify its functionality and be tested by users through a series of defined tasks.

F I F T H   S T A G E

Recollect

  • u s e r   t e s t

For the validation, a sample of 10 users, 5 teachers and 5 students, was used. It consisted of carrying out several tasks through the functional model. The actions and reactions of the users were observed. To finish, a short interview was conducted in order to reiterate what was observed and to collect their opinions and observations.

  • a n a l y s i s   &   r e s u l t s
  • The methodology and design process used were adequate, giving positive results and generating a good acceptance of the tool by the users.
  • The tool satisfies efficiently the needs and requirements of the users.
  • The visual aesthetics used contributed to the generation of an efficient and satisfactory usability.
  • The information architecture managed to standardize navigation, facilitating interaction.
  • The development of an inventory was essential to ensure that the information was correct and updated.
  • The tool collaborates in the teaching-learning process, allowing users to study its content in an innovative way and promoting educational and technological development.
  • The “School Atlas of Costa Rica” project is very ambitious, due to the extensive list of contents. However, a complete scheme for its implementation is left out.

© Andrea Zamora 2021