03.06.2025 - 17.06.2025 / Week 7 -Week 9
Chika Clarissa Widjaja / 0378636
Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Project 2: Website Redesign Prototype
TABLE OF CONTENTS
- INSTRUCTIONS
- TASK
- REFLECTION
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/16IkoMiIbbtlHzVGN1GHzH0TBH-p65FHB/preview" width="640" height="480" allow="autoplay"></iframe>
Task Brief:
Prototype Development:
Interactive Prototype:
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
Homepage: Present the main design elements, including navigation, hero section, and key content areas.
Core Content Pages: Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX)
Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
TASK
Wire Frames
For this project, I made a prototype that fixes a lot of the problems I noticed with the original website. Some of the main issues were the confusing navigation, outdated visuals, and the way the layout felt kind of messy and unorganized. In my version, the homepage now has a clean and simple navigation bar that stays the same on every page, and I added hover effects to make it easier to see where you're going. At the top of the homepage, I included a large image of classroom chairs with a statement that immediately let the viewer's know about what they do, and a red “Contact Us” button to make the purpose of the site really clear right away. Below that, there’s a short paragraph explaining what the company offers, along with an image that shows three people standing in the chair to show how strong it is. The contact page is straightforward, with a form for people to send a message, plus a section showing the company’s phone number, address, and a map so people can find them more easily. On the About Us page, I included the company’s mission and vision, added a few product pictures, and made a section highlighting three reasons to choose them—like durability and customization—so visitors understand what makes the brand stand out. I tried to keep each page organized so the content is easy to read and doesn't feel all over the place.
While I was designing, I really wanted the site to feel cleaner and more modern without making it too flashy. I chose a minimal layout with only a few strong colors—mostly red, black, and white, with some navy to keep things from looking too plain. I kept the same fonts throughout the site so everything looks consistent, and made sure the text is easy to read by using proper sizes and spacing. I also made sure all the buttons looked and worked the same way, with hover effects and clear feedback when you click on them. Every button takes you to where it's supposed to go, like the “Contact Us” ones that show up in multiple places. One of the biggest changes was removing all the random images and logos that didn’t really fit anywhere on the old site. I replaced those with more organized content blocks, and added a proper footer with the company info and contact links so everything has a place.
Overall, I think the prototype does a good job of meeting the goals I talked about in my redesign proposal. One of my biggest aims was to make the site less confusing and more visually consistent, and I think I did that by creating a cleaner layout and keeping everything organized. Now the information is easier to find, the design is more modern, and the whole site feels more balanced. The colors, fonts, and images all work together better, which helps the brand come across as more trustworthy and professional. Compared to the original site, which looked kind of outdated and scattered, I think my version makes it a lot easier for users to understand what the company is about and find what they need without getting overwhelmed or distracted.
INSTRUCTIONS
Interactive Prototype:
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
Homepage: Present the main design elements, including navigation, hero section, and key content areas.
Core Content Pages: Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX)
Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
For this project, I made a prototype that fixes a lot of the problems I noticed with the original website. Some of the main issues were the confusing navigation, outdated visuals, and the way the layout felt kind of messy and unorganized. In my version, the homepage now has a clean and simple navigation bar that stays the same on every page, and I added hover effects to make it easier to see where you're going. At the top of the homepage, I included a large image of classroom chairs with a statement that immediately let the viewer's know about what they do, and a red “Contact Us” button to make the purpose of the site really clear right away. Below that, there’s a short paragraph explaining what the company offers, along with an image that shows three people standing in the chair to show how strong it is. The contact page is straightforward, with a form for people to send a message, plus a section showing the company’s phone number, address, and a map so people can find them more easily. On the About Us page, I included the company’s mission and vision, added a few product pictures, and made a section highlighting three reasons to choose them—like durability and customization—so visitors understand what makes the brand stand out. I tried to keep each page organized so the content is easy to read and doesn't feel all over the place.
While I was designing, I really wanted the site to feel cleaner and more modern without making it too flashy. I chose a minimal layout with only a few strong colors—mostly red, black, and white, with some navy to keep things from looking too plain. I kept the same fonts throughout the site so everything looks consistent, and made sure the text is easy to read by using proper sizes and spacing. I also made sure all the buttons looked and worked the same way, with hover effects and clear feedback when you click on them. Every button takes you to where it's supposed to go, like the “Contact Us” ones that show up in multiple places. One of the biggest changes was removing all the random images and logos that didn’t really fit anywhere on the old site. I replaced those with more organized content blocks, and added a proper footer with the company info and contact links so everything has a place.
Overall, I think the prototype does a good job of meeting the goals I talked about in my redesign proposal. One of my biggest aims was to make the site less confusing and more visually consistent, and I think I did that by creating a cleaner layout and keeping everything organized. Now the information is easier to find, the design is more modern, and the whole site feels more balanced. The colors, fonts, and images all work together better, which helps the brand come across as more trustworthy and professional. Compared to the original site, which looked kind of outdated and scattered, I think my version makes it a lot easier for users to understand what the company is about and find what they need without getting overwhelmed or distracted.
Comments
Post a Comment