Interactive Design | Project 2

-

Gao Yuan Yi 0373945

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Project 2

INTRUCTION


Project 2

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.



https://www.figma.com/design/46t7Ljf2BVa9sQbzKj0BWT/Interactive-Design-Project-2?node-id=0-1&t=l443iQCUmLbK9V6V-1

1. Key Features of Craigslist

Craigslist is a very simple platform for posting and browsing classified ads. Its main features include:

  • Organized by categories: Ads are sorted into categories like housing, jobs, and items for sale, making it easy to find what you' re looking for.
  • Plain design: The website is extremely basic. It focuses on function rather than looks, with minimal styling or visuals.
  • Local content: Everything is divided by cities and regions, so users can see ads relevant to their area.
  • Fast navigation: The site is easy to navigate with simple links and lists, but it doesn' t feel modern or user-friendly.
  • User-generated content: All the ads are created by users, but there' s not much in place for quality control or safety, which can be a problem.


2. How My Redesign Achieved the Goals

When redesigning Craigslist, I wanted to improve how it looks and works while keeping it simple and functional. Here' s how I met those goals:

  • Updated visuals: I gave the website a more modern look with cleaner fonts, better colors, and icons. It feels fresh but still simple.
  • Better navigation: The categories are now easier to browse, with a clearer structure and faster ways to find content, like search filters.
  • Improved mobile experience: I focused on making the site work great on phones, with responsive layouts that adjust perfectly to different screen sizes.
  • More engaging interactions: I added features like real-time search filters and personalized recommendations to make browsing smoother and more helpful.
  • Building trust: I introduced features like user reviews, report buttons, and stronger identity verification to make the platform feel safer and more reliable.


3. Design Decisions I Made

Here are the main choices I made during the redesign process:

  • Modern look and feel: Craigslist looks outdated, so I decided to use a cleaner, more professional design with better visuals to attract users.
  • Simplified user experience: I streamlined how people browse and post ads by creating a clearer menu and reducing unnecessary steps.
  • Mobile-first approach: Since most people use phones, I made sure the redesign worked well on small screens without losing functionality.
  • Clearer information layout: I grouped related content using cards and added visual highlights for important details, making the site easier to read.
  • Interactive features: I added small touches like loading indicators and dynamic filters to make the site feel more responsive and modern.
  • Focus on safety: I made trust a priority by adding ways for users to rate each other, report issues, and verify their profiles.


Comments

Post a Comment

Popular posts from this blog

Typography | Task 1: Exercises

-
Image
  22/4/24-27/5/24（week 1-week 5） Gao Yuan Yi  0373945 Typography Task 1: Exercises Lecture Week 1   a） Typo_0_Introduction In this lecture, Mr. Vinod introduce us to typography, which can be seen in our daily lives and can be used in a wide range of different fields. What is Typography？ Typography is the art of creating letters. It is  also animated and can infiuence wedding website design, app design, ect. It is important for designers.  Typograpgy has evolved over 500 years, from calligraphy to lettering, and finally to typography.  The arrangement of types includes selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letter pair (kerning).  The terms Typography also applies to the style, arrangement, and appearance of leeters, numbers, and symbols created by the process.  Font : A fonts refers to the individual font or weight within the typeface, l.e.:  Fig.1.1 Exam...
Read more

Design Principles | Task 1 Exploration

-
Image
3/2/2025 - 17/2/2025  Week 1 - Week 3 Gao Yuan Yi  0373945 GCD60804  Design Principles  / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1 Exploration Lecture Intro_Elements & Principles of Design 1. Elements of Design Point : The simplest element; repetition forms lines, and movement creates shapes. Line : Defines boundaries of shapes, expresses motion or emotion, and can depict light and shadow when grouped. Shape : A two-dimensional area, divided into geometric (regular) and organic (irregular) shapes. Form : Three-dimensional shapes, often used in sculpture and architecture. Texture : The tactile quality or visual representation of surfaces, divided into actual and simulated textures. Space : Can be two-dimensional or three-dimensional, divided into positive (filled) and negative (empty) space. Colour : Determined by light wavelengths, with three properties: hue, value, and saturation. 2. Principles of Design Contrast : Attracts attent...
Read more

Advanced Typography: Task 1 Exercises

-
Image
25/9/2024 - 16/10/2024  Week 1 - Week 3 Gao Yuan Yi 0373945 GCD61004  Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1 Exercises - Typographic Systems & Type & Play LECTURES Lecture 1 AdTypo_1_Typographic Systems Shape Grammar: A set of shape rules that apply in a step-by-step way to generate a set, or language, of designs.  Axial System: All elements are organised to the left or right of a single axis.  Fig.1.1.1  Axial System Radial System: All elements are extended from a point of focus.  Fig.1. 1. 2  Radial System Dilatational System: All elements expand from a central point in a circular fashion.  Fig.1. 1. 3  Dilatational System Random System: Elements appear to have no specific pattern or relationship.  Fig.1. 1. 4  Random System Grid System: A system of vertical and horizontal divisions.  Fig.1. 1. 5  Grid System Transitional System: An informal system ...
Read more