Design Engineer (UI, Frontend)

📍 Job Overview

Job Title: Design Engineer (UI, Frontend)

Company: Octopus Energy Group

Location: London, England, United Kingdom

Job Type: Full-time

Category: Frontend Engineering / Design Technology

Date Posted: 2026-09-17

Experience Level: Mid-Level (2+ years)

Remote Status: Hybrid

🚀 Role Summary

• This role sits at the crucial intersection of visual design and front-end development, focusing on creating polished, accessible, and production-ready software for web applications and marketing experiences.

• You will be instrumental in evolving a shared component library into a robust design system, ensuring visual consistency across both B2B (Octopus Fleet) and B2C (Electroverse) platforms.

• The position requires a hybrid practitioner who can translate early design concepts, prototypes, and wireframes into high-quality, on-brand code.

• A key aspect of the role involves refining micro-interactions, motion, and overall visual polish to maintain design integrity even under tight timelines, utilizing AI-assisted development tools for enhanced efficiency.

📝 Enhancement Note: This role is positioned as a "Design Engineer" or "Hybrid Practitioner," indicating a need for individuals who possess a strong duality of skills in both UI design principles and front-end coding. The emphasis on bridging design and engineering suggests a critical role in the product development lifecycle, particularly for B2B and B2C platforms within the eMobility sector. The mention of AI-assisted tools highlights a forward-thinking approach to development workflows.

📈 Primary Responsibilities

• Concept, prototype, and build web experiences, including public-facing marketing pages, landing pages, and core application UI for Octopus Fleet (B2B) and Electroverse (B2C).

• Contribute to the development and maturation of a shared component library, transforming it into a comprehensive design system by building reusable components and establishing best practices.

• Enhance user experience through the refinement of micro-interactions, animations, and visual polish within web applications, ensuring a high standard of craft.

• Translate design inputs, ranging from rough Figma sketches to early prototypes, into clean, well-structured, and accessible production code.

• Act as a key liaison between design, product management, and engineering teams, ensuring seamless integration of design intent into shipped software.

• Leverage AI-assisted development tools (e.g., Cursor, Claude, Copilot) to accelerate exploration, development, and delivery cycles.

• Collaborate with designers to maintain and elevate UI design fundamentals, including composition, spatial layout, visual hierarchy, typography, and animation easing curves.

• Ensure all developed components and interfaces adhere to accessibility standards, aiming for WCAG 2.1 AA compliance.

📝 Enhancement Note: The responsibilities clearly outline a dual focus on both individual contribution (coding, prototyping) and systemic impact (design system development, cross-functional collaboration). The emphasis on "bridging the UI gap" and "foundational work" suggests a role that requires not just execution but also strategic input into process and tool development.

🎓 Skills & Qualifications

Education: While no specific degree is mandated, a strong portfolio demonstrating relevant skills and experience will be prioritized. Equivalent practical experience is highly valued.

Experience: 2+ years of experience in front-end development, design engineering, or creative technology roles.

Required Skills:

• Frontend Development: Proficient in React and Next.js, with a track record of contributing clean, maintainable code to shared repositories.

• UI Design Fundamentals: Solid understanding of composition, spatial layout, visual hierarchy, typography, and animation principles (e.g., easing curves).

• Design Systems & Component Libraries: Experience or a strong aptitude for building and evolving component libraries into mature design systems.

• Accessibility Standards: Working knowledge of accessibility practices, with a focus on WCAG 2.1 AA standards.

• Prototyping & Interaction Design: Ability to translate concepts into interactive prototypes and refine micro-interactions and motion design.

• AI-Assisted Development: Comfort and proficiency in utilizing AI tools such as Cursor, Claude, Copilot, or equivalents for efficient development workflows.

• Collaboration: Proven ability to work effectively alongside designers, product managers, and engineers.

Preferred Skills:

• Component Documentation: Experience with tools like Storybook for design system architecture and component documentation.

• Automated Testing: Familiarity with automated testing frameworks such as Playwright and Jest, or a strong willingness to learn.

• Web Observability & A/B Testing: Exposure to web observability, monitoring tools, or A/B testing setups.

• Automated Accessibility Testing: Experience running automated accessibility tests (e.g., using axe-core).

📝 Enhancement Note: The requirement for AI-Native Workflow proficiency is a significant differentiator, indicating the company's commitment to adopting cutting-edge development tools. The emphasis on a portfolio with demonstrable visual craft and design system work underscores the hybrid nature of this role.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• A comprehensive portfolio is mandatory, showcasing a strong ability to deliver polished, accessible, and production-ready code.

