Interactive Design | Project 1

Gao Yuan Yi 0373945

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

Project 1

---

INTRUCTION

---

Project 1

Objective

The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal should demonstrate your ability to critically evaluate a website' s design and functionality, and to propose design solutions that enhance user experience, aesthetics, and performance.

Assignment

Description:

You are required to select an existing website which you feel has several design and UX issue and prepare a detailed proposal for its redesign. The proposal should address the following key aspects:

Website Analysis:

Current Design Evaluation: Provide a critique of the current design, focusing on layout, color scheme, typography, imagery, and overall aesthetics.

User Experience (UX): 

Assess the site' s usability, navigation, accessibility, and responsiveness. Identify pain points or areas that could be improved.

Functionality: 

Evaluate the website' s performance, including load times, interactivity, and compatibility across different devices and browsers.

Redesign Goals

Objectives: 

Clearly define the goals of the redesign (e.g. improved usability, modernized look, enhanced brand alignment).

Target Audience: 

Describe the intended audience for the redesigned website and how the new design will better meet their needs.

Design Proposal

Visual Design Concepts: 

Present your ideas for the new visual design, including visual references, mood board and wireframes. Discuss the rationale behind your design choices.

UX Enhancements:

Propose changes to improve user experience, such as simplified navigation, better content organization, or enhanced interactivity.

---

Website Analysis: Craigslist

Craigslist

1. Current Design Evaluation

Layout: Craigslist's layout is text-heavy and lacks visual hierarchy. Categories are densely packed together, making it difficult for users to locate specific items at a glance.

Color Scheme: The site uses minimal color, relying primarily on blue links and a white background. This lack of color variety makes it look outdated and doesn't help users navigate the content intuitively.

Typography: The typography is quite basic, using a small, default sans-serif font that can be hard to read on larger screens. There’s no typographic contrast to distinguish headings from body text.

Imagery: Craigslist is mostly text-based with limited visuals, which makes it feel cluttered and less engaging for users. Listings lack preview images on the main page, making it harder for users to scan visually.

Overall Aesthetics: Craigslist’s aesthetic is extremely minimalistic, relying heavily on text and a single-color scheme. While this minimalism provides directness, it lacks modern appeal, making the website feel outdated compared to visually engaging contemporary designs. The page lacks visual cues, which can make the browsing experience monotonous. Additionally, the bland color scheme and absence of imagery or visual hierarchy make Craigslist look more like a basic text bulletin board, failing to provide the beauty and appeal that users expect from modern websites.

2. User Experience (UX)

Usability: The user journey is straightforward but can be confusing, especially for new users. The lack of visual cues and organization leads to a cumbersome experience when navigating between categories.

Navigation: Although there is a broad category list, it’s not organized efficiently, which causes users to scroll through long lists. Advanced filtering options are also limited.

Accessibility: The simple layout is mostly accessible but doesn’t follow modern accessibility practices, such as text-to-speech compatibility for images. There’s also limited responsive design, making mobile navigation challenging.

Responsiveness: The website does not perform well on mobile devices, with navigation and visuals poorly optimized for smaller screens.

3. Functionality

Performance: While Craigslist loads quickly due to its minimalist design, the user experience is poor due to outdated functionality. There’s no interactive map for viewing listings in geographic locations, which is a common feature in competitor sites.

Interactivity: There is little to no interactivity or modern design elements. The lack of images and interactive filters limits user engagement.

Compatibility: The website works across browsers but lacks modern design standards, which can lead to inconsistencies on different devices, especially tablets and mobile phones.

Redesign Goals

1. Objectives

Improved Usability

Simplified Navigation: By adding key navigation options (such as Home, Categories, Personal Center, Help, etc.) to the top bar, the user operation path can be simplified, allowing users to quickly find the content they need.

Category Optimization: Use dropdown menus or collapsible navigation to replace the current dense list, making the homepage less cluttered. By reducing information overload, users can more easily browse and select areas or categories of interest.

Enhanced Search Functionality: Add a search box at the top with autocomplete features, enabling users to directly search for specific content and reduce search time.

Multi-Device Responsive Design: Ensure the page displays well on both mobile devices and desktops, optimizing the browsing experience on mobile to increase user convenience.

Modernized Look

Color Update: Retain Craigslist’s iconic purple while adding fresh, modern colors like blue or green to links and buttons, creating a more youthful visual style.

