Desarrollador Frontend & UI Designer

📍 Job Overview

Job Title: Desarrollador Frontend & UI Designer

Company: Be.change Consulting

Location: Colombia

Job Type: FULL_TIME

Category: Frontend Development & UI/UX Design

Date Posted: 2026-05-14

Experience Level: 2-5 Years

Remote Status: 100% Remote

🚀 Role Summary

• Design and construct high-fidelity user interfaces that support real-time, multimodal interactions, specifically focusing on voice and text-based communication within a dynamic platform.

• Integrate advanced frontend engineering capabilities with product design principles, enabling seamless prototyping directly in code and ensuring a consistent design system.

• Develop complex, interactive components optimized for real-time data flows, emphasizing performance, scalability, and low latency for audio processing and asynchronous data streams.

• Maintain and evolve the established design system (Chakra UI v3), ensuring visual and functional coherence across all platform features and promoting best practices through code and design reviews.

📝 Enhancement Note: This role is a hybrid of Frontend Development and UI/UX Design, with a strong emphasis on real-time applications and audio processing. The "code-first design" approach is a key differentiator, requiring candidates to be proficient in both coding and design principles. The focus on multimodal interactions (voice/text) and real-time data streams (WebSockets, Web Audio API) points to a sophisticated and technically demanding product.

📈 Primary Responsibilities

• Execute the end-to-end product design process for new Canvas functionalities, from initial conceptualization and user flow definition to final code implementation.

• Collaborate closely with product managers and engineering teams to define, validate, and refine user flows, ensuring optimal usability and visual consistency across the platform.

• Develop complex interactive components that dynamically react to real-time data streams, prioritizing high performance, scalability, and robust error handling.

• Implement client-side audio processing logic for voice applications, including efficient handling of audio buffers, real-time audio visualization, and proactive management of browser-based latency.

• Integrate and consume asynchronous data streams via WebSockets from the client-side, managing connection states, data synchronization, and efficient reconnections.

• Ensure stringent visual and functional consistency of the platform by leveraging and extending the established design system, specifically Chakra UI v3.

• Actively participate in code reviews and design critiques, contributing to the team's collective knowledge and promoting adherence to established frontend and design best practices.

• Document and maintain reusable design system components, ensuring their alignment with overall product strategy and technical standards.

📝 Enhancement Note: The responsibilities highlight a hands-on role where the individual is expected to contribute across the entire product development lifecycle, from ideation and design to implementation and maintenance of the design system. The emphasis on real-time audio and data processing indicates a need for deep technical understanding beyond standard UI development.

🎓 Skills & Qualifications

Education: Bachelor's degree in Systems Engineering, Software Engineering, Digital Design, or a related technical or design field.

Experience: Minimum of 3 years of demonstrable experience in frontend development, with a strong focus on React and real-time application development. Proven experience in UI/UX design and the implementation of real-time systems is essential.

Required Skills:

• React & Next.js: Advanced proficiency, including deep understanding of Server-Side Rendering (SSR), Static Site Generation (SSG), App Router functionalities, and performance optimization techniques.

• Chakra UI v3: Extensive experience in theme customization, component composition, and ensuring accessibility standards within the UI framework.

• Web Audio API: Solid command of audio buffer manipulation, real-time audio visualization, latency management, and microphone capture functionalities within the browser.

• WebSockets & Real-time Data: Expertise in managing real-time data streams from the client-side, including connection management, state synchronization, and robust reconnection strategies.

• Code-First Design & Prototyping: Demonstrated ability to design high-fidelity interfaces and prototype directly in code, bridging the gap between design and development efficiently.

• Git: Proficient in collaborative workflows, including feature branching, pull requests, and thorough code review processes.

• Spanish: Native or advanced proficiency for effective communication within the local team.

• Technical English: Intermediate to advanced proficiency, particularly for reading documentation and written technical communication.

Preferred Skills:

• Figma: Experience using design tools like Figma for collaborative workflows with product teams.

• Speech Recognition Technologies: Familiarity with APIs like the Web Speech Recognition API, Whisper, or similar voice processing technologies.

• Web Accessibility (WCAG): Knowledge of web accessibility standards and inclusive design principles.

• Agile Methodologies: Experience working within Agile frameworks such as Scrum or Kanban.

• Scalable Component Architectures: Exposure to microfrontend architectures or large-scale component system development.

