MMU TUBE (Html & Css Rapid sprint Project)

Self Directed Project/Sprint

Overview

This rapid sprint project that had the aim of coding in Html and CSS a platform where university Film Making and graduates from the School of Digital Technology at Manchester Metropolitan University, could upload their films from university as well as work that they have done since graduation. So that current students can get inspiration and connect from fellow students of MMU.

Year

2024

Role

UX-Designer and coder

The Process

Because this was a rapid sprint project, the main focus was on speed, clarity, and producing a functional coded output that film students and graduates at Manchester Metropolitan University can immediately put to use.

Understanding the Core Need

The aim of the platform was to provide a place for current Film Making students and graduates from the School of Digital Technology to upload and then showcase work. This will allow current students to find inspiration, explore real graduate projects, and connect with people across year groups.

Low Fidelity Wire Frames

Wireframe design of a website sign-in page for 'MMU-Tube' with fields for email and password, and links for privacy policy, terms of service, and contact us at the bottom.
Wireframe webpage layout with a hero image, button, video thumbnail, sections for more films with titles and buttons, and a mission statement area.
A webpage for MMU-Tube, showing a header with navigation options, a large placeholder for a video, a section inviting users to discover student films, popular films with watch now buttons, and a call to action to sign up and upload films.

Design Iteration Stages:

Low-Fidelity Wireframes

With limited time, I created quick low-fidelity wireframes to establish the core structure of the platform. These sketches mapped out essential features including: A clean homepage with featured films

A simple upload page for students and graduates and a page to sign up to upload your own work to the site. The emphasis was on defining layout, navigation, and user flow without spending time on detailed visuals.

Rapid Iteration

The wireframes were refined only enough to ensure the main actions were clear: watching films, uploading work, and exploring creators. This allowed for very fast decision-making and immediate transition to development.

Laptop on a green armchair screen displays a website titled 'Discover Our Students Work' with various film thumbnails and watch options.
Laptop displaying a video on a wooden table outdoors, with a white paper cup to the right and green leafy plants in the background.
Smartphone displaying a streaming app with a video titled 'Move' about personal growth and transportation, showing a yellow tram and a portrait of a man in a suit.

The Outcome

The final result was a fully coded HTML and CSS platform intended to showcase films created by Manchester Metropolitan University Film Making students and graduates. The site delivered a clean, minimalist interface that made video content the priority, making it easy for users to browse films, view individual project pages, and explore work across different graduating years.

Given the tight deadline, the platform still managed to provide a source where current students could be inspired and connect with the creative production of their peers and predecessors. Some small refinements during development-like a more responsive layout, better navigation, or film cards-moved from an unpolished prototype state to something that combined all the elements to bring about not only a great final product but one that felt coherent and easy to use.