Resume
VIDIO
ENHANCE ERROR PAGE
Role
Product Designer (Intern)
Teams
Design Discovery
Design Ops
Product Manager
Tools
Figma
Platform
Responsive Website
Back to Home
Vidio, #1 Streaming Platform in Indonesia is having various content such as Sports, Original Series, Anime, Korean, and many more. Vidio’s Design Discovery team was working on enhancing the search experience. This includes the error and empty states—commonly known as edge cases. As a Product Design Intern, I was entrusted with improving the experience for error state pages across Vidio’s platform.
Error State 400, 403, 404, and 500 for website version (desktop and mobile)
Aimed to help users recover from error conditions easily.
Ensuring the design aligns with Vidio’s latest design guidelines.
First, I did an audit on the current Vidio error state. From the audit, I discovered several core issues
Lack of clear information hierarchy.
Uninformative illustrations and copywriting that didn’t help users understand the error.
User Stories
Then, I created user stories to help the team understand the problems experienced by the users.
As a user, I want to understand why an error happens so that I know what to do next.
Next, I listed some of opportunities that can be implemented when designing the new error state page.
Update the design by using dark mode and equalize with the latest Vidio's design system.
Create a design for the mobile version
I checked how other streaming platforms handle similar error cases, particularly Netflix and Disney+ Hotstar.
I began sketching an early draft of the redesigned error pages, focusing on the layout adjustment.
I shared my draft with my senior designer. He gave feedback for emphasizing the importance of contextual based on each error type. From there, I revised the designs accordingly.
I broke down the purpose and behavior for each error type:
400 Bad Request: Typically caused by malformed inputs, cache, or cookies. Added a "Back to Home" CTA to help users recover quickly.
403 Forbidden: User trying access to a restricted page. Similar to Error 400, I'm included a "Back to Home" CTA.
404 Not Found: Users often access this page from deleted content or content that is not on Vidio. usually they search for a movie or series on Google and Vidio has these tags for SEO needs, so when clicked it will lead to a 404 page. I'm Adding a content offering section to recommend similar content and encourage continued engagement.
500 Internal Server Error: Indicates server-side problems. I intentionally excluded a CTA to prevent users from repeatedly refreshing, which could increase server load.
Each Error State was designed with desktop and mobile compatibility, dark mode, and copywriting that aligns with Vidio’s voice and tone.
I monitored the impact of my design at 1st week after it was implemented. There are 2 positive impacts from the design I made
Increase Click on offering section, from around 500 to over 11.000 click per day.
Reduce failure percentage from 0.07% into 0.04%
I'm very grateful to the Discovery team at Vidio for the trust and freedom given to me as an intern to join and explore this project. Also a huge appreciation to Mr.Eggy and Mrs.Novita as mentors in the discovery design team. As well as Ms.Brenda and Ms.Stella from the product manager who helped provide various data needs for this project.
Ali Hafidz ©2025