📝 Enhancement Note: The requirement for "code-first design" is critical and suggests the company values developers who can translate design concepts directly into functional code with minimal handoff. The specific mention of Chakra UI v3 and Web Audio API indicates a need for specialized, up-to-date technical skills.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Demonstrate Real-time Implementation: Showcase at least one project that clearly illustrates your ability to handle real-time data streams (e.g., WebSockets, live updates) and complex frontend interactions.

• UI/UX Design & Code Cohesion: Present projects where you were responsible for both UI/UX design and frontend development, highlighting how you maintained design integrity through your code. A "code-first design" approach should be evident.

• Component System Contribution: If applicable, include examples of contributions to design systems, reusable component libraries, or instances where you customized an existing UI framework (like Chakra UI) extensively.

• Performance & Latency Optimization: Provide evidence of projects where you actively addressed performance bottlenecks or managed latency, particularly in areas related to audio processing or high-frequency data updates.

Process Documentation:

• Workflow Design & Optimization: Be prepared to discuss how you approach designing user flows for new features and how you optimize existing workflows for better usability and efficiency.

• System Implementation & Automation: Detail your experience in implementing frontend components and features, ensuring they integrate seamlessly with backend systems and contribute to overall platform automation.

• Measurement & Performance Analysis: Demonstrate how you measure the success of your UI/UX designs and frontend implementations, focusing on metrics related to user engagement, performance, and technical stability.

📝 Enhancement Note: For this role, the portfolio is paramount. It should not only showcase visual design skills but also deeply technical frontend implementation, especially concerning real-time features and audio APIs. The ability to demonstrate a "code-first design" approach and contributions to design systems will be highly valued.

💵 Compensation & Benefits

Salary Range: To be agreed upon (A convenir). Given the 100% remote nature, the 3+ years of specialized experience, and the technical demands in Colombia, a competitive salary range is expected. For a mid-level to senior frontend developer with UI/UX and real-time specialization in Colombia, a typical range could be between COP 8,000,000 to COP 15,000,000+ per month, depending on the depth of experience and specific skill alignment.

Benefits:

• 100% Remote Work: Full flexibility to work from any location within Colombia.

• Excellent Work Environment: Be part of a positive and supportive team culture.

• Young, Dynamic, and Committed Team: Collaborate with energetic colleagues who are passionate about their work and the company's mission.

• Growth Opportunities: Access to professional development and opportunities to expand your skillset.

• Participation in Innovative Projects: Contribute to cutting-edge projects that drive innovation in real-time communication and user experience.

Working Hours: Approximately 40 hours per week, with flexibility inherent in a remote, full-time position. The company operates within Colombian time zones (e.g., America/Bogota).

📝 Enhancement Note: The "A convenir" salary indicates negotiation is expected. The estimated range is based on typical market rates for experienced frontend developers in Colombia with specialized skills in real-time technologies and UI/UX, adjusted for a full-time, remote role. Benefits are standard for remote positions but highlight the team's culture and project innovation.

🎯 Team & Company Context

🏢 Company Culture

Industry: Consulting, Technology, Software Development. Be.change Consulting likely focuses on helping other businesses transform and innovate, potentially leveraging technology and user-centric design as key enablers. Their emphasis on "Be.change" suggests a mission-driven approach to client solutions.

Company Size: Not explicitly stated, but the mention of a "young, dynamic and committed team" and "opportunity of growth" suggests a growing company, possibly ranging from 50-250 employees, or a dedicated innovation unit within a larger firm. This size usually allows for significant individual impact and less bureaucratic processes.

Founded: Not specified, but the company's focus on innovation and modern technologies implies a relatively contemporary establishment or a forward-thinking approach within an established firm.

Team Structure:

• Operations Team Aspect 1: The "Desarrollador Frontend & UI Designer" will likely be part of a product development team, working alongside other engineers (backend, possibly QA), product managers, and potentially other designers. The team is described as "young, dynamic and committed," suggesting a collaborative and energetic atmosphere.

• Operations Team Aspect 2: This role reports to a lead developer, engineering manager, or product lead, depending on the specific organizational structure. Given the blend of design and development, there may be close collaboration with both design strategists and core engineering leads.

• Operations Team Aspect 3: Cross-functional collaboration is a core tenet of this role, requiring close interaction with product management for feature definition, engineering for integration, and potentially client stakeholders during the consulting process for understanding requirements.

Methodology:

• Operations Process 1: The company seems to value a data-driven approach to design and development, implied by the need for "real-time data" and "performance analysis." Decisions are likely informed by user feedback, analytics, and technical performance metrics.

