SpeakArabic
How can we increase the popular appeal of Arab culture and the Arabic language to students?
With the international grant-giving foundation, QFI, I led the creative reimaging and redesign of their Arab culture portal, “Speak Arabic.” Working closely with subject matter experts, I oversaw the visual “public relations” effort for an entire language.
Role: Project Lead | Timeline: 8 months | Tools: Miro, InDesign, XD
Project Overview
Business Analysis
Before jumping into a site redesign, I worked with internal stakeholders to establish exactly what needs this website would solve for which users. These discussions informed both the project scope and creative direction.
Synthesis
The main chunk of this project revolved around synthesizing advanced research topics on history, linguistics and public advocacy and figuring out to showcase that information an intuitive and approachable visual manner.
Design Choices
I decided the interface would “hide” nuggets of advanced information throughout the parallax pages to ensure the base content was age-appropriate for younger students in our audience segment while also providing more context for those who want more learn more.
Business Analysis & Synthesis
A large chunk of this project revolved around who the organization would like to build this website for. Many initial conversations focused on the overarching mission of the organization and how “SpeakArabic” would fill opportunity spaces in the realm of public/private K-12 education. After decided that the main target audience would be non-native speakers, parents and teachers, I began to work with subject matter experts in the field of Arabic language, Arab culture and language advocacy to build the content for the website.
Website audience based on organizational goals.
Wireframing session to synthesis information.
Initial site map (outlining what information will go where.)
Initial Design Prototypes
I worked closely both with subject matter experts and designers to ensure a solid relationship between the (sometimes advanced) content on the site and the interaction design for users. Instead of blocks of texts surrounding in-depth topics, the goal was to create an innovative page that would foster further exploration and ultimately build support for Arabic language education through audience-specific call-to-actions.
Artifact 1 | Hidden Info Nodes
Due to the plethora of content, the website would need to house, I developed a system for “info nuggets” to be hidden throughout the page. Using nodes to hide more information allows the user to quickly scan the images and texts on the page without the disruption of being bombarded with advanced-level content.
Artifact 2 | Culture Matrix
So much cultural and historic information is location-specific in the Arab world. To help with information saturation I designed wireframes that would be a matrix when describing cultural aspects of each area in the Arab world. Users could select from a list of cultural aspects (ie literature, music, cuisine) and then explore how each is represented in a specific region (ie North Africa, the Levant, the Gulf).
Artifact 3 | Call-to-Action
One main goal of the website was to act as an inspirational catalyst to cause a student to learn Arabic or a teacher/parent to advocate for starting a program. The site allowed clear action items to help users continue their advocacy journey off the page and in the real world.
Additional Graphics
Scroll down to see high-fidelity mock-ups designed by our creative agency.
Designed in partnership with IWS