Repository navigation
MS6
Refined Value: This app is an offline-first tool for mentors and teachers in rural education programs, where internet connection is limited or not always available. It digitizes the full process of assessing, grouping, and tracking each student's progress in math and reading. Different from AI assistants like Shaia, that only help a teacher to plan content for one session, this app keeps the complete history of a student across sessions, classrooms and mentors, even when a student changes group or a teacher leaves in the middle of the program. Each student has one ID that does not repeat across classrooms, so the progress is never lost. All the information is saved locally first and synced only when there is connectivity, instead of depending on WhatsApp or in person coordination with the foundation. This way, the app works with the real conditions of the field low connectivity, teacher turnover, paper-based habits instead of assuming a stable team and constant internet.
01 Identity - Fundamentals - Color with purpose
Our UI color palette is built around Red #C62222 as the main brand color, supported by Green #3E7C59 and Amber #B4700F, and complemented by warm neutral tones such as Cream #FAF6F0, Surface White #FFFFFF, and Ink #221F1F for hierarchy, states, and visual balance.
- Red
#C62222is the primary color of the application. It represents action and engagement, and it is used mainly in primary buttons and key accents. A darker variant, Dark Red#8F1717, is used for pressed states. Red was chosen as the main color because it works well to catch attention in a context where students need support, without making the interface feel cold or overly administrative. - Green
#3E7C59is used as a confirmation color. It shows that a student has been evaluated or that progress has been made, which is important in a context where progress can be hard to see day to day. - Amber
#B4700Fis used to mark records that are pending or need follow-up. It calls attention without implying that something went wrong.
The neutral tones support the rest of the interface. Cream #FAF6F0 is used as the screen background. Surface White #FFFFFF is used for cards and fields, to separate content clearly from the background. Ink #221F1F is used for text and headings, and Soft Ink #6B6259 for hints and metadata. Line #E7DFD3 is used for borders and dividers. Each semantic color has a matching light background variant (Green Background #EAF3EC for success and Amber Background #FBF0DE for pending). Text placed on these backgrounds was checked with a contrast checker to make sure it stays readable for the users.
This palette was chosen to keep the interface approachable for teachers working in rural, under-resourced contexts. Instead of using cold, corporate colors typical of data-tracking tools, the palette combines warm tones with grounded neutrals, so the app feels closer to a support tool than an administrative system.
An ENAd Móvil screen has to solve two distinct tasks: orienting the user (where am I, what's next, how far along) and operating (read a name, pick a group, tap a button). Using a serif for the first and a sans for the second separates those two layers without relying on color or additional visual hierarchy, which matters in an app that will be used under variable lighting and on mid-range devices. Two families also keep asset weight low, an important consideration for an offline-first app that has to cache everything locally.
Fraunces is a high-contrast variable serif with humanist traits (soft terminals, large eye, adjustable optical axis). It serves three purposes in the product:
- It creates instant hierarchy. The serif sans jump reads more strongly than a simple size change, so the teacher identifies the screen heading without reading it in full.
- It sets the right tone. An editorial serif evokes books and teaching materials, not corporate software. For an educational foundation, that warmer register reduces the "administrative system" feeling that tends to put off users with limited tech familiarity.
- It carries the large figures. On the administrator's statistics screens, numbers are the primary content. Fraunces at weight 600–700 gives them enough presence to be read at a glance, even at arm's length from the device.
It's restricted to headings and highlighted data (28.8 / 25.6 / 19.2 px), since its high contrast makes it inefficient for long text or small sizes.
Inter was designed specifically for screens, and that technical decision is what carries the usability:
- Large x-height and open apertures, which keep text legible at 16 px on low-density displays and at reduced brightness.
- Disambiguated letterforms in critical characters (capital I, lowercase l, 1, 0/O). In an app where you read student names, group codes, and levels, confusing characters has a real cost.
- Tabular figures available, which align the columns in the coordinator's tracking tables and let values be compared vertically without effort.
- Full Latin Extended coverage, essential for accents and ñ in Colombian proper names without fallback fonts breaking the baseline.
The weight scale (400 body / 500 labels / 600 secondary actions / 700 primary actions) lets the entire interaction hierarchy be built from a single family. The user learns an implicit rule, more weight is equal to more action.
Body text is fixed at 16 px and everything else derives from it (×1.2, ×1.6, ×1.8). Two reasons:
- 16 px is the recommended minimum for running text on mobile, and it avoids iOS auto-zoom on form fields.
- A scale derived from a single base value lets the app respect the operating system's font-size setting. If a teacher with presbyopia increases the size in Android, the proportion between headings, labels, and body text holds.
The interface uses Material Icons exclusively no custom icon set, illustrations, or photography anywhere in the app. This is a deliberate choice tied directly to the value proposition: Material Icons ship compiled into the Flutter binary as a font, so every glyph renders instantly with zero network requests and zero extra bytes to fetch, even on first launch with no connectivity. There is no illustration or image asset in the project at all, the only bundled assets are the two typefaces. In a context where a teacher may open the app mid-session on a spotty rural connection, this means the UI can never show a broken image or a loading spinner for a decorative asset so everything on screen is either text, a semantic color, or a lightweight vector glyph already on the device.
Two icon styles are used with intent, not arbitrarily:
- Outlined icons(school_outlined, person_outline, groups_outlined, edit_outlined, delete_outline, fact_check_outlined, visibility_outlined, document_scanner_outlined) mark actions and metadata inside a screen(teacher, student count, edit, view, scan). Their lighter line weight keeps day-to-day screens feeling like a support tool rather than an administrative form.
- Filled icons(today, list_alt, groups, calendar_today, person) are reserved for the five bottom-navigation destinations only. Giving the "home base" of the app more visual weight than inscreen actions helps a teacher reorient in one glance after an interruption, a realistic scenario in a classroom session that gets cut off and resumed.
The application's navigational structure was developed as part of the same prototype, illustrated in the flow diagram (Excalidraw), which traces the path from initial access through the core teacher facing functions.
The navigation follows a mobile first pattern designed for teachers in under resourced, low connectivity contexts who need to record and review student information during short, often interrupted sessions in the classroom. The structure impact in the ammount of steps required to reach frequently used functions.
The flow begins with a simulated access screen, where the user selects a role teacher, regional coordinator, or foundation member without requiring a password or real account, reflecting the prototype stage of the project. From there, the user selects a group before reaching the central hub screen, labeled "Today," which serves as the entry point for the two primary task branches: evaluation and attendance. Each branch leads to a secondary screen grouping students under evaluation, and logging hours under attendance before converging on a shared "My data" screen accessible from either path.
The navigational structure emphasizes:
-
Fast access to the two highest frequency actions a teacher performs in a session: evaluating students and recording attendance.
-
A clear hierarchy between entry/setup steps (access, group selection), daily operational tasks (evaluation, attendance), and secondary detail screens (grouping, hours) that branch from them.
-
Convergence of both task branches onto a single data view, reducing the need to navigate to separate sections to review recorded information.
-
A shallow hierarchy (no more than three levels deep from the hub), suited to interrupted, low bandwidth usage.
This structure supports the app's value proposition by allowing a teacher to move from opening the app to logging attendance or an evaluation in only a few taps, while still providing a consolidated view of accumulated data without a separate navigation path