Web-App Design — Instant Translation Video Conferencing
App Demo
Summary
WeConnect is an instant translation video conferencing web app tackling communication barriers in Canada’s multicultural environment. Designed by a team of 4 UX/UI designers, it evolved from user research into an intuitive interface, refined through usability testing. A comprehensive style guide and asset inventory ensured a smooth developer handoff for seamless implementation.
Role
- Project Manager | UX/UI Designer
Timeline
- January — April 2024
Key Skills
- User Research
- UX/UI Design
- Usability Testing
- GUI Assets
Overview
Pain Point
Canada is a multilingual country where people frequently collaborate across different languages. However, 44% of survey respondents struggle with language barriers during video calls. Popular platforms lock transcription behind paywalls and have a steep learning curve, limiting accessibility.
Solution
WeConnect offers a modern and user-friendly design with instant translation and collaborative tools, boosting productivity and reducing language misunderstandings.
Key Takeaway
"Creating a well-organized, detailed asset inventory and maintaining clear communication are key to ensuring a seamless handover to developers."
User Research
A survey of 31 respondents was conducted to analyze video conferencing usage, transcription needs, and preferences for an all-in-one platform. 80% of respondents use Zoom, making it a key reference for secondary research. To gain deeper insights, online reviews and user experience analysis were conducted to identify both strengths and weaknesses. These findings serve as valuable references in designing the collaborative app.
- Speech-to-Text Over Live Translation — Preferred to reduce chaos and improve meeting follow-ups.
- Integrated Collaboration Tools — High demand for whiteboards, documents sharing, and polling to enhance collaboration.
- Privacy Concerns — Respondents emphasize data security and the need for protected information storage.
These insights guided a focus on intuitive design and seamless collaboration. Learn more from the User Findings Report.
User Personas
User Story Mapping
The user story map for WeConnect was essential in defining user needs, prioritizing features, and shaping the Minimum Viable Product (MVP). By mapping key activities for business professionals, students, and individuals, the team identified critical workflows such as translation, video conferencing, collaboration tools, and account management.
It clarified user journeys and provided a shared framework for designers and developers, ensuring seamless navigation and efficient feature development.
Style Guide
WeConnect’s design is crafted to feel modern, professional, and easy to use. The gradient color palette, blending deep indigo and royal blue, creates a forward-thinking aesthetic that sets it apart from traditional video conferencing apps. This choice not only enhances visual appeal but also reinforces a sense of trust and innovation.
The rounded buttons and smooth UI elements make interactions feel intuitive, ensuring a seamless experience. At the heart of the brand, the WeConnect logo, inspired by a paperclip, symbolizes connection and collaboration, reflecting the app’s core purpose of bringing people together effortlessly. Every design detail works together to make communication feel stylish, simple, and effective.
Detailed Asset Inventory
A comprehensive asset inventory was created and delivered to developers after the design process, ensuring all design elements were systematically organized. This inventory included essential assets such as icons, typography, color codes, and layout specifications. Accompanied by detailed style guides and precise specifications, it ensured consistency throughout the development process, minimizing errors and reducing the need for clarifications or rework.
Maintaining a transparent workflow during the design process facilitated a seamless transition from design to development, enabling the delivery of a polished and cohesive final product.
Explore Details
App Highlights
1. Video Conferencing
WeConnect's core feature is video conferencing, designed for seamless and effortless meeting creation to connect with others. Large action buttons on the home page make it easy to start a meeting with a simple checkbox setup and invite participants via a shareable link. Scheduled meetings are displayed on the home screen for better planning. The interface also enables smooth screen-swiping to switch between different profile display modes.
The platform also includes in-app messaging for real-time communication, enabling seamless collaboration before, during, and after meetings while keeping discussions centralized.
2. Instant Translation
To break language barriers, WeConnect integrates instant translation with speech-to-text transcription in video conferencing. Instead of speech-to-speech translation, speech-to-text is used based on user feedback, ensuring clarity and reducing confusion. This feature provides real-time captions, helping participants follow discussions smoothly.
After the meeting, detailed translated transcripts remain accessible, ensuring no important details are missed. By minimizing communication gaps, instant translation makes meetings more inclusive and effective.
3. Collaborative Tools
WeConnect brings all essential collaboration tools into one seamless video conferencing experience, enhancing productivity and engagement.
- Virtual Whiteboard — Brainstorm visually, sketch ideas, and collaborate in real time for interactive discussions.
- Live Polls & Surveys — Gather instant feedback, make quick decisions, and keep meetings dynamic.
- Screen Sharing — Present ideas, walk through documents, or provide live demonstrations effortlessly.
- File Sharing — Instantly exchange important documents, images, and resources without switching between apps.
By integrating these tools within a single platform, WeConnect eliminates the hassle of juggling multiple apps, streamlining teamwork and ensuring meetings stay interactive and efficient.
