About This Project

Backstory & Purpose:

• Berikan Protein Initiative is a non-profit movement focusing on improving nutrition and eradicating fish-based malnutrition in Indonesia. The movement's most important product is Protein Meter, a web app that measures daily consumption adequacy.

• This is one of the projects I worked on during my UI/UX Designer internship at Berikan Protein. The project produced fantastic results, reaching 22,000+ users in 34 provinces and 348 cities/regions in Indonesia from February to April 2022.

Problem:

• The Protein Meter was one of Berikan Protein's most important products because it provides the basic data for other steps, such as compiling malnutrition solutions and exploring collaborations.

• However, its old version was considered less than satisfactory; the calculation needs to be fixed, and much information needs to be added or updated.

Solution

1). User Research:

• For this redesign project, I conducted direct interviews and focus group discussions with Berikan Protein's owners and management to understand the client's needs.

• The user research results produced several important points for redesigning this web app, such as the fact that users can download the result card after completing the assessment and that web app access must be responsive and concise without the user having to log in.

2). Sitemap:

• From the insights gained in the User Research, I created a Sitemap that explained that this website needed 12 pages in two main categories: Protein Minimum Map & Calculate Daily Protein Needs.

• From the 12 pages, it was again pioneered into dozens of sections and subsections presenting detailed information such as Personal Data Forms and Protein Consumption Card.

• The Sitemap can be seen HERE.

3). Hi-Fi & Prototypes:

• I skipped the wireframing stage based on time considerations and client approval and directly went to the Hi-Fi Design & Prototype stage, which created 26 responsive UI Design pages in desktop and mobile views results.

• I chose the blue color palette, sans serif font, and flat illustrations to represent the Berikan Protein logo and the energy of the fresh & trusted movement, which promotes the empowerment of rich protein from fish.

• The Prototypes can be seen HERE.

4). Development & Testing:

• The developer team developed the web app using a proper tech stack based on the planned Hi-Fi Design and Prototype.

• The Protein Meter web app can be seen HERE.

For connections, portfolios, or projects/collaborations, you can find me on Dribbble or other platforms (Instagram, LinkedIn, & TikTok) via linktr.ee/ilhamf08. Thank you!