Shirin's logo
Shirin's logo
Shirin's logo

Bilingual Archive

Category:

Web Design

Duration:

10 weeks

This bilingual archive project blends cultural sensitivity with modern usability, creating a digital space where Arabic and English coexist seamlessly.

Designed for the Lebanese Diaspora Center, it allows users to explore historical newspapers, documents, and family records with ease.

The layout balances institutional trust with a clean, contemporary visual identity, making archival research more accessible to both scholars and community members.

This bilingual archive project blends cultural sensitivity with modern usability, creating a digital space where Arabic and English coexist seamlessly.

Designed for the Lebanese Diaspora Center, it allows users to explore historical newspapers, documents, and family records with ease.

The layout balances institutional trust with a clean, contemporary visual identity, making archival research more accessible to both scholars and community members.

This bilingual archive project blends cultural sensitivity with modern usability, creating a digital space where Arabic and English coexist seamlessly.

Designed for the Lebanese Diaspora Center, it allows users to explore historical newspapers, documents, and family records with ease.

The layout balances institutional trust with a clean, contemporary visual identity, making archival research more accessible to both scholars and community members.

Project Overview

Project Overview

The Challenge: Lebanese diaspora newspapers in Arabic were difficult to access and search, especially for Arabic-speaking users.


The Product & Platform: A bilingual digital archive, designed for desktop.


The Users & Their Needs: Researchers, students, and diaspora members needed easier ways to explore materials in both Arabic and English, with culturally intuitive navigation and search.


My Role & Team: I was the sole UX/UI designer, working closely with backend developers and archivists to align design with content, metadata, and platform needs.

The Challenge: Lebanese diaspora newspapers in Arabic were difficult to access and search, especially for Arabic-speaking users.


The Product & Platform: A bilingual digital archive, designed for desktop.


The Users & Their Needs: Researchers, students, and diaspora members needed easier ways to explore materials in both Arabic and English, with culturally intuitive navigation and search.


My Role & Team: I was the sole UX/UI designer, working closely with backend developers and archivists to align design with content, metadata, and platform needs.

The Challenge: Lebanese diaspora newspapers in Arabic were difficult to access and search, especially for Arabic-speaking users.


The Product & Platform: A bilingual digital archive, designed for desktop.


The Users & Their Needs: Researchers, students, and diaspora members needed easier ways to explore materials in both Arabic and English, with culturally intuitive navigation and search.


My Role & Team: I was the sole UX/UI designer, working closely with backend developers and archivists to align design with content, metadata, and platform needs.


 My Approach


As the sole designer, I led everything from research to final UI handoff.

Approach Highlights:

  • Interviewed Arabic-speaking users and researchers

  • Created quick personas to guide user goals and needs

  • Audited the old archive and ran a heuristic evaluation and studied strong examples

  • Sketched bilingual flows and wireframes

  • Prototyped both English and Arabic versions in Figma

  • Collected feedback and iterated across 3 rounds

  • Shared design specs and assets with the dev team

Tools: Figma, Adobe CC, Google Workspace

As the sole designer, I led everything from research to final UI handoff.

Approach Highlights:

  • Interviewed Arabic-speaking users and researchers

  • Created quick personas to guide user goals and needs

  • Audited the old archive and ran a heuristic evaluation and studied strong examples

  • Sketched bilingual flows and wireframes

  • Prototyped both English and Arabic versions in Figma

  • Collected feedback and iterated across 3 rounds

  • Shared design specs and assets with the dev team

Tools: Figma, Adobe CC, Google Workspace

Defining the Problem

Defining the Problem

Through early audits, interviews, and competitive analysis, it became clear that users were struggling on multiple levels. Over time, these issues eroded trust in the platform.


Core Problem:

How might we design a bilingual interface that feels intuitive, culturally familiar, and aligned with institutional branding—while working within technical and layout constraints?

Through early audits, interviews, and competitive analysis, it became clear that users were struggling on multiple levels. Over time, these issues eroded trust in the platform.


Core Problem:

How might we design a bilingual interface that feels intuitive, culturally familiar, and aligned with institutional branding—while working within technical and layout constraints?

Ideation and Lo-fi wireframes

Ideation and Lo-fi wireframes

I began by exploring multiple interaction patterns for switching languages, browsing content, and navigating archival materials. Early concepts included toggle-based language switching, all-in-one encapsulating layouts, and soft animated transitions to help users adjust between directions.


I sketched and iterated user flows and built wireframes in both English and Arabic. I tested directional alignment, spacing, and hierarchy to ensure both versions felt native and balanced. My background in visual storytelling helped me design layouts that were not only usable, but also carried emotional clarity through typography, contrast, and rhythm.


Designs were refined across several rounds of internal feedback.

I began by exploring multiple interaction patterns for switching languages, browsing content, and navigating archival materials. Early concepts included toggle-based language switching, all-in-one encapsulating layouts, and soft animated transitions to help users adjust between directions.


I sketched and iterated user flows and built wireframes in both English and Arabic. I tested directional alignment, spacing, and hierarchy to ensure both versions felt native and balanced. My background in visual storytelling helped me design layouts that were not only usable, but also carried emotional clarity through typography, contrast, and rhythm.


Designs were refined across several rounds of internal feedback.

Outcomes & Reflections

Outcomes & Reflections

The Final Design:

The new bilingual archive is easier to navigate for both Arabic and English users. It feels clearer, more welcoming, and better aligned with the archive’s goals. Key actions like browsing and searching are now more intuitive.


Impact:

Feedback from users and collaborators showed that the design felt more inclusive, especially for Arabic speakers. The visual clarity and updated structure also made it easier for the archive team to manage and grow the site.


Reflection:

This project taught me a lot about balancing user needs with technical realities. I worked closely with backend developers and archivists to align design goals with what was feasible. It also reminded me to leave room for gradual implementation—good design sometimes means pacing things so the whole team can move forward together.

The Final Design:

The new bilingual archive is easier to navigate for both Arabic and English users. It feels clearer, more welcoming, and better aligned with the archive’s goals. Key actions like browsing and searching are now more intuitive.


Impact:

Feedback from users and collaborators showed that the design felt more inclusive, especially for Arabic speakers. The visual clarity and updated structure also made it easier for the archive team to manage and grow the site.


Reflection:

This project taught me a lot about balancing user needs with technical realities. I worked closely with backend developers and archivists to align design goals with what was feasible. It also reminded me to leave room for gradual implementation—good design sometimes means pacing things so the whole team can move forward together.

Final protoype