Save the Water™

Web design
Client name
DEVICE PLATFORM
PROJECT YEAR
MY ROLE
Save the Water™
Responsive Website
Apr 2023
UX/UI Designer

Project Overview

To redesign the existing Save the Water™ website, focusing on improving its user experience, user interface design, and information architecture. The aim is to enhance user engagement, improve content quality, and ultimately increase public awareness and action regarding water conservation.

This is some text inside of a div block.

Problem

Design 2023 Summer eCamp Page

  • Problem 1: Capturing the Attention of the Target Audience (middle school students)
  • Problem 2: Creating an Effective Call-to-Action for Sign-ups

Re-design Contact Us Page

  • Problem 1: Simplifying User Navigation

Re-design Navigation and Footer

  • Problem 1: Simplifying User Navigation and Footer
  • Problem 2: Optimizing the Navigation content

Update the Partnership Section on the Page

  • Problem 1: Deciding the order of Partnerships to Showcase
  • Problem 2: Creating Effective Visuals for the Partnerships

Design What We Do Article Page

  • Problem 1: Keeping Readers Engaged
  • Problem 2: Offering Value Through High-Quality Content

Design Leadership Team Page

  • Problem 1: Showcasing Leadership Without Being Overly Promotional
  • Problem 2: Deciding on the Level of Detail to Include for Each Group Directors
  • Problem 3: Ensuring the Design Aligns with the Brand Image

Re-format the 2022 Annual Report

  • Problem 1: Making the Report Visually Appealing
  • Problem 2: Simplifying Complex Data or Statistics
  • Problem 3: Making it Easy for Stakeholders to Find Relevant Information
  • https://www.flipsnack.com/E58AF85569B/2022-stw-annual-report/full-view.html

Co-design the 2023 Marina Bay Invitation

  • Problem 1: Conveying All Necessary Event Details Concisely
  • Problem 2: Designing the digital campaign for invitation

Design the Event Page with Ticket Order Section

  • Problem 1: Ensuring a Smooth Ticket Ordering Process
  • Problem 2: Providing All Relevant Event Details
  • Problem 3: Offering Multiple Payment Options

By identifying these potential problems early on, you can approach the project in a more organized and thoughtful manner, thereby increasing your chances of success.

Project Goals

Focus on several key areas to improve user experience, accessibility, and content quality.

Research and Analysis

  1. User Research: Conduct surveys, interviews, or usability tests to understand what users want, their pain points, and how they currently navigate the website.
  2. Stakeholder Interviews: Speak with stakeholders to understand business goals, limitations, and key metrics for success.
  3. Competitive Analysis: Review similar websites or services to identify best practices and gaps in the current website.
  4. Content Audit: Analyze existing content to determine what is outdated, irrelevant, or redundant.

Planning

  1. User Personas and User Stories: Create user personas to guide the design process and develop user stories to outline key tasks users will accomplish on the site.
  2. Information Architecture: Organize the content and functionalities into a logical structure. Create sitemaps and wireframes as visual aids.
  3. Design Principles: Define design principles that will guide the look and feel of the website, such as color schemes, typography, and grid systems.
  4. Accessibility Plan: Make sure to integrate accessibility features from the beginning, like text-to-speech capabilities, keyboard navigation, and color contrast.

Design

  1. Mockups and Prototypes: Design high-fidelity mockups and create interactive prototypes to visualize the end product.
  2. User Interface: Develop the visual elements like buttons, menus, and input fields, ensuring they align with the established design principles.
  3. Micro-interactions: Add subtle animations and transitions to make the interface more engaging and informative.

Development and Testing

  1. Front-end Development: Work with developers to implement your designs, or use a design-to-code tool if you are capable of doing it yourself.
  2. Usability Testing: Perform tests with real users to identify any usability issues. Iteratively improve the design based on the feedback.
  3. Performance Testing: Ensure that the website loads quickly and performs well across various devices and browsers.
  4. Accessibility Testing: Use tools and manual checks to confirm the website meets accessibility standards like WCAG 2.1.

Launch and Monitor

  1. Deployment: Coordinate with developers and stakeholders for the launch.
  2. Post-launch Analytics: Track key performance indicators (KPIs) like user engagement, bounce rate, and conversion rates to measure the redesign's success.
  3. Iterate: Continue to make data-driven changes and improvements to the website.

This comprehensive approach ensures that the redesigned website not only looks modern and appealing but is also user-friendly, accessible, and aligned with the objectives of the water protection program.


Ideation Design:

1. e Summer camp analysis
Identified problem on the old version

Development:

1. e Summer camp

Accessibility testing

Evaluation the web accessibility
Access to the Website Page

Other Projects

Let's work together!

As a UX/UI Designer, I know that collaboration fosters the best results. Let's combine our unique talents and ideas to craft intuitive, innovative user experiences. Together, we can create products that truly resonate with users and elevate their digital journey.

Let's work together!

As a UX/UI Designer, I know that collaboration fosters the best results. Let's combine our unique talents and ideas to craft intuitive, innovative user experiences. Together, we can create products that truly resonate with users and elevate their digital journey.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.