WatchIO
The WatchIO project was a team effort in collaboration with @radkam2000 to create an engineering thesis. My main task was to design and implement the user interface - from concept to mockups to the final frontend.
Users face difficulties in sharing content with others: they have to use external solutions, create separate accounts or send links, which spoils the user experience. They lack a simple, integrated way to view and interact together.
Creating a consistent, intuitive environment that allows users to easily share playlists and subscriptions, watch series together, and build relationships and communities - all on one platform.
Features such as shared playlists, shared subscription (up to 5 people) and synchronous viewing rooms have been designed to allow users to experience screenings together. The interface has been simplified to make operation quick, easy to understand and friendly to any age group.
WatchIO allows users to experience screenings together without technical complications - everything happens in one place, without having to switch between apps. With synchronous viewing and shared playlists, users can build relationships, comment in real time and get more enjoyment out of watching together - even from a distance. The interface supports these needs while being accessible and intuitive for less technical people as well.
During the research phase, I focused on understanding the needs of streaming users in a group or at a distance.
I conducted:
Users want a simple and aesthetically pleasing tool that enables shared viewing without technical complications and facilitates subscription and content sharing with a trusted group.
graphic designer, recently moved to another city because of a new job
Finally I can watch the series with the crew like I used to - even though everyone sits in a different city. It really makes for a home movie atmosphere!
At the UX stage, I focused on understanding user needs and developing an intuitive flow. I made sure that the whole thing was consistent with the business goals of the project, but at the same time as simple and user-friendly as possible in everyday use.
As UI designer, I designed the interface based on modern patterns, taking care of accessibility, visual hierarchy and clarity. I created a simple library that ensured consistency of components and accelerated implementation.
At the implementation stage, I was in charge of implementing the frontend using NextJS and the MaterialUI component library. I was responsible for the responsiveness of the interface, interactions and integration with the server part.
"use client";
import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import LoadingFilms from "./loading";
const FilmsSlider = () => {
const getFilms = async () => {
try {
const response = await fetch("http://localhost:5000/api/series", {
method: "GET",
});
if (response.status === 200) {
const res = await response.json();
return res.data.series;
} else return [];
} catch (error) {
console.log(error);
return [];
}
};
const [series, setSeries] = useState(null);
useEffect(() => {
getFilms().then((data) => {
setSeries(data);
});
}, []);
const Films = dynamic(() => import("./Films"), {
ssr: false,
loading: () => <LoadingFilms />,
});
return <div>{series && <Films series={series} />}</div>;
};
export default FilmsSlider; Example: films presentation base (slider) on main page
The biggest lesson? It's better to plan the code architecture (especially Context API) and give yourself more space for design iterations, but at the same time, I saw how important collaboration and quick decision-making are in a real, time-limited project.