• Operations Process 2: A strong emphasis on agile methodologies (Scrum/Kanban mentioned as desirable) suggests iterative development, continuous feedback loops, and adaptive planning to deliver value quickly and efficiently.

• Operations Process 3: The "code-first design" and "design system" approach points to a methodology focused on building robust, scalable, and maintainable user interfaces through well-defined components and coding standards.

Company Website: https://www.bechangeconsulting.net/

📝 Enhancement Note: Be.change Consulting appears to be a company that champions innovation and digital transformation, likely through cutting-edge technology solutions. The role itself is central to creating the user-facing experience of these solutions, demanding a blend of creative design and strong technical execution.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned at a Mid-Level to Senior Frontend Developer and UI Designer level. It requires a solid foundation of at least 3 years of experience and the ability to work autonomously on complex features, contribute to design systems, and handle specialized technical areas like real-time audio processing. The candidate is expected to be a key contributor, not just an executor.

Reporting Structure: The role likely reports into an Engineering Manager, Lead Frontend Developer, or Product Lead within a product development team. There will be significant collaboration with Product Managers and other engineers.

Operations Impact: The operations impact is direct and significant. This role is crucial for defining and delivering the user experience of Be.change Consulting's core platform. A well-designed and performant interface directly influences user adoption, satisfaction, and ultimately, the success of the consulting services delivered through the platform. The ability to prototype in code means faster iteration and quicker validation of new product ideas.

Growth Opportunities:

• Operations Skill Advancement: Deepen expertise in real-time technologies (WebSockets, Web Audio API), advanced React patterns (SSR, SSG, App Router), and complex UI/UX challenges for multimodal interfaces. Potential to evolve into a Tech Lead role for frontend or specialized UI/UX architect.

• Learning & Development: Opportunities to explore emerging technologies in voice recognition, advanced web performance, and potentially backend integration or full-stack development if desired. Exposure to diverse client projects within the consulting framework can broaden industry knowledge.

• Leadership Potential: With proven success and initiative, there's potential to mentor junior developers, lead design initiatives, or contribute to architectural decisions for future platform development.

📝 Enhancement Note: This role offers a unique opportunity for a developer who enjoys the intersection of design and code, especially within a technically challenging domain like real-time multimodal communication. The growth path leans towards technical specialization and leadership within product development.

🌐 Work Environment

Office Type: 100% Remote. This means the candidate will work from their home office or a co-working space, with no physical office requirement.

Office Location(s): The role is specifically based in Colombia, allowing candidates from across the country to apply. Time zones like America/Bogota are relevant for team synchronization.

Workspace Context:

• Collaborative Environment: While remote, the team culture is described as "young, dynamic and committed," suggesting active virtual collaboration through tools like Slack, video conferencing, and shared documentation platforms. Regular virtual meetings, code reviews, and design sessions will be part of the workflow.

• Operations Tools and Technology: Access to modern development tools and cloud-based collaboration platforms is a given. This includes version control systems (Git), communication tools, project management software, and potentially design collaboration tools. The company will likely provide necessary software licenses.

• Team Interaction: Opportunities for team interaction will be primarily through scheduled virtual meetings, asynchronous communication channels, and potentially virtual team-building activities. The emphasis on a good "ambiente laboral" (work environment) suggests efforts will be made to foster camaraderie despite the remote setup.

Work Schedule: The role is full-time, estimated at 40 hours per week. While specific working hours may align with Colombian business hours for team synchronization, remote work often offers a degree of flexibility in managing daily tasks, provided deadlines and collaborative needs are met.

📝 Enhancement Note: The 100% remote nature requires strong self-discipline, excellent communication skills, and comfort with virtual collaboration tools. The company's emphasis on a positive work environment suggests they invest in making remote work engaging and productive.

📄 Application & Portfolio Review Process

Interview Process:

• Process Step 1: Initial Screening: A recruiter or hiring manager will review your application, focusing on experience with React, Next.js, UI/UX, and any mention of real-time applications or audio processing. Be prepared to briefly articulate your experience with the key technologies listed.

• Process Step 2: Technical Assessment (Code/Design Challenge): This may involve a live coding session, a take-home assignment, or a detailed review of your portfolio. For this role, expect a challenge that tests your ability to implement a UI component with real-time data updates or audio interaction, or a design task that requires a "code-first" solution.

• Process Step 3: Technical Interview with Team: A deeper dive into your technical skills, problem-solving approach, and experience with specific areas like Web Audio API, WebSockets, and Chakra UI. You'll likely discuss past projects in detail and how you handled technical challenges.

