INTERACTIVE DESIGN 2- Website Redesign Prototype
Huang jiaqi/0371553
Interactive Design / Bachelor of Design (Honours) in Creative Media
1. Instructions
2. Lectures
3. Exercises
4. Feedback
5. Reflection
INSTRUCTIONS
This is the Module Information Booklet for this module:
Week 9
This week, we will need to develop a prototype for the redesign website. Interaction elements should be included. We will need to do 3 pages, homepage, core content page (at least 1) and contact page.
First of all, I used the DW software and modified it according to the original website. According to what the teacher taught me in class, I practiced interaction and how to add personal contacts on the web page.
fig 1.1DW Process
fig 1.2 DW Process
fig 1.3 DW Process
fig 1.4 DW Process
fig 1.5 DW Process
fig 1.6 DW Process
fig 1.7 DW Process
Key Features of the Prototype
The redesigned prototype of the website originally hosted at ThemeWagon embodies several significant updates to enhance usability, aesthetics, and functionality. The primary objective was to simplify the user interface and streamline navigation while retaining essential functionality.
Simplified User Interface
The most noticeable improvement is the simplification of the user interface. By decluttering unnecessary elements, the layout now prioritizes clarity and focus. Key features such as the navigation bar, product categories, and featured items are prominently displayed, allowing users to find relevant information quickly and easily.
Enhanced Minimalist Design
The redesign embraces a minimalist aesthetic with clean lines, ample white space, and a restrained color palette. This approach not only improves visual appeal but also reduces cognitive load, making the website more user-friendly.
Improved Navigation
Simplified instructions and streamlined navigation paths were incorporated to ensure that users can accomplish their tasks efficiently. The redesign emphasizes intuitive user journeys, such as clearer call-to-action buttons, enhanced drop-down menus, and logical content hierarchies.
Responsive Design
The prototype maintains a fully responsive layout, ensuring that the website performs consistently across various devices and screen sizes. This responsiveness enhances accessibility and ensures a seamless browsing experience for all users.
Focus on Functionality
Key functionalities, including product search, filters, and shopping cart options, were retained while ensuring their operation aligns with the simplified design. Any redundant or overly complex features were removed or consolidated.
Design Decisions Made During Development
Several pivotal design decisions guided the redevelopment process:
Simplification of Code
To address the complexity of the original code, unnecessary programming elements were removed or optimized. This change not only enhanced the website's performance but also made it easier to maintain and update.
Addition of Clear Instructions
To improve the user experience, concise and clear instructions were added at critical interaction points. For instance, user-friendly tooltips and hover effects now guide visitors through complex sections.
Adopting a Consistent Visual Language
Consistency was prioritized in fonts, color schemes, and iconography to create a cohesive visual identity. A modern sans-serif font was chosen for better readability, while contrasting colors were utilized to highlight important actions and information.
Balancing Simplicity with Functionality
While simplicity was the primary goal, care was taken to ensure the design still met user needs effectively. Essential elements like product filtering, detailed item descriptions, and secure checkout options were retained but refined for easier accessibility.
How the Prototype Addresses Redesign Objectives
The redesigned prototype meets the objectives outlined in the proposal through a blend of aesthetic refinement and functional improvement:
Enhanced User Experience
By removing clutter and reducing visual noise, the prototype fosters a more enjoyable and efficient user experience. The navigation improvements further ensure that users can effortlessly find what they are looking for.
Alignment with Brand Identity
The minimalist design aligns with modern web design trends and reflects a professional, user-focused brand image. This update strengthens the website's ability to engage its target audience effectively.
Improved Accessibility
Simplified layouts and clear instructions ensure the website is accessible to a broader audience, including those with limited technical expertise. The responsive design also ensures inclusivity across different devices and platforms.
Scalability and Maintenance
The simplified codebase ensures that future updates and integrations can be carried out seamlessly. This scalability makes the website more adaptable to evolving business needs.
Fulfilling User Expectations
The redesigned prototype focuses on user needs, addressing pain points identified in the original design. By presenting a clear and functional interface, the website now fulfills the expectations of modern web users.
fig 1.8 figma Process
fig 1.9 figma Process
fig 1.10 figma Process
fig 1.11 figma Process
fig 1.12 figma Process
According to the requirements, I redesigned the original website in figma, and added interaction and contact pages according to the knowledge taught by the teacher. I added the effect of page scrolling and color change on the home page, and redesigned the interactive performance of the website's product purchase to make it more simple and simple.
The final product
Feedback
week 10:It's done well in DW, and it can be made with figma.
Week 11: There should be no shadows in the letters on the home page. Everything else is fine.
Reflection
After completing the redesign of the ThemeWagon website, I have an in-depth understanding of the process and have learned a lot from it. By improving the interface and functions, it not only improves the usability of the website, but also makes me better understand the far-reaching impact of design decision-making on user experience.
Challenges and solutions of design
Simplification of complex code
In the original design, the code was too complex and lengthy, which not only affected the loading speed, but also increased the difficulty of maintenance. In order to solve this problem, I successfully simplified the website structure by deleting useless code and optimizing program logic. This process made me realize that code optimization is not only technical, but also the basic work for user experience service.
The balance between design and function
When simplifying the interface, the biggest challenge I face is how to retain the core functions of the website. For example, while deleting unnecessary elements, I retained key functions such as user search, filtering and checkout, and optimized these modules. This process made me realize that while pursuing minimalist design, we must respect functionality and avoid "simplification for the sake of simplification".
Improvement of user experience
In the redesign, I tried to improve the user experience by adding clear operating instructions and a more intuitive layout. For example, in the navigation bar and product classification, a sense of visual hierarchy and clearer instructions have been added to ensure that users can quickly find the content they need. This makes me deeply realize that good design is not only beautiful, but also needs to provide them with truly convenient solutions from the perspective of users.
Skills and knowledge learned
Design systematic thinking
In the process of design, I gradually formed a systematic way of thinking, including how to balance visual design and functional requirements, how to look at the layout from the user's perspective, and how to optimize the code to support the design.
Simple but not simple design concept
Through this project, I have a better understanding of the design principle of "less is more". Simplicity does not mean simplicity, but removes unnecessary interference, focuses on core functions, and makes users feel comfortable and natural. This concept will be of great help to me in the future design.
The combination of technology and art
This redesign made me realize that web design is not only a visual art, but also a combination of technology and art. By learning and applying front-end technology, I find that technical ability can provide more possibilities for design, and also enable me to better realize my creativity.
Space for harvest and improvement
Harvest
Through this project, I have made progress in many aspects of web design, especially while optimizing code, improving user experience and visual beauty, and learning how to make trade-oms and balance in actual projects. This makes me full of confidence in the future design work and gives me a deeper understanding of user needs.
Improve the space
Despite the high degree of completion of the project, I realized that there is still room for improvement. For example:
In the user testing process, I can invite more users to participate in order to understand their needs more comprehensively.
In the design, you can try to add more dynamic elements, such as micro-interaction effects, to further enhance the user's sense of participation.
I also need to learn more in-depth user research methods to make design decision-making more scientific and data-driven.
Sum up
This website redesign project is a rare practical opportunity for me to establish a connection between theoretical knowledge and practical skills. Whether it is the progress of design thinking or the improvement of technical ability, I am full of expectations for future creations. At the same time, I also know better that design is a process of continuous optimization and continuous pursuit of user value. In the future, I will continue to study and explore, hoping to design more practical and beautiful works.
Comments
Post a Comment