CAMFEBA

Page Renovation Design • Development

Role

UX/UI Designer • Developer

Timeline

August 1, 2022

Tools

Figma

Adobe Illustrator

Adobe Photoshop

Project Overview

CAMFEBA is an autonomous and independent federation of employers and business associations recognized and registered with the Ministry of Social Affairs, Labor, Vocational Training, and Youth Rehabilitation of Cambodia. As a single federation representing various entities, they desired a website that was accessible and easy to navigate, providing users with comprehensive information about themselves, news articles, projects, and upcoming events. It was my honor to create a user-centric design that prioritizes simplicity and elegance.

Challenges

Due to CAMFEBA having a lot of information to convey to Cambodians, they faced difficulties in organizing, aligning, and displaying it all in a single website, particularly when it came to showcasing upcoming events, articles, and sponsors on the homepage.

Displaying numerous pieces of information on a homepage poses a significant challenge for me as a designer. My primary objective is to carefully arrange and organize the content in a way that ensures the most critical and relevant information catches the user's attention first. This involves conducting extensive user interviews to understand the needs and preferences of our target audience and subsequently tailoring the design to meet those needs. Defining the hierarchy of elements and allocating sufficient space for each item while maintaining a coherent overall structure proves to be a complex task requiring careful consideration and planning.

After defining the important information, we determined the order in which it would appear. However, arranging the sitemap and information architecture of the website proved to be another challenge. CAMFEBA has a vast array of features and information, so creating a suitable architecture was crucial. We spent a considerable amount of time brainstorming and aligning the sitemap and information architecture before moving on to the wireframing stage.

Creating a wireframe based on a well-designed sitemap and information architecture that I had previously defined wasn't too challenging. However, what proved to be more time-consuming was conducting usability testing with both internal and external teams to gather feedback, refine, and improve the design to ensure that it met the needs of all users. This involved asking for input from real users, testing the design with them, and making adjustments until it effectively addressed their pain points.

Innovative Solutions

All the challenges have taught me a lot, and I have applied various solutions to renovate CAMFEBA's website. As a result, the website has become user-friendly and effectively addresses all the previous pain points, while also aligning with CAMFEBA's goals and objectives.

I have conducted interviews with CAMFEBA to determine the priority and importance of various pieces of information. Through a series of meetings, I have been able to eliminate unnecessary information and identify the most useful data to include on the website.

Based on the old website, I sorted out the sitemap and information architecture and tried to renovate it by modifying and adding new features or information that CAMFEBA wanted. To do this, I conducted several stages of the design process, including conducting interviews, observations, brainstorming, card sorting to select only the most important features, and information architecture with a new version of it.

Creating a wireframe based on the updated information architecture and prototyping it, I then showcased the high-fidelity prototype to stakeholders and refined it based on any issues regarding user flow or incorrect functionality. Once everything was finalized, the next step was to design the high-fidelity UI by applying color, images, and all contents (information that I had previously sorted and organized in the first solution). After completing this step, I created another prototype and conducted usability testing and refining. This process is an iteration.

Special Thank

I would like to take this opportunity to thank the team that helped me achieve this project smoothly without any obstacles. Without all of you, this project couldn't have been as successful as I had expected.