• Process Step 4: Cultural Fit & Final Interview: An opportunity to discuss your working style, collaboration preferences, and how you align with the company's "young, dynamic, and committed" team culture. This may involve a discussion with a lead developer or product manager.

Portfolio Review Tips:

• Showcase Real-time & Audio: Prioritize projects demonstrating your expertise in real-time data handling (WebSockets) and Web Audio API. Even small demos or personal projects are valuable if they highlight these skills.

• Code-First Design Examples: Clearly label and explain projects where you adopted a "code-first design" approach. Show the progression from concept to coded implementation, highlighting your design rationale.

• Chakra UI Customization: If you have examples of heavily customizing Chakra UI or building reusable components with it, make sure these are prominent.

• Performance & Latency: Be ready to discuss how you approached performance optimization and latency management in your projects, especially concerning real-time updates or audio.

• Clarity and Conciseness: Ensure your portfolio is well-organized, with clear descriptions for each project, highlighting your specific role and contributions. Public GitHub repositories are highly recommended.

Challenge Preparation:

• Real-time UI: Practice building simple real-time UIs using WebSockets. Focus on state management and efficient updates.

• Web Audio API Basics: Familiarize yourself with basic Web Audio API concepts like creating audio contexts, nodes, and handling microphone input.

• Chakra UI Theming: Review Chakra UI's theming capabilities and how to extend or override default styles and components.

• Next.js Performance: Brush up on Next.js optimization techniques, including SSR, SSG, and image optimization.

• Problem-Solving: Prepare to discuss how you approach complex technical problems, break them down, and arrive at solutions, using examples from your experience.

📝 Enhancement Note: The interview process is designed to rigorously assess both technical depth and design sensibility. A strong, relevant portfolio is your most critical asset for this role, demonstrating practical application of the required skills.

🛠 Tools & Technology Stack

Primary Tools:

• React & Next.js: The core JavaScript framework for building modern, performant web applications. Advanced knowledge of Next.js features like SSR, SSG, and the App Router is crucial.

• Chakra UI v3: A popular, accessible component library for React. Proficiency in its theming, customization, and component composition is required.

• Web Audio API: A JavaScript API for processing and synthesizing audio in web applications, essential for the audio processing aspects of this role.

• WebSockets: A communication protocol providing full-duplex communication channels over a single TCP connection, vital for real-time data exchange.

Analytics & Reporting:

CRM & Automation:

Other Tools:

• Git: For version control and collaborative development workflows.

• Figma (Preferred): For design collaboration and handoff.

• IDE: Standard development environments like VS Code.

📝 Enhancement Note: The technology stack is modern and focused on real-time, interactive web applications. Proficiency in React, Next.js, and specific libraries like Chakra UI, alongside core web APIs like Web Audio and WebSockets, is non-negotiable.

👥 Team Culture & Values

Operations Values:

• Innovation & Transformation: A core value likely reflected in the company's mission to help clients "Be.change." This translates to a proactive approach to adopting new technologies and finding creative solutions.

• User-Centricity: Given the UI Designer aspect of the role, a strong focus on creating exceptional user experiences is paramount. This means prioritizing usability, accessibility, and intuitive design.

• Technical Excellence: The emphasis on advanced React, real-time processing, and code-first design indicates a value placed on robust, scalable, and high-performing technical solutions.

• Collaboration & Agility: The description of a "young, dynamic and committed team" suggests a culture of teamwork, open communication, and adaptability, likely supported by agile methodologies.

Collaboration Style:

• Cross-Functional Integration: The role necessitates close collaboration between design and engineering. Expect active participation in cross-functional team meetings, design reviews, and joint problem-solving sessions.

• Process Improvement: A culture that encourages feedback and continuous improvement. This applies to both the design system and development workflows, where ideas for optimization are welcomed.

• Knowledge Sharing: In a dynamic team, sharing knowledge through code reviews, documentation, and informal discussions is likely a key aspect of how the team stays aligned and grows.

📝 Enhancement Note: The company culture appears to foster innovation, user focus, and technical rigor within a collaborative and agile environment. Candidates who thrive in such settings and are passionate about creating impactful digital experiences will be a good fit.

⚡ Challenges & Growth Opportunities

Challenges:

• Real-time Multimodal Complexity: Effectively designing and implementing user interfaces that handle both voice and text input/output in real-time, ensuring low latency and a seamless user experience.

