Enhancing User Experience With Language Translation & Offline Connectivity
About Buildpeer
Industry: Real Estate (Construction)
Project Type: UX, Mobile & AI
Location: Mexico
Company Description: Buildpeer is a project management and team collaboration software for the construction industry.
Challenges
- Non-Spanish-speaking users and potential customers were experiencing difficulty using their web and mobile platforms.
- On-site users were unable to use their applications without a reliable internet connection.
Our Solution
1. Integrate Automatic Translation Capabilities
To enhance accessibility and improve the user experience for non-Spanish-speaking users of Buildpeer’s web and mobile platforms, we integrated real-time translation using artificial intelligence. Leveraging Google Translate and OpenAI, we developed a feature that automatically translates content based on the user’s language preference.
This solution was implemented across their Express.js backend, React.js web frontend, and Expo framework for the mobile app. Google Translate provides quick and accurate translations for common languages, while OpenAI delivers advanced, context-aware translations for more complex or less commonly supported languages.
Additionally, we extended the translation capability to voice note attachments, similar to WhatsApp’s voice notes but with enhanced multilingual support. When a user receives a voice note, the system uses OpenAI’s technology to convert speech to text, translate it into the user’s preferred language, and then convert the translated text back into speech. This ensures that users can hear voice messages in their language, significantly improving communication and engagement on the platform.
Process:
The text translation feature was implemented by setting up middleware in Express.js to detect the user’s language and dynamically translate server-rendered content. On the client side, the React and Expo apps were enhanced to handle language preferences, automatically translating UI components and user-generated content.
For voice note translation, OpenAI’s advanced speech recognition technology was used to convert voice notes into text. The text was then translated using either OpenAI for context-aware translations or Google Translate for common languages, ensuring accurate translation into the user’s preferred language. Finally, OpenAI’s text-to-speech capability converted the translated text back into speech, allowing users to hear the message in their language. This process was seamlessly integrated into the app’s existing framework to provide an uninterrupted user experience.
2. Add Offline Capability
To improve usability and reliability for mobile app users in the field, we added offline capabilities, enabling access to essential features without an internet connection. This was implemented within their Expo-based mobile app, allowing users to continue interacting with the app seamlessly, regardless of network availability.
We used Conflict-free Replicated Data Types (CRDTs) to power the offline functionality. CRDTs allow the app to handle data changes locally and automatically resolve conflicts during synchronization with the server once connectivity is restored. This approach ensures data consistency and reliability, providing users with a robust offline experience that maintains the integrity of their work in any network conditions.
Process:
We utilized local storage mechanisms and caching strategies to store critical data, such as user preferences, recent activities, and accessed content, enabling smooth operation during offline periods. Expo’s built-in offline support was leveraged and integrated with Buildpeer’s existing React Native components. Robust synchronization routines were set up to automatically sync user data and app content with the server when connectivity is restored, ensuring users always have the most up-to-date information without manual intervention.
Results
By combining Google Translate’s speed with OpenAI’s nuanced understanding of language, we ensured that Buildpeer users receive accurate and contextually appropriate text and voice translations, significantly enhancing platform usability and inclusivity.
The offline capabilities implemented in the mobile app improved the app’s resilience and provided a more reliable, user-friendly experience for onsite users, especially in areas with poor or intermittent connectivity.
Inspired by this success story?
Schedule a free consultation today and let’s discuss how we can help you achieve your goals too.