Product Overview

I designed and developed a user-centric website by conducting audience analysis, creating wireframes and prototypes in Figma, and building the front-end with HTML, CSS, Bootstrap 5, and JavaScript. Through usability testing and improvements, the project boosted brand awareness by 20% among new users, to see the source code please click here.


My Role: UX Designer, Frontend Developer

Responsibilities: UX Design, Graphic Design, Frontend Development, and Usability Tester

Project Duration: March 2021 - May 2021

About Details

The Problem

People in the local environment were wrongly accused or became victims of abuse from authorities or figures in power, often due to misunderstandings or bias, leading to significant personal and social repercussions. These individuals faced unjust treatment, which affected their reputation, mental well-being, and overall quality of life.

The Goal

Unprotected Victims wanted to provide a platform for those who have been wrongly accused or unfairly targeted, offering support, resources, and advocacy to help restore their dignity and promote justice.

Target Audience

Our target audience includes individuals who have been wrongly accused or unfairly targeted, as well as their families, legal advocates, and support organizations. We also seek to engage community leaders, policymakers, and the general public who are passionate about justice and willing to support efforts to raise awareness, provide resources, and drive meaningful change.

My Contribution

I contributed to the web project by conducting audience evaluation, creating persona cards, and structuring information architecture to enhance user experience. I designed wireframes to establish intuitive navigation and functionality, then developed the front-end using HTML, CSS, Bootstrap 5, and JavaScript. Additionally, I participated in both moderated and unmoderated usability studies, analyzing user interactions and feedback to generate a usability evaluation report, which guided design refinements and improved overall usability.

Evaluations

  1. Audience Profile Evaluation
  2. Usability Evaluation Report

Design

  1. Visual Design Guide
  2. Mockup Document
  3. Wireframe Document

Other Information

  1. Persona Cards
  2. Information Architecture