Interactive Design Project 2

Interactive Design Project 2 

Zhang WanRu /0368214

Interactive Design / Bachelor of Design in Creative Media / Taylors University

Project 2

TABLE OF CONTENTS

1.Lecture 

2.Instructions 

3.Task

4.Reflection

2.Instructions 

3.Task

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.
Submission: 
A fully functional prototype ACCESSIBLE via a SHAREABLE link or as a DOWNLOADABLE file.
A brief writeup in your E-Portfolio of (500–800 words) outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.

First, I opened the Lazada web version and observed it, and I also checked the China Taobao web version for comparison. Before that, based on my proposal, I had a deep understanding of both, and then started to learn Figma and use Figma to draw UI.

The Lazada：https://www.lazada.com

The Taobao：https://world.taobao.com

Fig 1.1 Project 1 Wireframes Screenshot

I made some changes to Lazada’s original website when I was creating it.

Fig 1.2 Prototype Process, Week10 (27/11/2024)

When I finished all the web pages, I started to make them interactive and connect them together.

Fig 1.3 Prototype Process, Week10 (27/11/2024)

Website Redesign Prototype link: 

https://www.figma.com/proto/SALtAZ8PnHG7fN5s3fiO0J/project-2-Prototype?node-id=1-130&node-type=frame&t=dvITuQ1YH7XRI19t-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A130

A Brief of my Prototype:

Main features of the prototype

My prototyping centered around creating a user-friendly and visually appealing interface, specifically optimized for the needs of older users. The overall color scheme adopts a simple style of black, white and gray. This minimalist design reduces visual interference and makes the interface clearer and easier to use, while retaining modernity and professionalism.
Font sizes have been significantly increased site-wide to ensure content is easier to read, addressing common visual issues among older users. The page layout focuses on clarity, with text and images arranged more concisely and orderly. For example, on the home page, important content is displayed prominently, the font size is increased, and the overall design of the page avoids clutter. To further improve usability, I also added easily identifiable symbols (such as shopping carts, category icons, etc.) next to important elements to help users understand the interface content more quickly.

Design Approaches Used in Development

During the development process, I simplified the site’s navigation by creating a “fixed” navigation bar at the top of the page. This ensured that users could easily access key sections such as Home, Categories, About, and Contact without having to scroll up, improving usability and navigation clarity.

To improve content visibility, I removed unnecessary promotional ads and distracting elements, reducing cognitive load and allowing users to focus on important information. Complex visuals were replaced with intuitive icons to simplify interactions and enhance understanding.

In terms of interaction design, I implemented various interactive features, including responsive buttons, hover states, and form fields, to make navigation intuitive and user-friendly. For example, buttons provide visual feedback with color changes when hovered over, while form fields include helpful prompts to guide users through their tasks. These thoughtful interactions make the platform easier and more engaging to use, fostering a smoother shopping journey for all users.

Finally, the homepage content was streamlined by grouping options into category sections and highlighting the most important or popular items. The images chosen were in keeping with the overall black, white, and gray theme, keeping the visual consistency and appeal.

How the Prototype Achieves the Objectives Set in the Redesign Proposal

The Lazada prototype successfully achieves its redesign goals by prioritizing the needs of older users. The black, white, and gray color scheme ensures a clear, visually comfortable interface that reduces eye fatigue. Expanded font sizes and an organized layout enhance readability and navigation, making it easier for elderly users. Redundant ads have been removed, and intuitive icons added for clarity.

The redesign addresses navigation and layout issues of the original site. A fixed top navigation bar prevents overlapping images and text, providing quick access to key sections. Interactive elements like buttons, hover states, and form fields are thoughtfully integrated. Clear button feedback, hover color changes, and friendly form prompts contribute to a smoother user experience.

Overall, the redesign makes the website more intuitive and age-friendly, enhancing visual appeal and user experience. By addressing key issues, the prototype meets the needs of target users while maintaining the brand's professionalism and functionality.

4.Reflection

Throughout the prototype development process, I optimized the user experience by simplifying navigation, improving font clarity, eliminating redundant ads, and incorporating intuitive icons, especially considering the special needs of elderly users. The first time I came into contact with and used Figma for design, I deeply experienced its powerful design functions and convenient operation interface, but at the same time I also faced certain challenges and needed time to familiarize myself with and master its various functions.

The first time I officially used Figma, I first learned each function of Figma through the following video tutorials, which enabled me to plan the page layout more accurately and ensure the visual consistency of the interface. By designing a stable top navigation bar, adjusting the page layout, and adopting a unified black, white and gray tone, the clarity and ease of use of the interface were improved.

However, when reviewing the entire design process, I realized that although these design strategies have solved many problems, it is still necessary to collect actual feedback from users, understand their real needs more deeply, and continuously optimize the design. This is also the best growth for every designer. This experience made me pay more attention to the balance between user experience and interface design, and also deepened my understanding and practical ability of intuitive design principles and tool application.

It is worth mentioning that this is my first time to contact and learn interactive design. In this process, I deeply realized the importance of interactive design in improving user experience. It is not only about the beauty and ease of use of the interface, but also about how to establish a natural and smooth interactive relationship between users and products. This learning experience has undoubtedly added a new perspective and thinking dimension to my design journey.