UI/UX CASE STUDY : Redesign Pemerintah Kota Semarang Website

Tanggal Pembuatan : 13 Mei 2022

Desclaimer : This project is part of the UI/UX training implemented by Binar Academy UI/UX Research, for Kampus Merdeka held by Kementrian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Redesign Pemerintah Kota Semarang website is the which one challenge of UI/UX Research in Binar Academy. I am not working for nor contracted prefossionally with Pemerintah Kota Semarang.

Redesign Pemerintah Kota Semarang Website

Introduction

UI/UX Case Study pada artikel ini meredesain ulang website Pemerintah Kota Semarang pada alamat https://www.semarangkota.go.id/ . Website ini digunakan Pemerintah Kota Semarang untuk berbagi informasi tentang fasilitas, layanan dan berita di Kota Semarang. Artikel ini saya buat untuk berbagi pikiran dan mengasah kreatifitas saya dalam meredesain website. Redesain saya selesaikan dalam waktu dua minggu.

My Roles

Redesain ini saya lakukan seorang diri dengan peran UI/UX Designer.

Design Process

1. Empatize
2. Define
3. Ideate
4. Prototyping

UI/UX Design Process

Phase 1 — Empatize

Pada fase ini mengamati website Pemerintah Kota Semarang di laman ini https://www.semarangkota.go.id//

Phase 2— Define

Pada fase ini menemukan pain points dan room improvements yang perlu diperbaiki :

1. Gambar yang terlalu besar
2. Warna terlalu banyak dan tidak konsisten
3. Spasi, padding dan margin tidak konsisten
4. Ikon tidak konsisten

Phase 3— Ideate

Setelah menemukan pain points dan room improvements, maka dilanjutkan membuat moodboards yang terinspirasi dari berbagai website kampus atau website pemerintahan lainnya.

Moodboards

Kemudian membuat design system untuk website yang akan diredesain.

Design System 1

DesIgn System 2

Phase 4— Prototype

Setelah menentukan moodboards dan design system, maka dapat dilanjutkan membuat prototype redesain.

Redesain 1

Rencana Redesain 1

Hasil Redesain 1

Redesain 2

Rencana Redesain 2

Hasil Redesain 2

Redesain 3

Rencana Redesain 3

Hasil Redesain 3

Redesain 4

Rencana Redesain 4

Hasil Redesain 4

Redesain 5

Rencana Redesain 5

Hasil Redesain 5

Redesain 6

Rencana Redesain 6

Hasil Redesain 6

Redesain 7

Rencana Redesain 7

Hasil Redesain 7

Redesain 8

Rencana Redesain 8

Hasil Redesign 8

Result

Hasil Redesign Website Desktop Pemerintah Kota Semarang:

Hasil Prototype Redesain Website Deskop Pemerintah Kota Semarang

Hasil Redesign Website Mobile Pemerintah Kota Semarang:

https://www.figma.com/file/AeQE4TpKWwyzTVEn0Vm5I9/FIQRI-UPAKARTI-A-REDESIGN?node-id=72%3A2781— —

Dalam meredesain website Pemerintah Kota Semarang ini memperhatikan konsistentensi segi spasi, padding, margin, warna dan font serta kenyamanan ukuran gambar yang sesuai sehingga kenyamanan lebih terasa.

Big thanks to :

Korniawan Prabowo (Mentor Binar Academy)