Revitalizing the Clean Energy Market: Achieving Website Transformation Through UIUX Design

Revitalizing the Clean Energy Market: Achieving Website Transformation Through UIUX Design

Established in 2002, Neteon Technology specializes in industrial network equipment and IoT solutions. As a nationally recognized value-added distributor, Neteon is committed to delivering high-quality technical products and services.

Role

UIUX Designer

Duration

3 months

Overview

In this project, we applied UIUX design thinking to revamp Neteon's brand website, creating a marketing funnel and optimizing CTA functionalities to boost business appointment conversion rates. Additionally, we enhanced the brand's SEO visibility on Google through strategic keyword optimization, making it easier for potential clients to find and engage with Neteon.

Background and Challenges

  • Lack of Visual Consistency: The Neteon website lacked a unified design guideline, with inconsistent colors and elements, undermining brand trust and professional image, and causing confusion for users navigating different pages.

  • Poor Information Architecture: The existing website had poorly arranged content, making it difficult for users to find the information and functions they needed. This increased the time and effort required to locate information, leading to potential customer loss.

  • Low Conversion Rates: The old website lacked intuitive contact methods, causing potential clients to miss cooperation opportunities due to hard-to-find information, which lowered conversion rates and business performance.

Design Outcomes

According to Google Analytics data, we compared the website metrics from the same period last year to the data after the redesign launch, showing significant growth and improvement.

+110%

Average Interaction Time

+80%

Total Revenue

Roles and Responsibilities

Design Alignment and Development Implementation:

  • Engaged in in-depth cross-departmental communication with clients using Figma to precisely align design requirements, ensuring that design solutions met client expectations and brand standards.

  • Translated designs into a high-quality website using Webflow, covering both desktop and mobile versions, to provide a seamless and consistent user experience.

Establishing Color Schemes and Component Libraries:

  • Developed a comprehensive color scheme and component library from scratch, ensuring brand consistency across all departments and enhancing work efficiency.

  • Simplified the design system to make it accessible for clients from non-design departments, ensuring consistent brand output across various media.

Webflow Training and Support:

  • Authored detailed and easy-to-understand Webflow operation manuals, guiding clients on efficiently managing project assets and content.

  • Conducted multiple online training sessions to ensure clients could independently manage and update their Webflow projects, enhancing their self-management capabilities and project sustainability.

Design Process

Preliminary Research

  • User Research: Collaborated closely with Neteon's marketing team to conduct thorough user research and multiple meetings, gaining a comprehensive understanding of the needs and pain points of Neteon's target customers.

  • Competitor Analysis: Analyzed the websites and marketing strategies of Neteon's competitors, identifying their strengths and weaknesses to provide a reference for the design process.

Mid-Term Design and Development

  • UI Design: Utilized Figma for multiple iterative designs, working closely with marketing directors and brand consultants to ensure the designs perfectly aligned with Neteon's marketing funnel and brand positioning.

  • Page Development:

    • Developed pages using Webflow, ensuring seamless integration between design and development.

    • Conducted cross-browser and device testing to ensure optimal performance of the website in various environments.

  • Speed and SEO Optimization:

    • Addressed website speed issues using Webflow technology to ensure fast loading and seamless navigation.

    • Implemented best SEO practices by incorporating keywords and optimizing content to improve Neteon's Google ranking and visibility in the clean energy sector.

  • CRM Integration: Integrated HubSpot CRM, allowing clients to easily schedule business appointments, thereby increasing the number of bookings and business conversion rates.

Post-Development Optimization and Delivery

  • Design System Establishment:

    • Created a comprehensive design system, including a component library and style guide, ensuring consistency and efficiency in future designs.

    • Ensured the design system was user-friendly, allowing non-design departments to easily operate and maintain it.

  • Employee Training: Authored detailed operation manuals and conducted multiple online training sessions, teaching Neteon employees how to maintain the website and use the design system, ensuring the continuity of the website's visual consistency and aesthetics.

User Journey Map

  • A potential user reads a related article and visits the Neteon website.

  • They discover that Neteon's solutions can address their challenges, sparking a purchase interest.

  • The user downloads company brochures and whitepapers from the website to further convince their decision-makers.

  • The user presents the gathered information to their supervisor or decision-making team.

  • The company decides to collaborate and schedules a product demonstration with Neteon.

  • After signing the contract, Neteon provides a customized solution tailored to the company's needs.

Marketing Funnel Strategy

Awareness:

  • SEO Optimization: Enhance Neteon's ranking in Google search results through keyword strategies and content optimization to increase brand visibility.

