Project 2 | Website Redesign Prototype

2 Nov 2025 - 27 Nov 2025 ( Week 7  - Week 10 )

Hsu Myat Wati | 0381660 | Bachelor of Design (Hons) in Creative Media
Interactive Design | Taylor's University

Website Redesign Prototype

Prototype Link

Overview 

The prototype developed for this redesign project is a new site for KDramaDiary.com with an updated layout, visuals, and improved user experience on the original website. The original site’s content was cluttered, text-heavy, and lacked sufficient whitespace and visual appeal for a site about K-dramas. In this redesign, the prototype achieves a cleaner, more organised, modern interface that aligns with the emotions and aesthetic style of K-dramas.

The prototype’s homepage features include a Top Story section with a single main drama or article to focus the user’s attention and provide a clear starting point on the page. Below that is a magazine-style grid for the drama categories like Past Dramas, Upcoming Dramas, and 2018 Onwards, which creates visual consistency and makes it easier to browse. A Preview For You section was added to include a selected drama with an oversized image, short description, and rating for added personalization and to make the homepage feel more curated.

These features, along with a redesigned About page with a simple layout and clear information, a Contact page with an input form and message box, social media icons, and clearly linked navigation buttons across all pages, create a website that is more user-friendly and visually appealing.

Important Design Decisions Made During Development 

The redesign proposal drove most of the design decisions made on the website. A pastel-based colour palette was chosen, primarily soft pink, lavender, and white, with complementary neutral tones like grey and black, to reinforce the soft and romantic themes found in many K-dramas and improve contrast and readability. The typography uses a combination of a clean, simple font for body text and a slightly stronger font for headings to support comfortable reading and a modern and organized look. Images used throughout the prototype have been standardized in size and shape to improve the consistency and polished look of the page, as the original website used a variety of image sizes and proportions that made the layout appear less structured. 

Hierarchy was applied to content such as titles, ratings, and descriptions to create a clear order of information and to help the user understand the content faster. Spacing was increased between content to keep the layout from appearing too cluttered.

All of these design choices work together to help meet the objectives outlined in the proposal for the redesign.

Assessment of the Prototype for Meeting the Project Objectives

The final prototype developed for this project meets the stated objectives in the design proposal.

Color Palette 

Pastel-based tones with complementary neutrals have been established that provide a soft and emotional visual theme that suits the K-drama content.

Typography 

Typefaces for the website have been selected to improve readability and provide a clean, professional appearance.

Imagery 

Site images have been formatted consistently to improve visual identity and make the content easier to scan and digest.

Layout Concept 

Incorporating a Top Story feature to focus the user’s attention on the page and a grid layout that displays the key drama categories to create an organized, modern, and easy-to-use homepage.

UX 

Navigation buttons are more clearly linked across all pages, with social media links included, contact form in the Contact page, and clear and consistent content sections for increased usability and engagement.

Technical 

The design follows a layout that can be modified for responsive and search engine-friendly website development.

Reflection on Achieving the Redesign Proposal Objectives 

Overall, this redesigned prototype transforms the original website from a cluttered, text-heavy design to one that is much more organised, clean, and visually consistent. The browsing experience is improved while retaining the key emotional tones and style of K-dramas to make the site more attractive and engaging to users.

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Final Compilation & Reflection

Image
23 September  2025 - 29 December 2025 ( Week 1 - Week 14 ) Hsu Myat Wati |  0381660   | Bachelor of Design (Hons) in Creative Media Advanced Typography | Taylor's University Table of contents Instructions Task 1: Exercises Task 2: Key Artwork & Collateral Task 3: Type Exploration and Application 2. INSTRUCTIONS Submission Task 1: Exercises Task 1A: Exercise 1_Typographic Systems Fig 1.1.1 - Final Axial System (JPEG) ( Week 2 - 3 Oct 2025 ) Fig 1.1.2 - Final Radial System (JPEG) ( Week 2 - 3 Oct 2025 ) Fig 1.1.3 - Final Dilational System  (JPEG)  ( Week 2 - 3 Oct 2025 ) Fig 1.1.4 - Final Grid System  (JPEG)  ( Week 2 - 3 Oct 2025 ) Fig 1.1.5 - Final Random System  (JPEG)  ( Week 2 - 3 Oct 2025 ) Fig 1.1.6 - Final Modular System  (JPEG)  ( Week 2 - 3 Oct 2025 ) Fig 1.1.7 - Final Transitional System  (JPEG)  ( Week 2 - 3 Oct 2025 ) Fig 1.1.8 - Final Bilateral System  (JPEG)  ( Week 2 - 3 Oct 2025 ) Fig...
Read more

Advanced Typography - Task 3: Type Exploration and Application

Image
17 Nov  2025 - 15 Dec 2025 ( Week 9 - Week 13 ) Hsu Myat Wati |  0381660   | Bachelor of Design (Hons) in Creative Media Advanced Typography | Taylor's University Table of contents Lectures Instructions Task 3 Feedback Reflections Further Readings 1. LECTURES Week 9 Font construction 1 Font construction 2 Week 11 How to design punctuation 2. INSTRUCTIONS 3. TASK 3 Week 9 (Proposal) Fig 3.1 - Task 3 Presentation Ideas Proposal ( Week 10 - 19 Nov 2025 ) After our lecturer's feedback, I decided to proceed with idea 3 to expand my task 2 word mark. Concept  When I was designing this typeface, I decided to position it for an organic perfume brand because the visual language connects strongly with the idea of scent and nature. Perfume is something that cannot be seen but is experienced through feeling and emotion, so I wanted the font to suggest movement and softness rather than looking rigid or technical. Overall, my intention was to create a font that feels bold on the ...
Read more

Advanced Typography - Task 2: Key Artwork & Collateral

Image
14 Oct  2025 - 17 Nov 2025 ( Week 4 - Week 9 ) Hsu Myat Wati |  0381660   | Bachelor of Design (Hons) in Creative Media Advanced Typography | Taylor's University Table of contents Lectures Instructions Task 2 Feedback Reflections Further Readings 1. LECTURES Week 5: Perception & Organisation What is Perception in Typography Perception means how we see, understand, and interpret something. In design, what we see can be controlled or influenced by how it’s presented. In typography , perception is about how readers see and move through text using elements like contrast , form , and organization . The goal is to guide the viewer’s eye, create a clear understanding, and make the design interesting. Contrast Fig 1.1 - Contrast  https://pin.it/3iq593APZ Contrast means making things different so they stand out. It helps make text clear, organized, and visually appealing. Designer Carl Dair explained 7 main types of contrast in typography: ...
Read more