• Demonstrate visual craft through examples of well-designed user interfaces, marketing pages, or web applications.

• Include case studies or examples of motion design, micro-interactions, and animation within web projects.

• Provide evidence of contributions to design systems or component libraries, highlighting architectural decisions and implementation.

• Showcase projects that demonstrate a solid grounding in UI design fundamentals, including composition, layout, typography, and visual hierarchy. Process Documentation:

• Evidence of translating design inputs (Figma concepts, wireframes, prototypes) into executable code, illustrating your workflow and problem-solving approach.

• Examples of how you've contributed to or maintained design system conventions and component library standards.

• Demonstrations of how you ensure accessibility standards (WCAG 2.1 AA) are met throughout the development process.

• Case studies or project examples that highlight the refinement of micro-interactions and visual polish, particularly under time constraints.

📝 Enhancement Note: The portfolio is the primary artifact for assessing a candidate's fit. It should not only demonstrate technical proficiency but also a keen eye for design detail and an understanding of how to build scalable and maintainable UI components within a design system context. The inclusion of AI tool usage in the portfolio, if applicable, would be a strong plus.

💵 Compensation & Benefits

Salary Range: Based on industry benchmarks for mid-level Design Engineers/Frontend Developers in London with 2+ years of experience, a competitive salary range is estimated between £55,000 - £75,000 per annum. This range is indicative and subject to the candidate's specific experience, skills, and interview performance. Octopus Energy offers flexibility in salary to ensure a strong match.

Benefits:

• Flexible Salary: The company emphasizes finding the right salary match for your experience, indicating potential for negotiation and flexibility.

• Autonomy: A culture that empowers individuals to work with independence and take ownership of their projects.

• Inclusive Work Environment: Commitment to fostering a diverse and equitable workplace.

• Industry Recognition: Ranked as the UK's top company to work for in 2025 and recognized in the Sunday Times Best Places to Work 2026.

• Career Development: Opportunities to learn, decide, and build quickly within a fast-paced environment.

• Unique Culture: Work within an organization known for its innovative approach and employee empowerment.

• Performance Rewards: Perks designed to genuinely matter to employees.

• Comprehensive Perks Hub: Access to a dedicated UK perks hub for Octopus employees.

Working Hours: The standard working hours are approximately 40 hours per week, with a hybrid work arrangement offering flexibility.

📝 Enhancement Note: The company explicitly states flexibility regarding salary, encouraging candidates to apply even if they are unsure about the exact salary expectation. The provided range is based on typical London tech market rates for this experience level and role type. The strong emphasis on company culture and awards suggests that benefits beyond standard compensation are a significant part of their employee value proposition.

🎯 Team & Company Context

🏢 Company Culture

Industry: Energy Technology & eMobility. Octopus Energy Group is a leader in the energy sector, with Octopus Electroverse specifically focusing on revolutionizing electric vehicle (EV) charging infrastructure. This involves building a large-scale, virtual charging platform.

Company Size: Octopus Energy Group is a significant, rapidly growing global company, employing thousands of individuals worldwide. Octopus Electroverse itself is a substantial, cross-functional team. This scale indicates a dynamic environment with ample resources and opportunities for impact.

Founded: Octopus Energy Group was founded in 2016. This relatively young age, coupled with its rapid growth, suggests a culture of innovation, agility, and continuous evolution, characteristic of a scale-up environment.

Team Structure:

• The Electroverse team is described as cross-functional, comprising individuals from product, engineering, commercial, operations, and marketing. This structure promotes collaboration and a holistic approach to product development.

• The Design Engineer will be part of the Front-end team, working closely with designers, product managers, and other engineers.

• The reporting structure likely involves a lead engineer or product manager within the Electroverse division. Methodology:

• Data-Driven Development: Given the nature of energy tech and eMobility, a strong emphasis on data analysis and performance metrics is expected to drive product decisions and improvements.

• Agile & Iterative Development: The company's rapid growth and focus on innovation suggest an agile methodology, with iterative development cycles and continuous deployment.

• User-Centric Design: The focus on simplifying EV charging for customers implies a user-centric design philosophy, where user needs and feedback are central to the development process.

• Design System Adoption: The explicit mention of building a design system points to a structured approach to UI development, prioritizing consistency, efficiency, and scalability.

