The Story

While Raffles Graduation 2015 marked the first time the graduation book went digital, 2016’s edition was similar, just that it was enhanced for mobile responsiveness. Therefore, a mobile web application was created. Guests and graduating students were welcomed to view their works on the platform and in comparison to 2015’s, the user experience was enhanced, thus delivering an intuitive and responsive platform for users to view.

Raffles Education


  • User Experience
  • User Interface

The Problem

Over the years, guests of graduates are being given a physical copy of the graduation book. It was only changed in 2015 when guests were presented with pendrives featuring works of all graduates. Then again, that was not conducive as not everyone has access to a computer instantaneously.

The Solution

For this, a web application was created so that visiting guests can have instant access to works of graduates before, during and after the show.

The Process

As we were building this within a constraint timeline, we decided to make this a mobile-first experience as it will primarily be viewed from the RafflesSG app. Here’s a rundown of what we have done.


During 2015’s graduation, we spoke to guests who were viewing students’ works via the touchscreen and asked for their feedback about what can be improved for the subsequent graduation ceremonies. Here are some of their feedback:

  • Would be great if the works are portable
  • Pendrive is great but hard to access
  • Touchscreen can limit visibility due to its screen size


Moving on, we went on to research similar platforms by existing institutions to see what have they done. We also spoke to stakeholders such as educational consultants, students and lecturers to help in defining the kind of product for the following year’s graduation ceremony. Questions such as “what do you hope this platform can do for you as a student” and “who do you want to show this to” helped us to craft out the user background, environment, end goals and scenario for our personas.

To keep it short and sweet, our personas consist of (a) industry partner and (b) guest of graduate as the ultimate end goal is to promote the students’ works for greater opportunities.

Target Audience

Primary: Guests & Friends of Graduates and Industry Partners

To showcase the graduates’ works to guests on a mobile platform that is instantaneously accessible to the masses

Secondary: Graduates

For graduates to view their works and reflect on what they have done

Information Architecture

With enough information, we started developing user flows that defined the way our personas will navigate through the web application.

User Stories & User Journey

We focused on what the user’s purpose is. As the industry partner is looking at hiring purposes, we articulated the user flows from onboarding to touchpoints. We also focused on user-centered design process and involved stakeholders to help shape the product in a continual process.


With the structure of the physical graduation book, we moved forward with wireframing and prototyping (in Sketch) and applied its design scheme to further define the product.


Here are some screenshots of the product: