Tupaia’s mobile website

Every hero needs a sidekick and, whilst the new Tupaia mobile website isn’t as flashy as its larger desktop sibling, it delivers the same awesome content in a fast, fit-for-mobile package.

Static maps

Tupaia’s mobile website uses static maps with polygons highlighting the current region. Clicking on the static map opens Google Maps with the current region or clinic in view.

One of the challenges with working out how to provide Tupaia’s content in a mobile format was the map. Interactive maps on mobile websites are cumbersome, fire up the CPU, drain battery and provide a chuggy frustrating experience. Imagine having to select a tiny region in the Pacific Islands with your finger or thumb — that’s enough to make someone give up technology altogether. Maps are however a really important storytelling mechanic for Tupaia as many of our clinics are in really remote regions. They serve a practical purpose as well, allowing those on the ground to find clinics near to them. By using static maps we’ve reached a compromise between showing users where they are and providing a smooth, efficient, mobile-centred experience.

A list of measures

When it comes to mobile devices scrolling is cheap, so when we set out to design an experience for selecting between up to over 170 different measures the natural choice was to create a huge scrollable list. It may sound cheap, but it works. It’s much more soothing to be able to whiz past a list of available options than having to embark on an epic journey through a nested hierarchy. Initially we built the list to tap into the mobile device native select component but after testing on Android devices we quickly changed approach.

Re-using components from Desktop

*Warning computer talk ahead*
Tupaia’s mobile web user interface doesn’t look like it shares much with its desktop sibling, at least to the naked eye. Under the hood we use all of the underlying controller and model logic from the desktop site to power the new components we’ve built for mobile. The use of React and Redux throughout the entire project makes that possible, reducing our development time considerably. For those that don’t know React and Redux are modern, performant JavaScript frameworks for building decoupled, extendable front-ends. For us that means we’re able to use much of the same code for desktop as mobile which creates a consistent experience across the two platforms and reduces our development overhead. You may have heard of ‘responsive’ websites — Tupaia is not responsive. Responsive websites often fail when it comes to highly specialised single-page-apps like Tupaia because Desktop and Mobile need to be considered as two different experiences, not just different looking versions of the same thing. By using React and Redux we’ve been able to create two separate products that run on the same foundation. Pretty cool!

Smart tech, strong mission, lean team

The deadline for the release of the mobile site was a conference in Ghana that the team was presenting at. We smashed that deadline and got the site out a week early. From a personal point of view I really enjoy working with Tupaia because I get to work with modern tech, on a strong overall mission in a super-lean and communicative team. As always, we’ve still got plenty of work to do and I’m looking forward to the next project!

What is Tupaia Meditrak?

Tupaia Meditrak is a cross-patform (Android and iOS) React Native app that is helping collect a vast amount of data from clinics, health centres and hospitals in the Pacific region. Information such as whether there is a working fridge, how many beds there are, and whether the facility has been damaged in a recent disaster are all collected through the app and aggregated on dashboards at https://www.tupaia.org/. The App has some hardcore two-way syncing abilities so that our surveyors can use it in super-remote places whether there is internet connectivity is limited or altogether absent.

Interested in working with modern tech on a project that makes a positive social impact?

We have your dream job: https://angel.co/beyond-essential-systems-1/jobs/302493-full-stack-developer-for-social-impact-startup