E-commerce solution

Task: 

Whole e-commerce website solution for a steel company.

Strategy:

Brand Strategy, UX Strategy

Design:

UI/UX Design, Art Direction, 3D modeling

Client:

Steel company

 

As a professional website design and development company, 1TEC was tasked with an e-commerce website project for a steel company. The client requested us to redesign the company’s homepage image, create 3D product images for each product, and upload hundreds of steel structural products’ prices, cutting requirements, product size charts, product codes, product categories, product-related tags, product descriptions, and additional product information such as coating, total length, size, and weight per meter to the website. Additionally, the client asked us to design advanced product search functionality for the website, allowing customers to quickly search for products based on size, product codes, and other related factors. We also needed to display related products at the bottom of the website and add a product category list on the side for customers’ convenience.

 

The project workflow is as follows:

 

• Requirements analysis and planning: As a professional website design and development company, our primary task was to conduct thorough requirements analysis and planning for this steel company’s e-commerce website project. The following steps were taken during the requirements analysis and planning stage:
• Communication with the client: We had multiple discussions with the client to understand their business and market needs, as well as the information and functionality they expected to showcase on the website.

• Website functionality requirements analysis: Based on the client’s requirements, we listed all the necessary website functions, such as product display, categorization, search functionality, and steel project service introductions.
• Website design and layout planning: We worked with the client to discuss the overall design and layout of the website, including the homepage image design, product display page layout, and side category list design.
• Product creation plan: We planned the process and timeline for creating 3D product images and related information for hundreds of steel structural products according to the client’s request and confirmed it with the client.
• Website system and technology planning: We decided to use the WordPress system for website development and planned and researched the necessary technologies and functions.
• Google Ads and email marketing plan: We designed a Google Ads optimization plan and email marketing plan for the client to increase website traffic and sales.
• Customer feedback and maintenance support planning: We considered customer feedback and maintenance support issues and developed corresponding plans.

 

 

Website design:

 

During the website design phase, we conducted in-depth requirement analysis and planning with the client, to understand their business and product characteristics, as well as their specific requirements and expectations for the website. We used professional tools and techniques such as Axure RP, Sketch, Adobe Photoshop, and Illustrator to create the website’s visual and interactive designs, producing prototypes and design drafts that received client approval and feedback.

In the website design process, we emphasized responsive design to ensure the website displayed and functioned well on various devices. We also provided rich graphics and dynamic effects to attract user attention and improve their experience.

After completing the website design, we performed a series of tests and optimizations to ensure website stability, speed, and security, and launched the website while collecting client feedback. We also provided long-term maintenance and support services to ensure continuous stability and updates.

 

3D product rendering:

• Data collection: We collected relevant information for each product from the client, including size, material, coatings, and organized products into categories.
• 3D product design: Based on client-provided information and requirements, we used professional 3D modeling software to create a 3D product rendering for each product, adding size and coating information to each product rendering.
• Rendering optimization: We optimized each product’s 3D rendering, including removing jagged edges, adjusting lighting, adding shadows, etc., to improve the display effect of the product.
• Rendering integration: We integrated each product’s 3D rendering into the website, presenting each product’s 3D rendering, price, cutting requirements, product size chart, product number, product category, related product tags, product introduction, and additional product information on a single page.

 

 

Design of Search Functionality:

Based on the client’s requirements, we designed a clean and intuitive search interface, including a search bar and filter criteria. In the search bar, users can enter keywords to perform searches, while in the filter criteria, users can select multiple criteria such as size range, product category, and coating type to filter the results.

 

To implement the search functionality, we used a WordPress plugin and customized it to meet our needs. In the backend management interface, we added relevant tags for each product, including product SKU, category, and coating type. When users enter keywords in the search interface, we use relevant algorithms to match and display the results on the page. We also wrote the code for the filter criteria and integrated it into the search interface.

 

 

Design of Related Product and Category Lists:

We noticed that the client had hundreds of different steel structure products to showcase and wanted to display some related products below each product page. Therefore, we needed to design a category list to allow users to view related products by product type. We also needed to consider the characteristics of the products and divide them into different categories, such as steel plates, steel pipes, and profiles. Additionally, we displayed other related products on each product page in a sidebar for easy comparison and selection. We developed an intuitive and easy-to-use related product and category list design based on the client’s requirements, allowing users to quickly find the desired product.

 

 

