Optimizing Error 500 for Better UX

Overview

Error 500 on the website is a problem that occurs on the server. This error often occurs on websites and needs to be notified to website users.

In this project I redesigned this page to adjust to the design system that has been used by Harian Kompas.

Overview

Error 500 on the website is a problem that occurs on the server. This error often occurs on websites and needs to be notified to website users.

In this project I redesigned this page to adjust to the design system that has been used by Harian Kompas.

Design Process

Competitor Analysis
Researching and analyzing designs from competitors or similar products to find inspiration and understand trends.
Wireframe
Creating lo-fi for desktop, tablet, and mobile to ensure the design is responsive and user-friendly on all devices.
Hi-fi (High-Fidelity)
Creating detailed designs with colors, images, and other visual elements to show how the final product will look according to design system.

Design Process

Competitor Analysis
Researching and analyzing designs from competitors or similar products to find inspiration and understand trends.
Wireframe
Creating lo-fi for desktop, tablet, and mobile to ensure the design is responsive and user-friendly on all devices.
Hi-fi (High-Fidelity)
Creating detailed designs with colors, images, and other visual elements to show how the final product will look according to design system.

Page Analysis

In the initial stage of designing an Error 500 page, I start by researching various Error 500 page designs available on the internet. After gathering these examples, I analyze each layout to understand the presentation. For instance, I examine Airbnb's error page, noting how they provide users with potential solutions to prevent disruption or frustration in their journey.

Additionally, they include a redirect to the main page, ensuring users are not left stranded on the error page. To enhance the visual appeal, incorporating engaging images helps create a calming impression for users, making the error experience less stressful.

Page Analysis

In the initial stage of designing an Error 500 page, I start by researching various Error 500 page designs available on the internet. After gathering these examples, I analyze each layout to understand the presentation. For instance, I examine Airbnb's error page, noting how they provide users with potential solutions to prevent disruption or frustration in their journey.

Additionally, they include a redirect to the main page, ensuring users are not left stranded on the error page. To enhance the visual appeal, incorporating engaging images helps create a calming impression for users, making the error experience less stressful.

Create Wireframe

In translating ideas from the analysis results into UX writing and layouting, I've created a lo-fi wireframe across desktop, tablet, and mobile views

Illustration

Additionally, in the illustration phase, I've prepared sketches for visual elements, aligning with the process used to create Kirim Opini illustrations landing page, though the specifics of this process weren't documented.

Create Wireframe

In translating ideas from the analysis results into UX writing and layouting, I've created a lo-fi wireframe across desktop, tablet, and mobile views

Illustration

Additionally, in the illustration phase, I've prepared sketches for visual elements, aligning with the process used to create Kirim Opini illustrations landing page, though the specifics of this process weren't documented.