Passion Project – An alerts page in a mobile app: “How we built a way to alert students”

Student protests closed down the University of Cape Town campus at the end of 2015. The students believed the fee increases were too high, and that outsourced workers weren’t paid enough and weren’t getting the benefits of full-time employment. The student protesters disrupted lectures and exams to bring attention to the cause.

My friend, Alastair, had built a student portal iPhone app called Universe that many students used to access their course materials on the go. He sent out push notifications to students during the protests to give them updates on campus closures and news about exams being postponed. Increasing numbers of students were downloading the app at the time, which Alastair suspected was due to friends telling each other about the useful push notifications.

However, the notifications had an unfortunate flaw. When you tapped on the notifications, you would be taken to the app’s homepage, and not to an additional detailed description as you would expect.

Alastair approached me to collaborate on an Alerts page in the app. The page would show a history of all previous alert notifications with additional information explaining the events and circumstances.

We wanted to get something out fast. Building the feature into the app natively would take long. I suggested we code a web page into the app because that would be faster. Our challenge was that we also needed blogging functionality. Posting each notification would be laborious if we manually had to code each notification into the Alerts page, and separately code each related description page.

We both researched potential solutions. We briefly thought Tumblr might work, but we couldn’t find a theme to suit our needs. We put a hold on developing this feature for the users.

Two days later, at 11:30pm on a Monday night, I thought, isn’t it possible to customise Tumblr themes? After some Googling and YouTubing, customising a Tumblr theme seemed pretty straightforward because you could simply use the basic website languages of HTML and CSS.

I sent Alastair a Slack message to tell him what I found. We got to work that night.

I taught myself how to code my designs using the Tumblr syntax as I went along. I customised an existing Tumblr theme to suit our purposes perfectly. The theme had a page of alerts that showed the headline. If an alert had additional information, there would be a ‘read more’ button on the alert which took you to a further description page. We could even intersperse tweets amongst the list of alerts.

Alastair coded the page into the app while I worked on the Tumblr customisation. He gave the page an icon on the tab bar menu and made the page render the blog as a website. The final touch was to make the app’s push notifications deep-link you straight to the detailed description pages when you tapped on them.

By 4:30am we had done it!

I went to sleep and when I woke up a few hours later, I updated the app on my iPhone and saw the work we had created only a few hours before. The Alerts page kept the university students updated for the duration of the next few weeks.