Calo Website

Adchitects partnered with Calo Inc. to design and develop a multilingual website that combines cutting-edge technology with stunning visuals. The result of our joint efforts is an online presence that highlights Calo's unique offerings.

‍

Project Background

Adchitects partnered with Calo Inc. to revolutionize their online presence. Calo, a meal delivery service based in the Middle East, required a website that could effectively showcase their unique offerings, engage users interactively, and function seamlessly in both English and Arabic.

‍

Initial Client Challenge

Calo, a rising star in the Middle Eastern meal delivery service market, approached Adchitects with a significant challenge. Not only did the site lack the interactivity and visual appeal crucial for user engagement and customer conversion, it also struggled to present Calo's intricate range of meal plans and packages in an intuitive, easily manageable way. Furthermore, the existing site failed to effectively cater to Calo's diverse customer base, lacking seamless bilingual functionality to serve both English and Arabic-speaking markets.

They required a digital platform capable of showcasing their unique value proposition, scaling with their rapidly growing business, and maintaining top-notch performance across various devices and browsers.

‍

Project Duration

The Calo website project spanned approximately seven months, running from July 2023 to February 2024. This extended timeframe allowed us to thoroughly address each phase of the project, from initial discovery to final optimization. The duration reflected the complexity of the project, including the challenges of creating a fully bilingual site with advanced interactive features and animations. It also accommodated the iterative nature of our development process, allowing time for client feedback and refinements at each stage.

‍

Established Project Plan

Our project plan for Calo's website was meticulously structured to ensure efficient delivery and optimal results. We began with a discovery phase, including detailed briefings and workshops, to fully understand Calo's goals and requirements.

This was followed by a UX design phase where we created comprehensive wireframes for all pages. The UI design phase came next, starting with the homepage to establish the visual direction before moving on to other pages. We planned for parallel development work, with our developers beginning implementation as soon as designs were approved, allowing for an iterative, agile approach.

We scheduled regular check-ins with the client throughout the process, including weekly calls and impromptu discussions as needed. The final stages of our plan included thorough testing, SEO implementation, and performance optimization.

‍

Team Collaboration and Roles

The success of the Calo project was a testament to our team's collaborative spirit and diverse expertise. Roxana Goncerzewicz, as the lead UI Designer, spearheaded the visual direction, while Wojciech Roztocki supported her efforts and prepared crucial discovery workshops.

Yaroslav Rogovich, our Lead Developer, orchestrated the technical implementation, working closely with Maciej Cieszyński to bring the design to life across various pages. Krystian Rogalski contributed his development skills to specific subpages. Łukasz Lassota provided essential translation setup and technical support, ensuring the site's bilingual functionality.

Agata Gałka maintained our high standards through rigorous quality assurance, while Mateusz Kmieciak optimized the site for search engines.

This synergy of roles, from design conception to technical execution and optimization, allowed us to deliver a cohesive, high-quality product that exceeded the client's expectations.

‍

Challenges Faced

Our team encountered several challenges throughout the project. Creating a bilingual website that worked flawlessly in both left-to-right and right-to-left orientations was a primary concern. We also faced the task of developing highly interactive elements and animations that performed well on both desktop and mobile devices. Balancing high-quality visuals and animations with optimal website performance was another significant challenge.

‍

Project Plan and Its Execution

We implemented a comprehensive, collaborative approach. The process began with a discovery phase, involving detailed briefings and workshops to understand Calo's goals, requirements, and visual preferences. Our team then moved into UX design, creating wireframes for all pages to ensure a user-friendly structure. The UI design phase followed, starting with the homepage to set the visual direction. Each page was designed with a focus on interactivity and animation potential.

Throughout the development process, our developers worked closely with designers, implementing features as they were approved. We conducted thorough testing, including front-end reviews on a test environment, to ensure functionality and visual accuracy. The final stages involved SEO implementation and performance optimization to enhance speed and visibility.

‍

Project Results and Achievements

The culmination of our efforts resulted in a visually stunning, highly interactive website that effectively showcases Calo's offerings. We achieved seamless bilingual functionality, enhancing Calo's reach in both English and Arabic markets. The site boasts optimized performance across desktop and mobile devices, including complex animations. We created a flexible, easily modifiable structure for presenting various meal plan options. The enhanced SEO is poised to improve Calo's online visibility and reach.

