TORY BURCH | RESPONSIVE DESIGN
Designing for Arabic Readers
BACKGROUND:
In response to the growing demand for luxury goods in the Middle East, Tory Burch sought to expand its e-commerce offerings. While already having a brick-and-mortar in Dubai, the project aimed to enable online shopping for users in the Middle East. Undertaken in March 2020 amid the rising impact of COVID-19, the initiative aligned with the broader trend of ecommerce platforms strengthening their online and international presence.
ROLE:
✮ LEAD & SOLE DESIGNER, COLLABORATED WITH A TEAM: PRODUCT OWNER, PROJECT MANAGER, CHALOUB DEV TEAM
✮ RESPONSIBILITIES:
✮ RESEARCH & DOCUMENTATION OF BEST DESIGN PRACTICES FOR LTR COUNTRIES
✮ DESIGNED: PAGE LAYOUTS, DESIGN SYSTEM, USER FLOWS, PROTOTYPES, PRESENTATION DECKS
✮ CREATED BRAND GUIDELINES: TYPOGRAHY, MEDIA, ASSETS, COLOURS
✮ PREPPED FILES FOR DEV HANDOFF, MANAGED UAT
✮ DURATION: 4 MONTHS
✮ LAUNCHED JUNE 2020
✮ RESPONSIBILITIES:
✮ RESEARCH & DOCUMENTATION OF BEST DESIGN PRACTICES FOR LTR COUNTRIES
✮ DESIGNED: PAGE LAYOUTS, DESIGN SYSTEM, USER FLOWS, PROTOTYPES, PRESENTATION DECKS
✮ CREATED BRAND GUIDELINES: TYPOGRAHY, MEDIA, ASSETS, COLOURS
✮ PREPPED FILES FOR DEV HANDOFF, MANAGED UAT
✮ DURATION: 4 MONTHS
✮ LAUNCHED JUNE 2020
APPROACH:
Designing the website for a Middle Eastern audience posed challenges beyond a typical digital expansion. Given my unfamiliarity with Arabic, the challenge entailed adapting typography and page layouts for a different writing system, specifically the right-to-left (RTL) reading pattern. With the pandemic restrictions affecting user research and interviews, I focused on understanding these differences by examining Arabic websites for insight and relying on Google's Material Design Guideline for guidance, confirming accuracy with a native Arabic speaker.
MIRRORING:
When comparing languages that read from left to right (LTR), like English, and those that read from right to left (RTL), like Arabic, the main differences involve where content starts and the direction it moves. English reads from left to right, while Arabic reads from right to left, and this switch is called mirroring or the 101 rule.
While it may seem logical that all elements are mirrored when comparing a LTR to RTL website, not everything mirrors exactly when translating LTR to RTL. Various changes happen in the user interface, such as: text field icons move to the other side, navigation buttons reverse order, and directional icons mirror. However, even though RTL text aligns to the right, the translated text shouldn't be shown in reverse order. The chart and designs below help to depict which elements mirror and which don't.
While it may seem logical that all elements are mirrored when comparing a LTR to RTL website, not everything mirrors exactly when translating LTR to RTL. Various changes happen in the user interface, such as: text field icons move to the other side, navigation buttons reverse order, and directional icons mirror. However, even though RTL text aligns to the right, the translated text shouldn't be shown in reverse order. The chart and designs below help to depict which elements mirror and which don't.
TYPOGRAPHY:
I chose a font that would both match the stylistic characteristics of the Tory Burch fonts while prioritizing legibility. We partnered with native Arabic speakers to review designs, ensuring accuracy, readability, and thoughtful consideration of messaging translations.
DESIGN SYSTEM:
Due to time constraints, I create responsive designs for core screens and a design system simultaneously. We used Brad Frost's Atomic Design structure to organize our system, our approach aimed for scalability for future features or layouts.
RESULTS:
The successful launch of the site in July 2020 garnered positive feedback from both the product owner and executives. Due to it’s success, we were then asked to design the expansion of Tory Burch's digital presence into the Japanese market.