Renewance

Company Overview

Client: Renewance Inc.
Industry: Industrial Battery Management and Life Cycle Services
Role: Lead UX/UI Designer
Project Team:

• • Product Manager
  • 3 Developers
  • Stakeholder

Objective: Develop a scalable web application for comprehensive battery monitoring, management, e-commerce, and advanced features, significantly expanding capabilities beyond existing systems like Salesforce.

Introduction

As a dedicated UX/UI Designer, I had the opportunity to collaborate with Renewance Inc., a leader in industrial battery life cycle management. The project involved creating a robust web application from scratch to revolutionize how clients monitor and manage a diverse range of batteries—from large industrial units to those in electric vehicles (EVs). This case study highlights my role in the project, the collaborative efforts with the team, and the comprehensive design process that led to the successful development of this complex platform.

Project Goals

• Advanced Monitoring: Provide real-time data on battery performance, health, and safety.
• Operational Management: Streamline order management, asset tracking, and service requests.
• Account Management: Design comprehensive account management functionalities.
• Remote Capabilities: Enable remote control features and detailed location tracking.
• E-commerce Integration: Create a marketplace for buying, selling, and recycling batteries, accommodating complex transaction models.
• User Accessibility: Simplify complex battery data into user-friendly interfaces for users of varying technical backgrounds.
• Stakeholder Engagement: Develop a platform that impresses stakeholders and secures funding for future growth.

Key Responsibilities

• Design Leadership: Directed the overall user experience and interface design of the application.
• Team Collaboration: Worked closely with a project manager, three engineers, and stakeholders.
• Account Management Features:
  • Account Repository: Developed a centralized system for storing and accessing account information.
  • Invoice Management: Created interfaces for users to view, manage, and process invoices efficiently.
  • Asset Management: Designed modules for managing assets at both system and component levels.
  • Bulk Upload Functionality: Enabled users to upload large datasets seamlessly, improving efficiency.
  • Asset Mapping: Implemented visual mapping tools for users to track and manage asset locations.
• Design System Creation: Developed a comprehensive design system using Figma.
• User Research: Conducted extensive research to understand industry needs and user requirements.
• Data Visualization: Created numerous charts, graphs, and data tables with customizable options.
• Prototyping and Testing: Developed interactive prototypes and conducted usability testing sessions.
• Stakeholder Presentations: Presented designs and prototypes to stakeholders and potential investors.

Team Collaboration

Working Effectively in a Cross-Functional Team

• Open Communication and Alignment:
  • Initial Design Discussions: Collaborated with the project manager to review and refine initial design concepts.
  • Shared Vision Development: Established design patterns and guidelines to ensure consistency across various sections.
  • Agile Workflow Adoption: Participated in daily stand-ups and planning sessions to align on progress and address challenges promptly.
• Feedback Integration and Problem-Solving:
  • Actively sought and incorporated feedback: Made iterative changes to improve layouts and functionalities.
  • Worked together to address technical constraints: Found effective solutions that satisfied both user experience and development feasibility.
• Design-Development Synchronization:
  • Ensured design components were compatible with development tools: Adjusted designs based on technical input.
  • Provided comprehensive asset delivery: Supplied the engineering team with necessary icons, graphics, and detailed design specifications.
• Fostering a Collaborative Environment:
  • Built strong professional relationships: Based on mutual respect and trust, enhancing collaboration and productivity.
  • Encouraged open discussions and knowledge exchange: Leveraged the diverse skills within the team to enhance the project’s outcomes.
  • Kept the team focused on common objectives: Ensured everyone was aligned in delivering a high-quality product.

Design Process

Rapid Prototyping and Initial Design

• Challenge: On the first day, the client presented complex ideas and requested final-looking designs immediately, which is typically a time-consuming process, but they wanted to see professional-looking designs right away.
• Solution: Leveraged the power of Figma to create a professional-looking design quickly.
  • Component-Based Design: Created reusable components for fonts, sizes, and common elements using Figma’s auto-layout feature.
  • Efficient Adjustments: Could easily adjust colors, font sizes, and styles across multiple components, ensuring consistency and professionalism.
  • Accessibility Considerations: Kept accessibility standards in mind, ensuring font sizes and colors met web application standards.
• Outcome: Delivered a professional-looking design within a short timeframe, impressing the client and aligning the project direction effectively.

User Research and Industry Analysis

• Stakeholder Interviews: Engaged with stakeholders and industry experts to gather insights into essential features and data points.
• Market Analysis: Researched existing solutions to identify gaps and opportunities for innovation.
• Learning Industry Terminology: Familiarized myself with technical terms and metrics critical to battery monitoring.
• Developing User Personas: Created detailed profiles for various user types, including clients, technicians, sales personnel, and administrative staff.