Steel Project Services:

Steel Project Services is an important service offered by the steel company, for which we have created a dedicated service page on the website. On this page, we provide a detailed introduction to the service, including its types, features, processes, and advantages.

 

We then proceed to design and describe the detailed process of the service. This process includes various stages of steel project services, such as section cutting, milling services, folding machines, band saw cutting, steel structure workshop drafting services, and on-site installation. We describe each stage in detail, including the required steps, equipment and materials, time, and cost.

 

To provide a better understanding of the service to clients, we also create relevant videos and images on the website to showcase the entire process and results of the service. We carefully produce and edit these videos and images to achieve the best display effect.

 

Finally, we set up an online consultation and appointment system for this service to allow clients to contact us at any time for inquiries and appointments. In this system, clients can choose the desired service type, time, and location, and leave their contact information. The steel company will contact clients promptly to provide high-quality services.

 

 

Google Ads optimization for steel company:

One of our tasks is to optimize the existing Google Ads for the steel company to help them attract more targeted audiences and increase website conversion rates. The following is our process:

• Research target audience: Firstly, we understand the steel company’s target audience, including people who may need to purchase steel structural products and related services. We also study their search behavior and preferences to better target and market to them.
• Develop ad strategy: Based on our understanding of the target audience, we develop an ad strategy for the steel company, including ad content, target audience, ad placement time and location, and other details. Our goal is to maximize ad effectiveness and increase website conversion rates.
• Design ad creatives: We use attractive text and images to design multiple ad creatives to increase click-through rates. We also optimize ad layout and presentation to ensure visual appeal and readability of the ads.
• Monitor and adjust ads: We track and monitor ad performance and make adjustments to ensure the best ad results. We also regularly optimize ad placement, keywords, ad quality score, and other aspects of ad delivery.
• Provide regular reports: We provide regular ad performance reports to the steel company to help them understand ad performance and website conversion rates, and make necessary adjustments.

 

 

Email Marketing Plan:

To meet the needs of the client, we have designed an email marketing plan for this steel company to help them send the latest information and promotional activities of their steel products to potential and existing customers. The following are our specific processes:

• Needs analysis: We discussed with the client their target customers, email marketing content and frequency, and how to improve email open and click-through rates.
• Email marketing strategy: We developed a comprehensive email marketing strategy, including email subjects, content, images, buttons, and layout, to ensure the professionalism and attractiveness of the emails.
• Email list building: We helped the client create an email list for steel products, including potential and existing customers. We also designed a subscription form to make it easy for website visitors to subscribe to the emails.
• Email content production: We designed and wrote a series of email content, including new product releases, promotional activities, industry news, and company updates. We also linked these contents with the steel company’s website, blog, and social media content to increase user conversion rates and loyalty.
• Email sending: We used professional email marketing tools to send emails to the customer list and monitored email open and click-through rates. We also adjusted and optimized the email marketing strategy based on user feedback and statistical data.

 

 

Steel Structure Blog and News Release Feature:

In this project, we added a steel structure blog or news page for the client. This page aims to provide the company with a platform to showcase its professional knowledge and experience in the field of steel structures and attract more potential customers. The following are our project processes:

• Analysis and planning: We first had a meeting with the client to understand in detail what they wanted to showcase on the blog or news page. We determined the design and layout of the blog or news page, as well as the available features and tools to enable clients to easily publish and edit blog or news articles.
• Blog or news page design: We created a dedicated page template with the steel structure company’s iconic colors and design elements to ensure consistency with the entire website and maintain brand image consistency.
• Blog or news article production: We provided clients with an easy-to-use content management system so that they could easily create, edit, and publish blog or news articles. We also provided some sample articles and editing guidelines to help clients create high-quality content.
• SEO optimization: To ensure that the blog or news page can rank high in search engines, we used some SEO techniques, such as keyword optimization and external links.

 

Customized content on the checkout page