• Code-First Design Execution: Successfully balancing the demands of high-fidelity design with the practicalities and constraints of direct code implementation, ensuring both aesthetic quality and technical robustness.

• Design System Maintenance & Evolution: Keeping the Chakra UI v3-based design system up-to-date, scalable, and consistent across a growing platform, while also incorporating new design patterns and functionalities.

• Remote Collaboration Effectiveness: Maintaining strong communication, alignment, and team cohesion in a fully remote setting, especially when dealing with complex technical and design challenges.

Learning & Development Opportunities:

• Specialized Real-time Technologies: Deepen expertise in Web Audio API, advanced WebSocket patterns, and potentially emerging real-time communication protocols.

• Advanced Frontend Architectures: Gain experience with cutting-edge Next.js features, potential microfrontend implementations, and large-scale component system design.

• Voice UI/UX Design: Explore best practices and user experience considerations for voice interfaces, potentially through exposure to speech recognition technologies.

• Cross-Disciplinary Skill Development: Enhance skills in both advanced frontend engineering and sophisticated UI/UX design, becoming a highly versatile professional.

📝 Enhancement Note: The primary challenges revolve around the technical complexity of real-time multimodal interfaces and the unique demands of the "code-first design" approach. These challenges also present significant growth opportunities for ambitious professionals.

💡 Interview Preparation

Strategy Questions:

• Operations Strategy: "Describe your process for designing and implementing a new feature that involves real-time data updates and user interaction. How do you balance design fidelity with technical feasibility, especially when prototyping in code?" (Focus on your workflow, decision-making, and how you bridge design and development.)

• Collaboration & Stakeholder Management: "How do you typically collaborate with product managers and other engineers when working on a complex UI feature? Walk me through an example where you had to reconcile differing opinions on design or implementation." (Highlight your communication skills and ability to work cross-functionally.)

• Problem-Solving: "Imagine a scenario where users are reporting significant latency issues with voice input on our platform. How would you approach diagnosing and resolving this problem, considering both frontend and potential backend factors?" (Demonstrate your analytical skills, systematic approach, and knowledge of relevant technologies.)

Company & Culture Questions:

• Company Operations Culture: "Based on what you've learned about Be.change Consulting and this role, what aspects of our culture and mission resonate most with you, and how do you see yourself contributing to them?" (Show you've researched the company and understand its values.)

• Operations Team Dynamics: "Describe your ideal team environment for a remote frontend/UI role. How do you ensure you stay connected and productive with your colleagues?" (Align your preferences with their described team culture.)

• Operations Impact Measurement: "How do you measure the success of your UI/UX designs and frontend implementations? Give an example of a project where you used data or user feedback to drive improvements." (Focus on metrics, user feedback, and tangible results.)

Portfolio Presentation Strategy:

• Case Study Structure: For key projects, structure your presentation like a case study: Problem -> Your Solution (Design & Code) -> Impact/Results. Clearly articulate the challenges you faced and how you overcame them.

• Metrics & ROI: Quantify the impact of your work whenever possible. For example, "Improved user engagement by X%," "Reduced load times by Y seconds," or "Streamlined X workflow, saving Y hours per week."

• Interactive Demonstration: If possible, be prepared to demo a live version of your project or a functional prototype. For this role, showing a real-time interaction or a well-crafted component from Chakra UI would be highly impactful.

• Code-First Showcase: Explicitly point out elements in your portfolio that demonstrate your "code-first design" capabilities and your mastery of tools like React, Next.js, and Chakra UI.

📝 Enhancement Note: Preparation should focus on showcasing practical application of the required skills, especially in real-time systems and code-first design. Be ready to discuss your thought process, problem-solving strategies, and quantify the impact of your work.

📌 Application Steps

To apply for this Desarrollador Frontend & UI Designer position:

• Submit your application through the provided link on join.com.

• Tailor your Resume: Highlight your experience with React, Next.js, UI/UX design, and any projects involving real-time data processing, Web Audio API, or WebSockets. Use keywords from the job description.

• Curate Your Portfolio: Ensure your portfolio prominently features projects that demonstrate your "code-first design" approach, your proficiency with Chakra UI v3, and your experience with real-time applications. Include links to live demos or public GitHub repositories.

• Prepare Your Pitch: Be ready to articulate your experience with the core technologies and your understanding of the role's unique blend of design and development during initial screenings.

• Research Be.change Consulting: Understand their mission and how their consulting services leverage technology. This will help you tailor your responses during interviews and demonstrate your alignment with their company values.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.