Company Website: https://octopus.energy/

📝 Enhancement Note: The company's strong presence in the renewable energy and EV charging sectors positions this role at the forefront of sustainable technology. The "start-up within a scale-up" feel of Octopus Electroverse suggests a dynamic and impactful work environment, balancing the agility of a startup with the resources of a larger corporation.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned as a Mid-Level Design Engineer/Frontend Developer, requiring 2+ years of experience. It represents a crucial point in a developer's career where they can deepen their technical skills while also contributing significantly to design systems and product strategy.

Reporting Structure: The Design Engineer will report to a lead within the Front-end team, working collaboratively with designers, product managers, and other engineers. This structure allows for mentorship and guidance while fostering a sense of ownership.

Operations Impact: The Design Engineer plays a vital role in shaping the user experience of Octopus Fleet (B2B) and Electroverse (B2C). By ensuring design consistency and delivering high-quality UI, they directly impact customer satisfaction, brand perception, and the overall success of these platforms in the competitive eMobility market. Their contributions to the design system enhance development efficiency across the organization.

Growth Opportunities:

• Technical Specialization: Deepen expertise in React, Next.js, and modern frontend development practices, potentially specializing in performance optimization or advanced animation techniques.

• Design System Leadership: Take on more responsibility in evolving and maintaining the design system, potentially leading initiatives in component architecture and governance.

• Cross-Functional Expertise: Gain broader experience by collaborating closely with product managers and UX designers, understanding the full product lifecycle.

• AI Development Integration: Become a proficient user and advocate for AI-assisted development tools, driving best practices within the team.

• Leadership Potential: As experience grows, opportunities may arise to mentor junior engineers or lead smaller feature development teams.

📝 Enhancement Note: The hybrid nature of this role offers a unique growth path, allowing individuals to develop both their technical engineering skills and their design sensibilities. The emphasis on building a design system suggests opportunities for long-term impact and strategic influence within the product organization.

🌐 Work Environment

Office Type: Octopus Energy Group operates with a hybrid work model. This means employees will likely have access to modern office spaces in London for collaborative work, team meetings, and focused work sessions, while also having the flexibility to work remotely.

Office Location(s): The primary work location is London, England. Specific details about office amenities and accessibility would typically be provided during the interview process, but London locations are generally well-connected.

Workspace Context:

• Collaborative Environment: The hybrid model and cross-functional team structure encourage collaboration, with opportunities for in-person brainstorming, design reviews, and team syncs.

• Technology & Tools: Employees are expected to be proficient with modern development tools, including AI-assisted coding environments, design software (Figma), and version control systems. The company is investing in tools that enable rapid development and innovation.

• Team Interaction: Regular interaction with designers, product managers, and fellow engineers is a core part of the work, fostering a shared sense of purpose and enabling effective problem-solving.

Work Schedule: The role is full-time, with approximately 40 working hours per week. The hybrid arrangement provides flexibility in how and where these hours are spent, balancing office-based collaboration with remote work efficiency.

📝 Enhancement Note: The hybrid setup in a vibrant city like London offers a blend of structured work and personal flexibility. The emphasis on collaboration within the office suggests that designated office days will be strategically used for high-impact team activities.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter will likely conduct an initial call to assess your background, interest in Octopus Energy, and basic qualifications.

• Portfolio Review & Technical Discussion: This stage will involve a deep dive into your portfolio. Be prepared to discuss your design process, technical choices, challenges faced, and solutions implemented. Expect questions on React, Next.js, design systems, and accessibility.

• Design/Engineering Challenge: You may be given a take-home exercise or a live coding session to assess your practical skills in translating design to code, building components, or solving specific UI problems. This might involve a Figma-to-code task or a small feature implementation.

• Team Interviews: You'll likely meet with members of the design and engineering teams to evaluate your cultural fit, collaboration style, and ability to contribute to the team's objectives.

• Final Interview: This could be with a hiring manager or senior leader to discuss your overall fit, career aspirations, and understanding of Octopus Energy's mission.

Portfolio Review Tips:

• Curate Selectively: Focus on 3-5 of your strongest projects that best represent the required skills (UI polish, design systems, React/Next.js, accessibility, AI tool usage).

• Tell a Story: For each project, clearly articulate the problem, your role, the process you followed, the technologies used, the challenges encountered, and the impact of your work. Use visuals effectively.