Customized content on the checkout page for an e-commerce website was added as per the requirement of our client in this project. The page detailed delivery methods and other relevant information. To achieve this, the following steps were taken:

• Requirement Analysis: We conducted extensive discussions with the client to ensure a complete understanding of their desired customized content. We requested all relevant information, including delivery methods, payment methods, and refund policies, among others.
• Content Customization: We created customized content for the checkout page using the information provided by the client. We provided detailed descriptions of different delivery methods and their prices, as well as listed other relevant information such as refund policies and payment methods, to ensure that all information was clear and easy to understand.

 

 

Website Testing and Deployment:

In this project, testing and deployment were the final stages following website design and product development. During this stage, we conducted comprehensive testing of the website, including functional testing, compatibility testing, performance testing, and security testing, among others. We used various testing tools and technologies, such as JMeter and Selenium, to ensure that the website functioned normally in various environments and situations. During the testing process, we recorded various issues and errors and made the necessary fixes and optimizations.

Once the testing was completed without any significant issues, we began deploying the website to a server. We specifically chose a reliable enterprise-level cloud server and made the necessary configurations and adjustments to ensure that the website functioned normally. We also performed some optimizations, such as compressing asset files and using a CDN, to improve website performance and access speed.

After deployment, we performed the final acceptance testing and presented the final version of the website to the client. The client was very satisfied with our work and gave high praise for our professional skills and service quality. We also provided some training to the client to ensure that they could smoothly use and maintain the website when necessary.

In conclusion, testing and deployment are critical and important stages that require us to conduct comprehensive and rigorous testing and deployment of the website to ensure that the website functions normally and provides a good user experience for the client.

 

 

Client feedback:

After completing the development of an e-commerce website and adding all related functionalities for a steel company, we submitted the final product to the client. After carefully reviewing the entire website, the client was very satisfied with our work. They particularly mentioned the advanced product search feature and category listing that we provided, which made it easier for them to find the products they needed. The client also appreciated the Google Ad campaign and email marketing program that we designed for them and plans to continue working with us in the future.

 

In response to the client’s feedback, we listened to their suggestions and made appropriate adjustments and optimizations to provide a better user experience and functionality. We used a proactive communication and collaboration approach to ensure the client was satisfied with our work and continued to provide support and maintenance services after the project was completed.

 

 

3 months of maintenance and support:

Three months of maintenance and support services are included as standard in our services. During this period, we ensured the website ran smoothly without any issues. Our team performed regular security checks and updates to ensure the website was protected from any security threats.

In addition, we provided technical support to the client in case they encountered any issues while using the website. Our team promptly responded to any technical issues reported by the client and resolved them in a timely manner. We also assisted the client in updating product information and images on the website.

During the maintenance period, we regularly backed up the website to ensure data was protected in case of any unforeseen issues. Our team also monitored website traffic and provided regular performance reports to the client.

Furthermore, we provided training to the client on how to use the content management system and e-commerce platform so that they could manage the website independently after the maintenance period ended.

Overall, during the maintenance period, our team ensured the client’s website was fully functional, secure, and up-to-date, and provided necessary support to ensure smooth operation.

 

 

Project Summary:

During the requirement analysis and planning phase, we engaged in detailed communication with the client to understand their business needs and goals, and developed a website design and functionality that was suitable for them. During the website design and product production phase, we maintained close cooperation with the client and made multiple modifications and adjustments based on their needs. In the design of search functions, related product lists and category lists, as well as steel project services and on-site installation services, we fully considered the client’s needs and provided solutions that met their requirements.

 

In terms of Google Ad optimization and email marketing plans, we developed targeted and effective plans based on the client’s business needs and goals, and tracked and adjusted them during implementation. We also created a new steel product price list and steel structure blog or news, and added detailed instructions and custom content to the checkout page of the online store to improve the client’s purchasing experience.

 

During the website production process, we used the WordPress system and conducted multiple tests and adjustments to ensure that the website’s functionality and performance met the client’s requirements and standards. We also provided three months of maintenance and support services after the website was launched to ensure its stable operation and timely handling of client feedback and suggestions. Throughout the entire project, we maintained good communication and cooperation with the client, and together we successfully completed the project.