⟵

SACABC

Old About Page Design New About Page Design

Before & After: About Page Redesign (Drag orange slider to see difference)

Overview

The SACABC website redesign focused on improving user experience and visual consistency. The project addressed issues such as information overload, inconsistent design elements, and poor navigation while also adding cultural elements to match the organization's goals.

Role: Web Designer, Project Lead

Duration: 3 months (Jul. 2023 - Sept. 2023)

Tools:

  • Figma
  • HTML/CSS
  • JavaScript
  • WordPress

TL;DR

  • Problem: The SACABC website suffered from inconsistent design, poor navigation, and information overload, making it difficult for users to find relevant information.
  • Solution: A redesigned website with a focus on visual consistency, improved navigation, and better content hierarchy.
  • Features:
    • Unified design elements (icons, CTA texts, section titles).
    • Simplified header with dropdown menus for better navigation.
    • Improved accessibility and readability.
  • Outcome: Delivered a redesigned website with improved usability and visual consistency, providing a better experience for users.

Context

The SACABC website was outdated and difficult to navigate, with inconsistent design elements and a lack of clear content hierarchy. The redesign aimed to address these issues by creating a more user-friendly and visually consistent experience.

Plan

To improve the website, the following changes were planned:

  • Unify design elements (icons, CTA texts, section titles).
  • Simplify the header and add dropdown menus for better navigation.
  • Improve accessibility and readability.
  • Streamline the footer to reduce information overload.

Process

The redesign process involved:

  • Conducting a thorough analysis of the existing website to identify pain points.
  • Creating wireframes and prototypes to test new design concepts.
  • Iterating on the design based on feedback from stakeholders.
  • Implementing the final design using HTML, CSS, and JavaScript through Wordpress.

Results

The redesigned website achieved its goals of improving usability and visual consistency. Key outcomes included:

  • A more intuitive navigation structure.
  • Improved accessibility and readability.
  • A streamlined footer with reduced information overload.