Work order: Website UI/UX design and development optimization project
1. Project background and objectives
Project background: We hope to carry out new UI/UX design and front-end development optimization on the static pages of the current website (https://166ai.com/) to improve the overall visual effect, user experience and interaction efficiency. The new solution needs to integrate the excellent design elements of Lingoace, VIPKID, Lingo Bus, and NiceKid, and at the same time refer to website styles such as Skillshare, LearnWorlds, Codecademy, and Teachable (as a design reference only, not a direct competitor) to create an interface suitable for users of different ages from 6 to 18 years old. The website will be available in four languages: Chinese, English, French and Spanish to ensure the support of international needs.
Project Objective:
- By comprehensively reviewing the existing page, optimizing the visual design and interactive experience, the page is both professional and dynamic, suitable for the perception and acceptance of users aged 6 to 18.
- The design plan incorporates the excellent design elements from the reference case to create a unique and user-friendly page layout.
- Realize a fully terminal responsive design to ensure that the website is well displayed on desktop, tablet and mobile devices.
- Complete the interface design and switching mechanism of four multilingual versions: Chinese, English, French and Spanish.
- In addition to providing design scheme documents, it is also necessary to complete front-end development, realize the complete landing of the design draft, and ensure that the final product meets SEO and performance optimization standards.
2. Scope of the mandate
2.1 Website UI/UX review and research
- Current status evaluation: Conduct a comprehensive interface and user experience evaluation of the existing website, covering page layout, navigation, color, icons, interaction process and loading speed, etc.
- Reference research: conduct in-depth research on the excellent design cases of Lingoace, VIPKID, Lingo Bus and NiceKid, and refer to the style elements of Skillshare, LearnWorlds, Codecademy, Teachable and other platforms to extract design inspiration applicable to this project.
- Report output: Write a detailed review report, listing improvement suggestions, user experience pain points and design directions, paying special attention to the usage needs and cognitive differences of users aged 6 to 18 in different age groups.
2.2 Formulation of new visual design plan
- Visual design guidelines: formulate overall visual design specifications, including brand colors, fonts, icons, buttons, interactive animations and prompt information.
- Solution ideas: Integrate the design elements of Lingoace, VIPKID, Lingo Bus and NiceKid to form a diverse, friendly and professional design style suitable for users aged 6 to 18.
- Design scheme output: Provide at least three sets of conceptual design schemes to choose from, and iterate according to feedback to ensure that users of all ages can accept them.
2.3 User experience and interaction process optimization
- Information architecture optimization: Optimize the information architecture and navigation of the website to ensure that users can quickly find the content they need.
- Interactive process design: Design intuitive operation processes for students and parents respectively, such as parents' learning progress viewing, homework feedback, course reservation and other functions.
- Prototyping: Make high-fidelity prototypes and interactive flow charts to show the responsive design and dynamic effects of each terminal (desktop, tablet, mobile phone).
2.4 Multi-language interface design
- Multi-language solution: Design a multi-language interface that supports Chinese, English, French and Spanish to ensure that content, buttons, navigation, etc. can be automatically adjusted and adapted according to the language.
- Reference case: Learn from the processing method of Lingoace multilingual interface to solve the problems of text length, typesetting and cultural differences in different languages.
- Template and switching mechanism: Provide multi-language design templates, interface switching solutions and related documents to ensure the smooth implementation of subsequent development.
2.5 Complete front-end development and delivery
- Development and implementation: After the design plan is confirmed, the front-end development team will complete the development of the static page of the website according to the design draft, and realize all design details and interactive animation.
- Responsive and SEO optimization: Ensure a responsive layout of all terminals during the development process to improve page loading speed and SEO friendliness.
- Overall Acceptance: Provides complete code, design documentation, test reports, and maintenance instructions to ensure that the website meets Class A standards in performance, security, and user experience.
3. Deliverables
- Review report and research summary document: including current situation assessment, improvement suggestions and reference case analysis.
- High-fidelity design drafts and visual design specifications: including visual design drafts (Figma/Sketch/PSD files) of all pages and unified design specification documents.
- Prototype interaction design file: shows interaction process and responsive design (using tools such as Figma Prototype, InVision, Axure RP, etc.).
- Multi-language interface design template and switching mechanism document: including four versions of design schemes: Chinese, English, French and Spanish.
- Complete front-end development code and documentation: including static page code, interactive implementation, performance optimization and SEO support documents to ensure the implementation of the design plan and complete comprehensive acceptance.
4. Quotation and time estimate
Each team is requested to provide detailed quotation and project time estimate according to the above requirements. The quotation should cover design research, visual design, prototyping, multilingual interface design and complete front-end development work.