Bilingual Landing Page For Chillz App

Chillz N.L.E Ltd. needed a modern and professional bilingual landing page to showcase their application. My objective was to design and build a responsive landing page to help Chillz N.L.E Ltd. achieve its goals. The final deliverable for this project was a fully functional, responsive landing page.

Phase 1: Content Creation

To kickstart the project, the client provided the written content and assets that would be referenced and incorporated when designing the landing page. Together, we determined the most logical order in which we would present the information and what visuals could best communicate each feature.

Phase 2: Design & Development

I looked for design inspiration from Chillz's upcoming mobile app design to contribute to a cohesive brand representation across all mediums. I created mockups that showcase the app's features and decorated the landing page with circles and blobs to mimic the app's main screen. The client wanted prominent, alternating animations that would wow his users. This was initially achieved with the Chillz Card's animation. I wanted to convey that the Chillz Card is a physical object that can actually be touched and experienced in the real world, so I gave it the most prominent animation and used 3D transforms on scroll to communicate its physicality.

‍

Phase 3: Bilingual Functionality & Optimization

Chillz is based in Tel Aviv, Israel and primarily serves that market, thus both English and Hebrew versions were necessary to make the page accessible to speakers of both languages. I made a language switcher in the header section that would switch between the two versions, with English as the default. Creating the Hebrew version first required me to change most of the content orientation to right to left. Not only is Hebrew read from right to left, but even the images and buttons are viewed from right top to left bottom for right to left readers. Once the layout was adjusted, I replaced all the English text with Hebrew text. Both pages were optimized for multiple desktop screen sizes as well as tablet and mobile. We did however run into one issue before finalizing the project. The layout was not displaying correctly for Mac users on Safari. After some trial and error, I found that the problem was that almost all of the image wrappers were set to flex stretch vertical, which the Safari browser interprets literally. This issue was quickly fixed by changing the image wrappers' layout to flex center align, making for a nearly universal experience across all major web browsers.

Chillz now has a beautiful landing page with engaging animations that will inform new users and drive app downloads.

I love what we've achieved. Great work, Matthew.
- Yoav M.