• Highlight Hybrid Skills: Explicitly demonstrate how you bridge design and development. Showcase your ability to interpret design intent and translate it into functional, well-crafted code.

• Showcase Design System Contributions: If you have experience with design systems or component libraries, detail your contributions, the challenges of scaling components, and how you ensured consistency.

• Demonstrate Accessibility Focus: Point out specific instances where you implemented accessibility best practices and explain your approach.

• Explain AI Tool Usage: If AI tools were integral to a project, be ready to discuss how you used them to accelerate your workflow and what the outcomes were.

Challenge Preparation:

• Figma-to-Code Practice: Practice taking designs from Figma and implementing them in React/Next.js, focusing on responsive layouts, component structure, and pixel-perfect execution.

• Component Building: Be ready to build a reusable React component from scratch, adhering to design specifications and accessibility standards.

• Problem-Solving Scenarios: Prepare for questions asking how you would approach common UI challenges, such as optimizing performance, ensuring cross-browser compatibility, or implementing complex animations.

• Design System Thinking: Be prepared to discuss how you would approach building or contributing to a design system, including component naming conventions, documentation, and versioning.

📝 Enhancement Note: The emphasis on a portfolio and potential coding challenges highlights Octopus Energy's focus on practical skills and demonstrable experience. Candidates should be prepared to articulate their thought process and showcase their ability to deliver high-quality, production-ready code that aligns with design vision.

🛠 Tools & Technology Stack

Primary Tools:

• Frontend Frameworks: React, Next.js

• Design & Prototyping: Figma

• AI-Assisted Development: Cursor, Claude, GitHub Copilot (or similar)

• Version Control: Git (likely GitHub, GitLab, or Bitbucket)

Analytics & Reporting:

• Web Observability/Monitoring: Tools like Datadog, New Relic, or similar for performance tracking.

• A/B Testing: Familiarity with A/B testing frameworks or platforms for experimentation.

• Dashboarding: Potential use of tools for visualizing performance metrics, though not explicitly stated.

CRM & Automation:

• While not directly a CRM/Automation role, understanding how frontend applications integrate with backend systems and potentially customer data platforms is beneficial. Component Documentation & Architecture:

• Storybook: Preferred tool for design system architecture and component documentation.

• Other Component Libraries: Familiarity with related tools or concepts.

Testing Frameworks:

• Playwright: Preferred for end-to-end testing.

• Jest: Commonly used for unit and integration testing.

📝 Enhancement Note: The tech stack is modern and aligned with current best practices in frontend development. Proficiency in React and Next.js is essential, while experience with AI-assisted tools and design system methodologies like Storybook is highly valued. Familiarity with testing frameworks like Playwright and Jest indicates a commitment to quality and reliability.

👥 Team Culture & Values

Operations Values:

• Honesty and Empathy: Core values emphasized for all employees, fostering trust and strong interpersonal relationships.

• Data-Driven Decision Making: Utilizing data to inform product development, performance improvements, and strategic choices.

• Efficiency and Speed: A culture that encourages quick learning, autonomous decision-making, and rapid iteration to stay ahead in a dynamic market.

• Customer Centricity: A primary focus on making EV charging simple and accessible for customers, driving product development decisions.

• Innovation and Proactivity: Encouraging individuals to take ownership, experiment, and contribute to breaking new ground.

Collaboration Style:

• Cross-Functional Integration: The team operates in a highly collaborative, cross-functional manner, with close working relationships between design, engineering, product, and commercial teams.

• Open Communication: An environment that encourages open dialogue, feedback exchange, and knowledge sharing to foster continuous improvement.

• Design System Advocacy: A collective effort to maintain and evolve the design system, ensuring shared understanding and consistent application of design principles across products.

• Agile and Iterative: Embracing agile methodologies that promote flexibility, rapid prototyping, and iterative development based on feedback.

📝 Enhancement Note: Octopus Energy Group's culture is characterized by a strong sense of purpose, a commitment to employee well-being, and a drive for innovation. The emphasis on "genuinely decent people" and "finding the right octofit" suggests a focus on cultural alignment and strong team dynamics.

⚡ Challenges & Growth Opportunities

Challenges:

• Balancing Design Polish with Development Speed: Ensuring high-quality UI and micro-interactions are maintained without compromising rapid delivery timelines, especially within a fast-paced environment.

