Interactive Design - Project 1
INTERACTIVE DESIGN -Project 1
23/4/2023- 2023（week1-week ）
Huang jiaqi/0371553
Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 1
TABLE OF CONTENTS
1. Instructions
2. Lectures
3. Exercises
4. Feedback
5. Reflection
INSTRUCTIONS
This is the Module Information Booklet for this module:
2. Lectures
Week 4:
We are instructed by Mr Shamsul to find a website for this project. Later, we need to compel our ideas in the proposal.
Following is the essential contents for the proposal.
1) Website Description:
4) Design Proposal:
- A brief introduction for the selected website.
- Current Design Evaluation
- User Experience (UX)
- Functionality
- Objectives
- Target Audience
4) Design Proposal:
- Visual Design Concepts
- Rationale of the design choices
5) UX Enhancements:
- Propose changes to improve user experience
- Technical Considerations
Project 1: Website Redesign Proposal
Summary of homework requirements
Website analysis
Design evaluation: evaluate the layout, color matching, font, pictures and overall aesthetics of the website.
User experience (UX): Evaluate the ease of use, navigation, accessibility and responsiveness of the website and find out the problems.
Functionality: Check the loading speed, interactivity, cross-device and cross-browser compatibility of the website.
Revision target
Design goals: clarify the goals of redesign, such as improving usability, brand consistency or aesthetics.
Target audience: Describe the target users and explain how the new design can better meet their needs.
Design scheme
Visual design concept: show the visual direction of the new design, including mood board, visual reference and wireframe diagram, and explain the reasons for the design selection.
User experience enhancement: propose specific measures to improve user experience, such as optimizing navigation, content structure or interactivity.
Technical improvements: list technical updates, such as responsive optimization, loading speed optimization, etc.
Submission requirements
Make the proposal into a slide and upload it to E-portfolio, providing embedded links.
The website I chose is https://themewagon.github.io/famms/
fig 1.1Website selection
Famms Website Redesign Proposal
Cover Page
- Title: “Famms Website Redesign Proposal”
- Name: Jiayi Huang
- Student ID: 0371553
- University and Program: Taylor's University, Creative Media Design
Table of Contents
- Website Analysis
- User Experience (UX) Review
- Functionality Review
- Redesign Goals
- Design Proposals
- Technical Improvements
- Summary and Conclusion
Website Analysis - Current Design Evaluation
Website Introduction
- Description: Introduce Famms, its main features, and target audience.
- Problem: Does the current style align with the target audience’s expectations? Does it effectively represent the brand image?
- Solution: Reposition the design style to better match the target users by refining color schemes, fonts, and imagery.
Layout Analysis
- Assessment: Strengths and weaknesses of the current layout.
- Problem: Complex content structure makes it difficult for users to quickly find information.
- Solution: Redesign the layout to simplify information hierarchy, structuring the homepage into key sections: main info, featured products, cart, and support.
Color Scheme
- Evaluation: Does the color align with the brand identity?
- Problem: Colors may be too dull or lack appeal.
- Solution: Select a brighter, more modern color scheme, possibly with gradients or unified main colors, to enhance visual appeal.
Typography
- Review: Font choices and sizes.
- Problem: Current fonts may feel too generic and lack brand personality.
- Solution: Opt for a modern, easy-to-read font, keeping consistency across the site for a better user experience. Google Fonts could provide free options to improve readability and design appeal.
Image Quality and Relevance
- Analysis: Do images effectively convey brand and product information?
- Problem: Some images lack clarity, affecting visual quality.
- Solution: Use high-quality, brand-relevant images, optimizing image sizes to maintain loading speed.
Design Summary
- Summary: Design issues with improvement directions.
- Solution: Redefine the brand’s visual style and optimize layout for easier navigation.
Website Analysis - User Experience (UX)
Navigation System
- Evaluation: Is navigation intuitive? Can users quickly locate information?
- Problem: Too many navigation items with a complex hierarchy increase cognitive load.
- Solution: Simplify the navigation structure with a main menu and dropdowns, organizing categories to reduce primary menu items.
Accessibility
- Analysis: Website’s accessibility features.
- Problem: Missing alt text and high-contrast mode hinder accessibility for visually impaired users.
- Solution: Add alt text for all images and create a high-contrast mode toggle for visually impaired users.
Responsive Design
- Evaluation: Website’s performance on various devices.
- Problem: Poor display on mobile devices, affecting small-screen user experience.
- Solution: Use a responsive design framework, such as Bootstrap or CSS Flexbox, to ensure optimal display on all screens.
Interactivity
- Review: Are interactive elements responsive?
- Problem: Some buttons lack visual feedback, and forms don’t provide instant responses, confusing users.
- Solution: Add hover effects, click feedback, and “loading” indicators for forms to improve user experience.
User Experience Pain Points
- Summary: Key UX issues, like complex navigation and delayed interactions.
- Solution: Comprehensive improvements to navigation and interactivity to create a smoother experience.
UX Optimization Recommendations
- Recommendations: Streamline navigation, enhance button feedback, and ensure responsive design for improved user satisfaction and engagement.
Website Analysis - Functionality
Loading Speed Test
- Evaluation: Page loading speed and causes.
- Problem: Slow page load times reduce user retention.
- Solution: Compress images, enable lazy loading, and implement caching to improve speed.
Interactive Functionality
- Assessment: Are interactive features responsive?
- Problem: Slow responses in forms and buttons cause frustration.
- Solution: Optimize button responses, reduce clicks needed, and ensure smooth operation of key features.
Compatibility Testing
- Evaluation: Compatibility across different devices and browsers.
- Problem: Display issues in certain browsers, affecting user experience.
- Solution: Use cross-browser testing tools (e.g., BrowserStack) to ensure consistent display across major browsers.
Functionality Summary
- Summary: Functionality issues, like load speed and interaction delay.
- Solution: Implement optimization strategies to enhance site performance and responsiveness.
Redesign Goals
Main Design Goals
- Definition: Primary redesign goals, such as enhancing UX and brand identity.
- Problem: Poor user experience and lack of brand recognition.
- Solution: Outline a comprehensive redesign strategy to enhance visual appeal and functionality.
User Needs
- Analysis: User needs.
- Problem: Users want easy navigation and a simple checkout process.
- Solution: Streamline the navigation and shopping process for easier and more intuitive interactions.
Overall Design Direction
- Direction: Define the design direction as clean, clear, and brand-aligned.
- Solution: Establish a “simple, user-friendly” design concept to guide visual and functional improvements.
Design Proposal - Visual Concept
Mood Board
- Display: Color, font, and imagery references.
- Problem: Current visuals lack cohesion.
- Solution: Define brand color tones and a cohesive style for a consistent look.
Design Inspiration
- Presentation: Design inspiration fitting the brand’s style.
- Solution: Use a modern, minimalist approach to make the brand appear fresh, youthful, and professional.
Color Scheme
- Proposal: New color scheme.
- Solution: Choose vibrant, contemporary colors that align with the brand’s main tone.
Typography Suggestions
- Suggestions: Fonts and font pairings.
- Solution: Select easy-to-read modern fonts, ensuring consistency and brand cohesion.
Image Style
- Optimization: Improve image quality and style.
- Solution: Use high-quality images that align with the brand image, highlighting product details.
Design Proposal - User Experience (UX) Enhancements
Optimized Navigation Structure
- Sketch: Proposed navigation.
- Solution: Clearly layered structure with fewer unnecessary pages to help users locate content efficiently.
Content Organization Plan
- Display: Layout concept for organizing content.
- Solution: Simplify homepage content, highlighting key information and user-focused products.
Interactive Design
- Optimization: Button and form interactivity.
- Solution: Add hover and click feedback to enhance responsiveness.
Visual Cues
- Emphasis: Visual cues for key buttons.
- Solution: Add visual emphasis on buttons like “Add to Cart” to guide users.
UX Improvement Summary
- Summary: UX enhancement proposals.
- Solution: Improve layout and interactivity to ensure smoother and more enjoyable navigation.
Technical Improvements
Mobile Optimization
- Target: Improvements for mobile users.
- Solution: Apply responsive layouts to enhance mobile UX.
Image Optimization
- Implementation: Efficient image formats and caching.
- Solution: Use WebP images to improve load times.
Code Optimization Suggestions
- Proposals: Code optimization strategies.
- Solution: Use clean code and compress resources to boost website performance.
Cross-Browser Compatibility
- Assurance: Compatibility across major browsers.
- Solution: Conduct tests on popular browsers to maintain consistent appearance.
Conclusion
- Summary: Projected results of the redesign.
- Expected Outcome: Improved user experience, higher retention, and stronger brand impact.
The following is the redesign proposal:
Famms-Website-Redesign-Proposal.pptx，作者 jia qi Huang
Comments
Post a Comment