Clear Visual Hierarchy: Adopt a three or four-column grid layout with soft separators and background color blocks to enhance the neatness and visual hierarchy of the page, making information more orderly.

Icons and Graphics: Add relevant icons in front of each category and include simple illustrations to make the page more visual and vibrant.

Modern Typography: Use sans-serif fonts (such as Roboto or Open Sans) to replace the original fonts, creating a minimalist and professional visual experience.

Enhanced Brand Alignment

Maintain a Simple Style: While updating the design, retain Craigslist’s core simplicity, ensuring the page is clean and tidy, aligning with users' expectations of Craigslist.

Brand Color Application: Use Craigslist's iconic purple as the primary brand color and integrate it into other visual elements to enhance brand recognition and consistency.

Consistency in Page Guidance: Add onboarding guides or recommended sections on the homepage to help new users quickly familiarize themselves with the website's features and strengthen brand connections with existing users.

Visual Elements that Increase Credibility: Enhance the page's professionalism and credibility through uniform icon design, clear layout separations, and modern typography, elevating the brand image.

2. Target Audience

Intended Audience: The primary users are those looking to buy, sell, or find classified information quickly. They range from young adults to older generations.

User Needs: Users need a clear, efficient way to search and view listings without excessive scrolling or searching through dense text blocks.

Design Proposal

1. Visual Design Concepts

Visual References: Use websites like Facebook Marketplace or Airbnb as inspiration, integrating visuals and icons alongside listings to improve readability and aesthetics.

Mood Board: A clean, modern color scheme with soft, complementary colors (e.g., blue and gray) would create a more appealing look while maintaining Craigslist’s familiar simplicity.

Wireframes: A proposed layout would feature distinct categories with icons, a larger search bar at the top, and a sidebar for advanced filtering.

2. UX Enhancements

Simplified Navigation: Redesign the main navigation to include icons and a dropdown for categories, which will help users find specific sections faster.

Improved Content Organization: Group similar items together and incorporate images alongside listings for a more visual approach, making it easier to scan for relevant items.

Enhanced Interactivity: Add interactive filters (e.g., price range, location radius) to improve the search experience. An interactive map for browsing location-based listings would also be beneficial.

3. Technical Considerations for Craigslist Website Update

Mobile Optimization

Responsive Design: Implement a responsive web design (RWD) approach to ensure that the website layout adapts seamlessly to different screen sizes. This includes flexible grids, images, and CSS media queries to enhance user experience on smartphones and tablets.

Touch-Friendly Elements: Increase the size of buttons and links to make them more accessible for touch interactions. Ensure adequate spacing between interactive elements to prevent accidental clicks.

Simplified Mobile Navigation: Develop a mobile-specific navigation menu that uses collapsible elements to save space and simplify user interactions on smaller screens.

Improved Load Times

Image Optimization: Use image compression techniques and modern formats (such as WebP) to reduce file sizes without sacrificing quality. Implement lazy loading for images to defer the loading of off-screen images until they are needed.

Minification of Resources: Minify CSS, JavaScript, and HTML files to decrease their size and improve load times. Combine multiple files into single files where possible to reduce HTTP requests.

Content Delivery Network (CDN): Utilize a CDN to cache content geographically closer to users, reducing latency and improving load times. This can enhance the performance of static assets like images, stylesheets, and scripts.

Browser Caching: Implement caching strategies that allow browsers to store certain elements of the site locally, reducing the need to reload them on subsequent visits.

Performance Monitoring and Optimization

Regular Performance Testing: Use tools like Google PageSpeed Insights or GTmetrix to monitor website performance regularly. Identify bottlenecks and make continuous improvements based on data-driven insights.

Reduce Server Response Time: Optimize server configurations and database queries to ensure quick server response times. Consider upgrading hosting plans or using cloud-based solutions for better scalability and performance.

Accessibility Enhancements

ARIA Roles and Labels: Incorporate Accessible Rich Internet Applications (ARIA) roles and properties to enhance accessibility for users with disabilities. Ensure that all interactive elements are keyboard-navigable.

Semantic HTML: Use semantic HTML elements to improve accessibility and SEO. Properly structure content with headings, lists, and tables, making it easier for screen readers to interpret.

Security Measures

SSL Certification: Ensure that the website uses HTTPS to secure user data during transmission. This is particularly important for protecting personal information shared on the platform.

Regular Security Updates: Implement a routine for updating software dependencies and frameworks to protect against vulnerabilities and ensure the latest security patches are applied.

Project 1 PDF