Design System Development

• Utilizing Figma: Created a scalable design system with reusable components, styles, and interactive elements.
• Component-Based Approach: Ensured quick adjustments and maintained consistency throughout the application.
• Responsive Design: Designed layouts adaptable to different devices and screen sizes.

Data Visualization and Customization

• Charts and Graphs Creation: Developed numerous charts and graphs to represent performance, health, and safety metrics.
• Customizable Options: Allowed users to change the look and feel of data visualizations to suit their preferences.
• Interactive Data Tables: Designed detailed data tables with functionalities similar to spreadsheets, enabling users to interact with and manipulate data effectively.

Extensive Feature Development

• Monitoring Modules:
  • Performance: Cycle count, charge/discharge rates, depth of discharge (DoD), current.
  • Health: State of charge (SOC), state of health (SOH), temperature, voltage, internal resistance, self-discharge rate, cell balancing, ambient conditions.
  • Safety: Alerts, alarms, faults.
• Operations & Maintenance:
  • Preventative: Order management, asset tracking, repository.
  • Corrective: Service requests, service status.
• Remote Management:
  • Power Control: Grid frequency control, load shifting control.
  • Energy Control: Temperature control, safety control, firmware updates, security.
• Account Details:
  • Account Repository: Centralized system for storing and accessing account information.
  • Invoice Management: Interfaces for users to view, manage, and process invoices efficiently.
  • Asset Management: Modules for managing assets at both system and component levels.
  • Bulk Upload Functionality: Enabled users to upload large datasets seamlessly.
  • Asset Mapping: Visual mapping tools for users to track and manage asset locations.
• User Management:
  • Registration: Processes for user registration.
  • User Roles: Role assignments and management.
  • Profile Details: User profile management.
• Resources:
  • Detailed Informational Pages: Support materials and informational pages for user assistance.

Prototyping and Usability Testing

• Interactive Prototypes: Developed high-fidelity prototypes in Figma, simulating real-world scenarios.
• Testing with Internal Teams: Conducted usability tests with office staff and sales teams to gather feedback.
• Client Feedback: Incorporated insights from major clients like Navistar to refine the application.
• Iterative Design Improvements: Updated designs based on testing outcomes and feedback to enhance usability.

Results and Impact

Successful Stakeholder Engagement

• Secured Funding: The comprehensive designs and compelling presentations were instrumental in obtaining financing for the next development phase.
• Positive Reception: Stakeholders praised the platform’s innovative features, usability, and potential for industry impact.

Enhanced User Experience

• Simplified Complex Data: Users could easily interpret intricate battery data, leading to better decision-making and efficiency.
• Improved Operational Efficiency: Streamlined processes for monitoring, maintenance, and asset management enhanced overall productivity.
• Personalized Interfaces: The ability to customize data views increased user satisfaction and adoption rates.

Foundation for Future Growth

• Scalable Design System: The robust design framework facilitated easy integration of new features and modules.
• Accelerated Development: Clear guidelines and a cohesive design system enabled developers to implement features more efficiently.
• Reduced Dependency on External Systems: Successfully began migrating essential data from Salesforce, providing a more tailored and integrated solution.

Conclusion

Working on Renewance Inc.’s battery management platform was a rewarding experience that demonstrated my ability to lead complex projects, collaborate effectively in a dynamic team environment, and deliver impactful design solutions. By combining deep industry research with user-centric design principles, we developed a platform that not only met immediate needs but also positioned the company for sustained future success.

Reflect on the Experience

Working on the Renewance Inc. battery management platform was a rewarding and transformative experience. This project reinforced several key aspects of my professional practice:

• Adaptability: The challenge of delivering final-looking designs on the first day taught me the importance of adaptability and the power of using tools like Figma to meet client needs quickly and effectively.
• Collaboration: Close teamwork with the project manager, engineers, and stakeholders highlighted the value of open communication, mutual respect, and a shared vision in achieving project goals.
• User-Centric Design: Conducting thorough user research and developing detailed personas ensured that the final product was not only functional but also user-friendly and accessible.
• Continuous Improvement: The iterative design process, driven by user feedback and usability testing, emphasized the importance of continuous refinement and the pursuit of excellence.
• Professional Growth: This project significantly enhanced my skills in design leadership, data visualization, and project management, preparing me to tackle even more complex challenges in the future.

This experience underscored my commitment to delivering high-quality, user-centric design solutions and reinforced my ability to lead and collaborate effectively in dynamic team environments.