HHS Rooster app

How can we expand a basic schedule app into a total education app that supports students in their school days.






In the summer of 2017 Ruben van den Engel contacted me with the question if I wanted to help him with extending and redesigning his current unofficial schedule app of the Haagse Hogeschool. At that moment the app contained out of 2/3 core functionalities with standard iOS interface elements and a bad UX flow. To improve it all he wanted to extend the app and create a fresh new design for it.

After the functionalities and wishes were mapped out, I started with the search for the ideal flow. I determined this on the basis of the core functionalities and how you would use them in a certain order. From the beginning it was clear that the timetable was the most important functionality, so this became the home screen of the app and from there on, the rest extended the app. This also gave Ruben time to release the app and add extra functionalities later on.

Since this was a small-scale project with limited resources, there was not much time to really dive into the user. But since Ruben is part of the target group, I used him as a user for research whenever possible or needed. The focus of this project was therefore mostly on the design.


As this is a side project for Ruben next to his education the app is in the App Store, but doesn’t contain every functionality I designed yet.

As indicated earlier, my focus for this project was more on the UI than UX side. UX was mainly about the flow and small tweaks here and there. The end result of the various screens can be seen below:

Iphone with job detail screen


An important part of the redesign is the timetable of the app. As this is the main functionality.

  • We've chosen for an easy expendable date picker incase you want to look or plan ahead.
  • the size of a lesson depends on the duration. This gives you a quick indication of the duration of the lesson with out having to check the time itself.
  • Color difference between a lessons or a lecture.
  • Location of the lesson highlighted in the top right corner.
Grades overview screen


One of the extra functionalities that Ruben wanted to add was search for rooms. The purpose of this is not so much that you can book a room, but especially that you can quickly see which rooms are available and open to work in.

Grades overview screen


A clear overview of all your grades that can easily be extended by tapping to view the details. The list is organised on most recent with the option to search for a specific course.

Grades overview screen


On the news section it wasn’t possible to only show the news items relevant to you. So I chose to use coloured labels. This way you can quickly scan the news items and instantly see which news items are relevant to you as a user.


The fun part of the project was that I decided to work with Figma on a real project for the first time. A design tool that makes working together really easy, something which was needed as I worked remotely for this project. This way Ruben could see my progress and could give feedback right away, it also made asking feedback or clearing up things easier for me as I could ask the questions within Figma instead of mailing Ruben.

As a designer I find it important to stay up to date on the latest developments of our industry. The speed at which new tools get released is relentless and I think it’s important to give most of these tools a try in order to see how they work, and what there advantages are over other products. This way you can always use the best tool for the job when you start a new project.


Mail me at: hello@ronschrama.com
Or you can find me on social media: