Role & Responsibilities

Akila is a startup founded in 2021 with a mission to help organizations decarbonize their operations and improve ESG compliance by leveraging digital twin technology. As the lead of such large and complex B2B SaaS product, I primarily take on two roles.

Design Expert

Lead the transformation of the design for both web and mobile platforms
Spearhead the complete redesign of the web and mobile user interfaces, ensuring a seamless, user-centered experience across both platforms. Keep the design fresh and user-friendly by following modern trends like clean layouts, easy navigation, and a focus on what users actually need. Collaborate closely with cross-functional teams to align design strategies.
Establish design systems, UX/UI guidelines, and establish annotation templates
Create and maintain a robust design system that ensures consistency across digital touch points, from typography and color schemes to component libraries and UI patterns. Develop detailed UX/UI guidelines to standardize design practices, enabling smoother collaboration across design and development teams. Introduce a design annotation template to streamline feedback and implementation processes, improving communication and efficiency within the team.

Team Lead

Manage a cross-country product design team of three
Foster effective communication and collaboration across different time zones and cultures. Ensure alignment on project goals, timelines, and design standards, driving efficiency and consistency in deliverables.

Design Achievements

Akila is primarily a web-based user platform, consisting of the following key product suites: Energy, Carbon, Maintenance, Platform, and Digital Twin. Each suite contains between 2 to 7 core features.
Additionally, there is a dedicated app for the Maintenance suite, which primarily covers work order and inspection features. Given the nature of this product, designers require deep domain knowledge and rely heavily on input from product managers to deliver the best possible user experience. Main deliverables include:

Design System & UX/UI Guidelines

Leading the development and implementation of a design system for both web and mobile platforms, focusing on reusable components, consistency, and user-centric design. Additionally, formalizing UX/UI guidelines to ensure coherence across interactions, visual design, and accessibility. Key deliverables include:

Styles: Defining typography, color schemes, and visual effects, ensuring consistency in font usage, color hierarchy, and visual hierarchy across the platform.
Components: Designing a comprehensive set of reusable components, including buttons, checkboxes, badges, form fields, toasts, tooltips, and more, enabling rapid and consistent design implementation across products.
Patterns: Creating UI patterns for key interactions, such as empty state screens, loading indicators, date and time pickers, dialogs, and modals, to enhance usability and streamline user flows.
Functions: Standardizing functional flows like filter presets, file uploads, and import/export features, ensuring intuitive and efficient interactions for users.
Templates: Developing template layouts for typical pages, including table view pages, detail pages, creation/edit pages, and configuration pages, establishing a consistent structure for all product interfaces.

Data Dashboards

Standardizing data visualization components to enhance visual consistency, leveraging the ECharts chart library to provide users with interactive charts and dashboards across various scenarios. Additionally, adding filter functionality—such as time periods and specific data types—allows users to explore data in a more customized way. These improvements are designed to increase data clarity and enable users to engage more effectively with the analytics features.

<Example of chart design standardization>

Mobile Responsiveness

Optimizing mobile responsiveness across web and app platforms ensures a seamless experience on all screen sizes. Key initiatives include designing adaptive layouts that dynamically adjust content, reworking navigation with collapsible hamburger menus for better usability on smaller screens, and implementing touch-friendly elements.

Persona Development

As an initial step toward better understanding users and answering the question 'Who is our user?', the product team initiated a persona workshop. This process involves interviewing client-facing colleagues to gather insights, synthesizing data into actionable persona profiles, and defining core user needs, pain points, and motivations.