Interactive Design Project 1: Landing Page Design Prototype

Week 1 to Week 14

2/04/2023 – 25/07/2023 

Name: Joan Chiam Zi Woei 

Student ID: 0350211

Interactive Design

Project 1 - Landing Page Design Prototype

---

Instructions:

Module Information Booklet

---

Process

On this new exercise we are to select a poorly-designed website and then redesign it. The website I decided to redesign is Zara. Zara is a popular fashion retailer that originated in Spain and it has gained international recognition due to its cheap and affordable clothing. Since it is a well known brand, it is to no surprise that it have an online store. But due to its, complicated layout, people were complaining about its bad design. Therefore, I decided to try working on it. 

Design Concept

Fig. 1 My analysis and re-design concept of Zara website

Fig. 2 My wireframe designs

Prototyping Process

Before starting on creating the prototype, I came out with the colour palette for the website. I wanted to maintain the minimalist aesthetic that Zara have in the official website. So I chose these as the main colours used for the prototype. 

Fig 3.1 Colour palette

I used 12 columns layout grid to help me align my pictures and text.

Fig 3.2 Progress in making prototype

 
Upon getting feedbacks from the lecturer, I was able to identify where I'm lacking for the website prototype. 

Fig 3.3 Improvement needed

Fig 3.4 Improvement needed

On figure 3.3, I was given advice that on fig 3.3 I can add in some more details such as descriptions as well as adding in icons such as heart and shopping cart to know what catches the users' interest. On figure 3.4, I was instructed to improve the visual of it since it is the last thing users will see when they scroll all the way down the website. 

Fig 3.5 Improved version

Fig 3.6 Improved version 

After making the changes for the prototype website, it was able to help improve the website visually and at the same time also help added more good features that can help the users out as shown on fig 3.5.

Lastly, I was done with my redesign for the prototype website.

Fig. 3.7 My final prototype

---

Feedbacks

Week 6

• The website look good but Zara website uses minimalistic aesthetic therefore, get rid of the unnecessary lines away.
• The products should include description and maybe add some icons such as shopping cart to keep it interesting and user friendly.
• For the ending of the website, it still have space to improve. Maybe add in some more features/ functions or play around with the placement to make sure its not too bland and boring. 

 Reflection

This project is truly interesting as it allow me to learn a lot. I get to learn the designing a website is a complex and creative process that requires thoughtful consideration. It also involves balancing aesthetics, functionality, and user experience to create a visually appealing and intuitive interface. It allow me to pay attention to detail and user-centered design principles that I have never really put much thought upon before. It shows how it is crucial to ensure a seamless and engaging browsing experience. Overall it is a nice experience to know that I can improve a website and make it both visually satisfying while being functional.