Redesign proposal for Thuto Mobile
Each direction covers the whole app, from sign-in to courses, deadlines, offline reading, lecturer notices and your profile, and strips away the noise. They are working prototypes, so you can judge them by using them.
The starting point
The features are right. The presentation fights them. Six things stand out across the app today.
Open the current versionButtons, tabs, filters, course codes, countdowns and badges all share one orange, so nothing reads as the most important thing on the screen.
Labels like Secure IndexedDB Offline Storage, Size unknown Cached, Sakai REST API and Ping Thuto Server describe the software, not what a student gets.
Course and assignment names end in ellipses on almost every card, even where there is room to wrap onto a second line.
A second, larger crest and a tall welcome card push the course list off the first screen of the home tab.
Signing in and the demo look equally important, and the OR INSTANT DEMO divider wraps and breaks.
Grey descriptions and footer lines sit on dark navy with too little contrast to read comfortably outdoors.
Three directions
All three share the same content and behaviour, so the only thing you are choosing is the feel. Sign in as the demo student in any of them to submit work, save files for offline reading, read notices and set alarms.
Direction A
Quiet, editorial and unmistakably academic.
Warm paper tones, a serif for headings and hairline rules instead of boxes. It reads like a well-set course handbook, so the university feels present without a glowing crest doing the work.
Direction B
Dark, precise and built for speed.
A disciplined dark interface in the spirit of professional tools. Monochrome surfaces, monospaced numbers and a single green signal for anything that is ready or safe.
Direction C
Soft, friendly and native to the phone.
Rounded cards, a floating tab bar and a colour for every course, in the style of the apps students already use every day. Named after the valley that is home to the NUL campus.
Whichever you choose
The improvements that matter most are not visual. Every direction ships with the same working basics.
Signing in is the only primary button, and every screen has one obvious next step.
Plain-language messages appear next to the field that needs fixing, with a Caps Lock warning and show password.
Every deadline has a live countdown, its brief, the file types it accepts and a submit flow with progress.
Every file shows its size and download progress, and saved files open in a reader without a connection.
Lecturer notices with unread markers, plus alarms per deadline at the times you choose.
An optional PIN lock, real labels on every field, text that passes contrast checks and tap targets of at least 44 pixels.
At a glance
| Aspect | AFolio | BGraphite | CRoma |
|---|---|---|---|
| Mood | Calm, editorial, academic | Precise, focused, technical | Friendly, soft, familiar |
| Light or dark | Light, on warm paper | Dark, layered greys | Light, on cool grey |
| Typefaces | Instrument Serif and Instrument Sans | IBM Plex Sans and IBM Plex Mono | Figtree |
| Colour | Ink, with Basotho blue for links and terracotta when time is short | Greyscale, with green for ready and amber for due soon | Lesotho green for actions, plus a colour per course |
| Countdowns | Large figures in the deadline list | Monospaced timers that line up | Bold timers on course coloured cards |
| Navigation | Five-tab bar with an ink marker | Five-tab bar under a status header | Floating pill tab bar |
| Demo account | A quiet text link | An outlined second button | A grey pill under Sign in |
| Prototype | Open Folio | Open Graphite | Open Roma |