Interest:

  • High-Quality Content Creation: Develop valuable and engaging content on the website, such as industry reports, case studies, and blog articles, to attract and maintain visitor interest and attention.

Consideration:

  • User Experience Optimization: Redesign the website's information architecture and navigation system to ensure visitors can quickly and efficiently find the services and solutions they need, increasing the likelihood of collaboration with Neteon.

Intent:

  • HubSpot CRM Integration: Implement HubSpot CRM to enable visitors to easily schedule online consultations with the sales team, facilitating the conversion of potential customers.

Evaluation:

  • Showcase Positive Reviews: Display testimonials and success stories from satisfied customers on the website to enhance visitor confidence and trust in Neteon's services.

Purchase:

  • Order Process Optimization: Simplify and optimize the ordering process, allowing potential customers to complete transactions easily and efficiently when they decide to purchase, thereby increasing conversion rates.

How We Achieved It

UIUX Design

  • More Engaging Homepage: We used high-quality videos and web animations to create an immersive experience, significantly increasing user dwell time and immediately conveying Neteon's business scope and building trust.

  • Responsive Design: Although most users accessed the website via desktop, we built a responsive site on Webflow to ensure consistent display and smooth experience across all devices.

  • Optimized Information Architecture: We restructured the website's information architecture to enable users to find the necessary information more efficiently, placing the "Schedule a Business Appointment" service system in the most prominent position.

Design System

  • Consistent Design System: We developed an easy-to-maintain design system to resolve design inconsistency issues. This system is straightforward and can be easily used by non-design personnel, suitable for web pages, whitepapers, and marketing publications.

  • Unified Brand Visuals: By standardizing website colors, iconography, and image styles, we enhanced brand recognition and visual appeal, making the brand image distinct and easily recognizable, ensuring a consistent user experience across all touchpoints.

Marketing Aspects

  • Optimized On-Site Search Function: Based on marketing funnel and user insights, we reorganized the website's reading flow and added content that enhances brand trust. This accelerated the time users took to click "Talk to Sales," further increasing conversion rates.

  • Integrated HubSpot CRM: We skillfully utilized HubSpot's features to allow interested customers to seamlessly schedule business appointments, saving significant time for the sales team and automatically scheduling product demonstrations in their calendar.

Reflection and Learning

Solving Initial Challenges and Communication Issues

At the project's start, we faced communication issues due to the client's unfamiliarity with Figma. To address this, we conducted multiple training sessions and provided detailed manuals, ensuring effective alignment of design and marketing needs before starting Webflow development.

Solving Initial Challenges and Communication Issues

At the project's start, we faced communication issues due to the client's unfamiliarity with Figma. To address this, we conducted multiple training sessions and provided detailed manuals, ensuring effective alignment of design and marketing needs before starting Webflow development.

Solving Initial Challenges and Communication Issues

At the project's start, we faced communication issues due to the client's unfamiliarity with Figma. To address this, we conducted multiple training sessions and provided detailed manuals, ensuring effective alignment of design and marketing needs before starting Webflow development.

Integration of Brand Consultants and Design Adjustments

The addition of brand consultants brought new visual and copywriting requirements. We held cross-departmental workshops to find the best solutions. For instance, to make the original design less conservative, we added more dynamic effects to the homepage, enhancing visual appeal and user interaction.

Integration of Brand Consultants and Design Adjustments

The addition of brand consultants brought new visual and copywriting requirements. We held cross-departmental workshops to find the best solutions. For instance, to make the original design less conservative, we added more dynamic effects to the homepage, enhancing visual appeal and user interaction.

Integration of Brand Consultants and Design Adjustments

The addition of brand consultants brought new visual and copywriting requirements. We held cross-departmental workshops to find the best solutions. For instance, to make the original design less conservative, we added more dynamic effects to the homepage, enhancing visual appeal and user interaction.

Final Reflection and Learning

This project highlighted the importance of efficient communication and cross-departmental collaboration. It strengthened my understanding of UIUX design, teaching me to balance diverse opinions and adapt to changing needs. Continuous learning and an open mindset proved essential for improving design quality and innovation, which will benefit future projects.

Final Reflection and Learning

This project highlighted the importance of efficient communication and cross-departmental collaboration. It strengthened my understanding of UIUX design, teaching me to balance diverse opinions and adapt to changing needs. Continuous learning and an open mindset proved essential for improving design quality and innovation, which will benefit future projects.

Final Reflection and Learning

This project highlighted the importance of efficient communication and cross-departmental collaboration. It strengthened my understanding of UIUX design, teaching me to balance diverse opinions and adapt to changing needs. Continuous learning and an open mindset proved essential for improving design quality and innovation, which will benefit future projects.