• Evolving a Design System: Contributing to the foundational work required to mature an active component library into a robust, scalable design system requires strategic thinking and meticulous execution.

• Cross-Platform Consistency: Maintaining design consistency across different platforms and ecosystems (web, mobile, B2B, B2C) can be complex.

• Adopting New Technologies: Staying current with rapidly evolving frontend technologies and effectively integrating AI-assisted development tools into established workflows.

Learning & Development Opportunities:

• Advanced Frontend Skills: Deepen expertise in React, Next.js, performance optimization, and modern JavaScript ecosystems.

• Design System Architecture: Gain significant experience in architecting, building, and governing design systems, a highly sought-after skill.

• UX/UI Specialization: Develop a stronger understanding of UX principles, user research, and interaction design through close collaboration.

• AI Development Mastery: Become an expert in leveraging AI tools for enhanced productivity and innovation in software development.

• Industry Exposure: Opportunity to work within the rapidly growing eMobility and renewable energy sectors, contributing to sustainable technology advancements.

📝 Enhancement Note: The challenges presented are typical for roles at the intersection of design and engineering, particularly in fast-growing tech companies. The growth opportunities are substantial, offering a path to become a specialist in design systems and modern frontend development.

💡 Interview Preparation

Strategy Questions:

• "Describe a time you had to balance design fidelity with development speed. How did you ensure both quality and timely delivery?" (Focus on your process, trade-offs, and communication.)

• "How would you approach contributing to and evolving a shared component library into a mature design system? What are the key considerations?" (Discuss component architecture, documentation, governance, and collaboration.)

• "Walk us through your process of taking a Figma concept and turning it into production-ready, accessible code. What tools do you use, and what are the critical steps?" (Showcase your end-to-end workflow.)

• "How have you used AI-assisted development tools (like Copilot, Claude, Cursor) in your workflow? What are the benefits and potential drawbacks?" (Be specific about your experience and insights.) Company & Culture Questions:

• "What interests you about Octopus Energy Group and the Electroverse mission, particularly in the eMobility space?" (Research the company's impact and sustainability goals.)

• "How do you approach collaboration with designers and product managers? Can you provide an example of a successful cross-functional project?" (Highlight your communication and teamwork skills.)

• "Given our focus on innovation and speed, how do you stay up-to-date with frontend technologies and best practices?" (Demonstrate a commitment to continuous learning.) Portfolio Presentation Strategy:

• Structure Your Narrative: For each project, clearly state the objective, your specific role, the problem you solved, your process (including design interpretation and coding), the technologies used, and the measurable impact or outcome.

• Highlight Key Skills: Explicitly call out how your projects demonstrate UI polish, design system contributions, React/Next.js expertise, accessibility implementation, and AI tool usage. Use visual aids effectively.

• Be Ready for Deep Dives: Prepare to answer detailed questions about your technical decisions, design choices, and problem-solving approaches for each project.

• Showcase Process, Not Just Product: Explain why you made certain decisions, not just what you built. This demonstrates critical thinking and understanding.

• Engage Your Audience: Make it a conversation. Ask clarifying questions and be open to feedback.

📝 Enhancement Note: The interview process emphasizes a blend of technical proficiency, design sensibility, and cultural fit. Candidates should prepare to articulate their processes, demonstrate their skills through their portfolio, and show enthusiasm for Octopus Energy's mission.

📌 Application Steps

To apply for this Design Engineer (UI, Frontend) position:

• Submit your application through the provided Lever link: https://jobs.lever.co/octoenergy/0fdb0472-525f-43aa-baa4-cd3229bece54

• Portfolio Customization: Tailor your portfolio to highlight projects that showcase your UI design craft, front-end development skills (React/Next.js), design system contributions, and experience with AI-assisted development tools. Prioritize examples demonstrating pixel-perfect implementation and accessibility.

• Resume Optimization: Ensure your resume clearly articulates your 2+ years of experience in frontend development or design engineering. Use keywords from the job description such as "React," "Next.js," "Figma," "Design Systems," "Accessibility," and "AI-assisted development." Quantify achievements where possible.

• Interview Preparation: Practice presenting your portfolio projects, focusing on articulating your process, technical choices, and impact. Prepare for potential coding challenges and behavioral questions related to collaboration and problem-solving.

• Company Research: Familiarize yourself with Octopus Energy Group's mission, values, and recent achievements, particularly in the eMobility sector. Understand their commitment to sustainability and innovation.

⚠️ 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.