‍

Tools and Frameworks Used

Our team leveraged a diverse set of tools and frameworks to bring Calo's vision to life. For the design phase, we utilized Figma for collaborative UI design and prototyping, while Miro facilitated our virtual discovery workshops and brainstorming sessions. Adobe Photoshop was employed to create and edit images, including those generated using AI for the meal generator feature. Adobe After Effects was crucial in creating animation mock-ups to effectively convey our ideas to the client before implementation.

On the front-end, we built the site using Next.js, a React framework that enabled us to create a fast, SEO-friendly site with server-side rendering. TypeScript was used to ensure type safety and improve code quality. Framer Motion, a production-ready motion library for React, powered our complex animations, allowing us to create smooth, interactive elements that worked across devices. Lenis Scroll was implemented to achieve smooth, custom scrolling effects, enhancing the overall user experience.

For the back-end, we chose WordPress as a headless CMS, leveraging its robust content management capabilities while decoupling it from the front-end for greater flexibility. GraphQL facilitated efficient, type-safe communication between the CMS and the front-end, allowing us to query only the necessary data.

We deployed the site on Vercel, taking advantage of its seamless integration with Next.js for optimal performance and easy continuous deployment. SendGrid was integrated to handle newsletter functionality, ensuring reliable email delivery for Calo's marketing efforts.

This combination of tools allowed us to create a high-performance, visually striking, and highly interactive website that met Calo's complex requirements while providing a seamless user experience in both English and Arabic.

‍

Innovation through Headless Technologies

Our approach to Calo's website was particularly innovative due to our use of headless architecture. It positioned Calo at the forefront of web technology, providing them with a scalable, future-proof solution that can easily adapt to changing needs and emerging technologies.

By employing WordPress as a headless CMS, we decoupled the content management system from the front-end presentation layer. This headless setup enabled us to deliver a lightning-fast, SEO-friendly site with the flexibility to create complex, animated user interfaces that a traditional WordPress theme couldn't achieve. The use of GraphQL for communication between the headless CMS and the front-end further enhanced performance by allowing precise, efficient data queries.

‍

Lessons Learned

This project provided valuable insights and learning opportunities for our team. We reinforced the importance of close collaboration between design and development teams throughout the project lifecycle. The value of designing UI components with animation in mind from the outset, rather than as an afterthought, became evident. We also learned the benefits of being flexible and open to direct communication with clients, even for impromptu discussions.

In addition, it's worth noting that the project honed our techniques for optimizing complex animations for both desktop and mobile performance. We developed strategies for creating visually impactful designs while maintaining site speed and performance. Lastly, we gained a deeper understanding of developer limitations and possibilities when it comes to implementing animations.

‍

Cross-Cultural Insights

Working with Calo, a client based in the Middle East, provided valuable insights into collaborating across cultural and geographical boundaries. The project enhanced our ability to create bilingual, culturally sensitive content and user interfaces. We also discovered that despite the geographical distance, frequent and transparent communication, including impromptu one-on-one calls, fostered a strong, productive relationship.

This experience has equipped us with the skills and cultural awareness necessary to successfully engage with clients from the Middle East and other regions, broadening our global reach as an agency.

‍

Changes in the Client's Organization

The implementation of the new Calo website brought about significant changes in the client's organization. The highly interactive and visually appealing site enhanced Calo's brand image, positioning them as a modern, tech-savvy company in the competitive meal delivery market. The bilingual functionality expanded their reach, allowing them to more effectively serve both English and Arabic-speaking markets from a single, cohesive platform.

The flexible structure we created for presenting meal plans and packages improved their ability to manage and showcase their offerings, potentially streamlining their internal processes for updating and maintaining their product lineup.

Additionally, the improved SEO and performance of the new site may have led to changes in their digital marketing strategies to capitalize on increased visibility and user engagement.

Overall, the new website provided Calo with a more powerful tool for customer engagement and business growth, likely prompting adaptations in their sales, marketing, and customer service approaches.

Our project deserves recognition for its innovative headless architecture, seamless bilingual functionality, and engaging visual design. It showcases our expertise in creating user-friendly, high-performance websites.

‍