Designing the ATU QuickView Prototype

From early sketches to a working HTML/CSS prototype that could one day grow into a real student portal.

Starting with the user journey

The design process began with a simple question: what does an ATU student actually do in a normal week? Mapping the journey showed that they move between several digital touchpoints – Moodle for modules, timetables for rooms, Outlook for communication, the Library for resources and Student Hub for admin tasks. The prototype was planned as a “first stop” that connects all of these points in a friendly way.

Early wireframes focused on grouping services by purpose and keeping the amount of text short. Each service card needed just enough description so that a first-year student could understand what the button would do without reading a long paragraph.

Visual design decisions

The interface uses a clean white background with soft blue gradients to echo ATU branding while keeping the mood light and modern. The service cards have rounded corners, subtle shadows and colourful icons to make each system feel approachable instead of intimidating.

Buttons are designed with strong contrast and clear labels such as “Open Moodle mini view” or “Open Outlook in New Tab”. This reduces the cognitive load on the user and supports accessibility. The layout remains responsive so that the page can be viewed on laptops, tablets and phones.

Implementing the prototype

The prototype is built using semantic HTML, a custom CSS file and a small JavaScript file. JavaScript handles smooth scrolling for the top navigation and toggles the embedded mini views using simple classes. This keeps the code easy to understand and suitable for an Interaction Design or Project Management assignment, while still feeling like a real product.

Although the site does not integrate with official ATU APIs, it links to the live Moodle, timetable, library, Outlook and Student Hub sites. This makes the prototype realistic enough for usability testing with students and offers a strong foundation if the university ever chooses to develop a more advanced dashboard.