The user portrait was well-known to us: our target users were children in grades 1−4, aged approximately 6 to 11 years old. They may have shorter attention spans, may become disengaged with tasks that they find boring, and have reduced motor skills and user experience compared to adults.

As usual, to begin the development process, we received a description from a methodist. This time it included a hand-drawn map of constellations with some stars named. The goal for the students was to restore the map by identifying constellations based on images provided.

At the educational platform where I worked, we used a standard task card with dimensions of 1024×510 pixels. This size was chosen to facilitate the production of numerous tasks within a limited time frame, which meant that the desktop and tablet versions were identical. During the development process, we had to take this into account.

The first step was to choose a mechanic for the task. While allowing children to draw lines as if using a pencil would have been ideal, it was too complex for young children using a desktop. Clicking the mouse button and then moving the mouse without releasing the button is not an intuitive task for individuals with limited motor skills. Therefore, I simplified the mechanic to just a single-click selection.

However, the initial map was too large to fit onto the card. When I attempted to display the entire map, I found that the clickable area for some stars was only 18−20 pixels. The recommended minimum clickable area for children is 40 pixels, which is nearly twice as large. Thus, I had to implement a scrolling mechanism.

Typically, illustrations are created after the prototyping phase. However, in this instance, we knew we would need images around 1000×1000 pixels in size. Therefore, I requested the illustrations early on in the process so that I could work with nearly finalized images moving forward.

When considering how to implement a scroll for the map, the initial idea was to let students drag the map, as is a common pattern for adults who are familiar with Google Maps. However, since this was a design for children, there was concern about the usability of this pattern.

So, a user testing was conducted, and the results confirmed that children were not fluent with this pattern. Therefore, a decision was made to add a simpler mechanic of scroll buttons with arrow symbols, which are familiar and easy to understand for children.

Since the contest was aimed at young children in grades 1−2, it was important to provide a clear and concise introduction to the task. However, the introduction had to be brief to avoid taking up too much time and causing frustration. A lengthy task could lead to a decrease in user engagement.

Initially, the task did not include the Canes Venatici constellation. We decided to add it because it only consists of two stars, making it easy to use for explanation purposes.

Once the mechanics and onboarding were established, we was faced with the question of how to draw connections between the stars in the constellation.

Drawing the connections was more complicated than just selecting all the stars belonging to one constellation since the order in which the stars were selected began to matter. It was decided that connections would only be drawn after the stars were selected and the "Save" button was pressed.

Different use cases were defined for star selection.

1. If all the stars were selected correctly with no stars left in the constellation, it was considered the right answer and drawn as the original constellation.
2. If stars were missing but belonged to one constellation, the constellation was drawn as close to the original as possible, with possible connections made between disconnected groups of stars and all the stars forming a connected graph.
3. If stars belonged to different constellations, connections belonged to the same constellation were drawn first and then stand-alone parts were connected via the shortest way possible.

To allow for easy correction of an answer, it was considered to allow users to select saved stars and re-save them with new ones, deleting them from the previous constellation. However, user testing showed that children understood and preferred the flow where they went to the previous constellation, re-drew it, and then returned to save the new one, even if it involved more clicks.