INTERACTIVE DESIGN - PROJECT 1

 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:

The website that I have selected to explore and analyze for this project is:

https://tukangprint.com/ 

The current website design could be considered to be unsatisfactory due to the unfriendly design towards users. It appears to be difficult to be browsed through. 

 


CURRENT DESIGN EVALUATION

Layout:

  • The layout appears crowded, with numerous product categories displayed upfront.

  • Hierarchical structure could be clearer—important CTAs and featured items get lost in the noise.

Color Scheme:

  • Bright and varied colors dominate, which can feel overwhelming.

  • Lack of visual hierarchy due to inconsistent use of brand colors.

Typography:

  • Font choices vary across the site, reducing brand consistency.

  • Font sizes and weights are not optimized for readability on all devices.

Imagery:

  • High volume of product images, but many are low resolution or poorly aligned.

  • Lack of cohesive visual theme across images (different lighting, styles).

Overall Aesthetics:

  • The site feels dated with 2010s-era design choices.

  • Needs more white space and cleaner visual presentation.

    Usability:

    • Users may find it hard to locate specific products due to deep category nesting.

    • Checkout and customization processes are not intuitive.

    Navigation:

    • Menu structure is cluttered; lacks mega-menu or logical grouping.

    • Search functionality could be enhanced with filters or autocomplete.

    Accessibility:

    • Limited contrast in text/background in some sections.

    • No clear focus states or keyboard navigation cues for users with disabilities.

    Responsiveness:

    • Mobile version exists but elements often stack awkwardly.

    • Some buttons/text overlap on small screens.


FUNCTIONALITY

  • Load Times: Slower on mobile due to unoptimized images and scripts.

  • Interactivity: Product customization tools are clunky and may use outdated tech (e.g., Flash or old JavaScript frameworks).

  • Browser Compatibility: Inconsistent rendering across different browsers (from anecdotal reports).

   


REDESIGN GOOALS

  • Create a clean, modern visual design.

  • Enhance usability and streamline product discovery.

  • Improve performance and responsiveness on all devices.

  • Align visuals and tone with a professional, high-quality print brand.


 

TARGET AUDIENCE

Audience:

  • Small business owners looking for branded merchandise.

  • Young adults ordering custom gifts (e.g., phone cases, plaques).

  • Design-conscious consumers who want personalized, aesthetic items.

Needs:

  • Easy customization.

  • Mobile-friendly experience.

  • Visual inspiration for product ideas.

       


DESIGN PROPOSAL

Visual Design Concepts:

  • Mood Board: Clean, minimalist e-commerce style (like Canva, Printful, Moo).

  • Color Palette: Refined brand colors (e.g., primary dark blue with accent yellow).

  • Typography: Use of Google Fonts like “Poppins” or “Roboto” for legibility and style.

  • Wireframes: Homepage with clear hero section, 3-4 featured products, benefits strip, simplified nav.

Design Rationale:

  • Focus on visual storytelling with better photography.

  • Minimize clutter with progressive disclosure (expandable sections).

  • Reinforce brand trust with testimonials and visual badges.



UX ENHANCEMENTS

  • Add mega-menu navigation for better category browsing.

  • Implement product configurator with real-time preview and drag-drop.

  • Use card-based layout for product browsing.

  • Introduce live chat or chatbot for instant assistance.



TECHNICAL CONSIDERATIONS

Mobile Optimization: Use responsive frameworks (e.g., Tailwind CSS or Bootstrap 5).

Performance: Lazy loading for images, use of WebP, minified JS/CSS.

SEO Improvements: Schema markup, meta tag optimization, structured product data.

CMS Platform Update: Consider migrating to Shopify, WooCommerce, or a headless CMS for flexibility

Comments

Post a Comment

Popular posts from this blog

INTERCULTURAL DESIGN TASK 3 - FINAL PROJECT

Image
In this project, we are going to finalize our idea, compiling it into a set of information and data. For the final project, we are all tasked to create a tiktok account that holds all of the research and output of our task. The tiktok account that we are posting them in will be a compilation of videos based on our work that we have worked on for the task within the semester. As our main topic is about the everyday design, we as a group have decided to pick the main focus of traffic signs in Indonesia as a point of interest. We emphasized how traffic is so prevalent not only in Indonesia, but throughout various densely populated countries like Malaysia as well, that it has became a culture of its own. Bad driving habits has contributed to the horrible traffic across the countries that it has turned into an everyday culture.  As a group, we decided to tackle one of the sign that has contributed to the horrible congestion and bad driving culture, which is the “belok kiri jalan terus” ...
Read more