Project 2 - Interactive Design
Week 6 - Week 9
Aurellia Franseska Djauhari - 0365053
Interactive Design
Bachelor of Information Technology (Minoring in Creative Media Design)
The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
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.
Final Prototype:
Figma Board:
Redesign Explanation:
The PT Horng Dar Footwear website was redesigned in order to fix a number of issues with the original website. The objective was to have an online platform that was more brand-aligned, user-friendly, and professional. To improve the user experience overall, I tried making Figma prototype that features a visually cleaner appearance, easier navigation, and better content arrangement.
One of the key improvements is in visual design. Here are the list of fonts and colors that I used in my prototype.
Fonts:
- Company Name (Logo/Header): Stick No Bills
- Navigation Menu: Urbanist
- Section Titles / Headings: Reem Kufi
- Body Text / Content: Outfit
- Footer Text: Outfit
- Copyright Notice: Urbanist
As part of the redesign, interactive elements were enhanced to improve user experience. The navigation bar now includes a hover effect that changes the font to bold when the user hovers over text, providing clearer visual feedback and improving usability. Additionally, button designs have been refined to better align with the overall aesthetic, offering a more modern and consistent look across the site.
The content is now better arranged into various areas such as company introduction, services, customer relations, facilities, and contact. Every page has a unique goal, which leads the user automatically through the website. With a factory picture and explanations of the main services, the homepage makes a good first impression.
Home, Services, Products, and Contact Us are the four primary pages in my Figma prototype. Because related information is grouped more logically, this restructuring enhances the user experience. Users may now learn about the company's capabilities, client collaborations, and quality assurance procedures in one location because I combined the Customers and Laboratory sections from the previous website into the new Services page.
In the "Who Are We?" part of the Services page, the company is introduced. A customer relations display featuring well-known international clients like Arena, Lacoste, Quiksilver, and Rip Curl helps to establish confidence. The usage of cutting-edge equipment and stringent quality control procedures are highlighted in the "Our Facilities" section.
The addition of the Contact Us page, which was not found from the original website, is among the most noticeable upgrades. A clear, easy-to-use contact form, all of the company's contact details, social media links, and an integrated Google Map are all included in this new section. In addition to simplifying communication, it gives the website professionalism and completeness, which strengthens ties with prospective clients and partners.
In conclusion, the original sections of the PT Horng Dar Footwear website have been reorganized into Home, Services, Products, and a recently added Contact Us page, which enhances user experience and makes navigating easier. For a better understanding, the Laboratory and Customers sections have been merged under Services. The new design offers a more polished and user-friendly platform that more accurately represents the company's strengths and global reach thanks to its crisp color palette, contemporary font, and enhanced content flow.
Comments
Post a Comment