Category
Design OPsWeb
Date
2023
Highlight
- Led the Redesign of New Web Design System as the project owner and the main contact person.
- Assigned tasks and distributed responsibilities within the whole Product design team, also in charge of component review.
- Streamlined the underlying styles, simplifying font styles for PC and Mobile Web
- Enhanced component production and specifications to create a comprehensive and user-friendly Figma Component/Variants system, promoting clear usage guidelines for the team.
- Ensured alignment between design and development teams, establishing a comprehensive Storybook.
Background
- Discrepancies exist between the current design drafts and the implementation of the web frontend, as well as the completeness of Storybook.
- Compared to iOS and Android Guidelines, the Web Guidelines have always been relatively basic, including discrepancies in component creation, naming, variants, font application, etc.
- Web Frontend team has commenced efforts to allocate manpower for assisting Design Ops. Apart from tackling issues as they come up, Product Design Team is also taking the opportunity to review and revamp the entire Web Guideline.
Goal
- Collaborating closely with the Web Frontend team to establish a comprehensive Storybook, ensuring consistent design guideline across components
- Optimizing existing components by filling undefined states, e.g., Button, Shape, Shadow.
- Aligning Web component structure with iOS and Android guideline, while extending components to include Figma Variants and Variable.
- Conducting an inventory and removing unused features, components, icons, and images from the codebase.
Project Members
- Owner：Hanying、Deleav
- Team Support：FE Developer x3, Product Designer x8
My Job
- Acted as project lead, serving as the primary liaison for discussions and communication with frontend partners.
- Pre-assigned tasks to design team members, communicated completion requirements, and oversaw subsequent component reviews.
- Completed organization of foundational styles, including streamlining PC and Mobile Web font styles, adding Color Hover State, adjusting color palette naming conventions, etc.
- Discussed component implementation methods with the FE team and planned out the rebuilding Roadmap.
- Allocated design team tasks internally, reviewed modifications upon completion, and delivered them to the frontend. All relevant portions of the design team's OKRs have been fulfilled.
- Responsible for rebuilding components such as Button, Modal, Alert, etc.
Project Process
1. Create Project Documentation
/w=3840,quality=80,fit=scale-down)
- Research & Brief the team on project details, execution plan, and timeline
/w=3840,quality=80,fit=scale-down)
3. Use Google Sheets for clear task allocation and progress tracking
/w=3840,quality=80,fit=scale-down)
4.Reconstruct Components
OLD Ver
/w=3840,quality=80,fit=scale-down)
New Ver
/w=3840,quality=80,fit=scale-down)
5.Enhance Usage Guidelines for Web Design
OLD Ver
/w=3840,quality=80,fit=scale-down)
New Ver
/w=3840,quality=80,fit=scale-down)
/w=3840,quality=80,fit=scale-down)
Impact of the Project
- Clarified usage rules for each component within the team.
- Established more comprehensive and user-friendly Figma Components/Variants, supplementing rules for buttons, alerts, modals, etc.
- Integrated PC/Mobile Web fonts, reducing the burden on designers in creating drafts.
✨ Additional Side-Project：Web Icon Cleanup Initiative
Project Background
- From a frontend perspective:
- The frontend codebase is filled with variously sized, unspecified, and repetitive icons. This occurs because there is currently no unified rule for downloading and storing icons, resulting in each new feature requiring downloading icons from design drafts and placing them according to functionality.
- From a design perspective:
- The icons in the guidelines are not comprehensive; some functionalities have custom-made icons that were not discussed with other designers and included in the guidelines. Additionally, the naming of icons included in the guidelines lacks standardized rules, often resulting in icons with a line style being categorized with solid icons.
Tasks
- Identified inconsistencies between the existing icon component library and design drafts with frontend engineers.
- Removed outdated icons not in use and replaced them with new icons.
- Redefined naming conventions, establishing rules for previously mixed arrow names.
- Redefined the categorization of icons and images.
Impact of the Project:
- Simplified naming to ensure consistent categorization.
- Converted previously scattered icons into components for easier management by designers.
- From an engineering perspective, archived icons do not need to be re-uploaded, preventing the reappearance of files with the same pattern but different sizes in the code.
