Productivity Tool
Overview
The whiteboard is a core module of the RELAY designer collaboration platform, aimed at enhancing the work efficiency of designers in the JD Design Centre. It includes features tailored to address the following use cases:
Storing project references
Design Framing and Synthesizing
Design wireframes
Documenting the planning process
This was a self-initiated project within the design department, where I took on the roles of both designer and product manager. My primary responsibilities included breaking down the functionality, aligning features with internal needs and available resources, and strategically creating the feature list while planning for implementation and iteration phases.
Team
JD.COM Platform Design Center -
Platform Product Design Department -
Traffic Ecosystem Design Team
Outcome
In-house adaptation by designers
Timeline
2021 Q2 - Q4
Role
Product Designer
Module
In-house Tool
Tools
Figma
Product Design Road Map
01
02
+
+
03
Value Proposition
Painpoint in Designer’s work flow
Competitor Analysis
Competitor’s features and product positioning
Design
Create UX & UI Design
Product Positioning &
Road Map
Identify feature priority
Product Requirement
List
Breakdown the features into to-do list
Communicate
Feasibility
Make product plan
04
06
05
01
Value Proposition
Research Subject
Colleges
Self
Research Method
Interview
Self-experience
Outcomes
User Journey Map
Scenario Synthesis
User Insight
Insights
During the “product requirement breakdown” design phase, designers are having difficulties referencing and presenting all the seperately stored references
There is no prototyping tool to present tthe page flow
Indentified two main insights of repeatively appeared painpoints during the “usere need framing” and “product requirement breakdown” design phases with the findings of interviewing twenty target users and self experience.
02
Competitor Analysis
Breakdown competitor’s features and product positioning.
Research Suject
Domestic Competitors
International Competitors
Research Method
Information architecture breakdown
Key Functionality Analysis
Outcomes
List of all features and feature structures
Competitor’s coverage of feature
Comparison of pros and cons of all competitors
Insights
Coverage of feature：
Pros and Cons：Miro has the most features and most detailed features
Basic tools, external material import, and collaboration capabilities
Most domestic competitors support mind map functionality
Basic Tools
A
B
C
Collaboration
File Management
All competitors offer basic tools, templates, material import, and online collaboration capabilities.
Domestic competitors have high mind map coverage with well-refined details.
Coverage
Feature Types
A1
Diagramming Tools
Sticky Notes, Shapes, Line, Text
A2
Ideation Tools
Mind Map, Sheet, Art Board
A3
Templates
Design Methods, Components
A4
Import Files
Local File, Cloud File
B1
Share
Share File, Export File
B2
Community
User Template, User Plugins
B3
Presentation
Slide Show
B4
Real-Time Collab.
Meeting, Synch. Editing
B5
Admin
Team Management, Set Access
C1
Version
Edit History, Playback History
C2
Others
Multi-devices, Personalization
03
Product Positioning & Road Map
Plan feature priority by balancing four key dimensions: Industry-Wide Features to ensure competitive parity, Differentiating Features to establish unique value, User-Driven aspects to address framed user pain points, and Product-Centric considerations to align with long-term strategic goals based on competitor analysis findings.
Additionally, we incorporated presentation and prototyping functionalities into the feature requirement to meet the team’s frequent cross-departmental and cross-level reporting needs, as well as the requirement to demonstrate interaction flows when collaborating with peers in different departments.
A1
A2
A3
Must-Have
Diagramming Tools
Ideation Tools
Templates
A4
B1
Should-Have
Import Files
Share
A5
+
B3
Nice-to-Have
Prototyping
Presentation
B2
B4
B5
C2
Backlog
Community
Real-Time Collab.
Admin
Others
Subjective
Objective
user-driven
A1
A2
B4
B5
C2
B3
B2
B1
A4
A3
product-centric
Industry-Wide Features
Differentiating Features
A5
+
04
Communicate Feasibility
After finalizing the features, we collaborated with the development team to create detailed requirements and version lists, taking into account development cycles, costs, and feasibility. Through evaluation, we categorized the functional requirements into Custom-Built Features and Reusable Features, with some foundational functionalities leveraging existing functionalities from the RELAY design collaboration platform.
MS1
MS2
MS3
Custom-Built Features
Custom-Built Features
Custom-Built Features
Reusable Features
A1
Diagramming Tools
Sticky Notes, Shapes, Line, Text
B3
Presentation
Slide Show
A4
Import Files
Local File
B1
Share
Share File, Export File
A2
Ideation Tools
Mind Map, Sheet, Art Board
A3
Templates
Design Methods, Components
A4
Import Files
Cloud File
A5
+
Prototyping
UI Wireframe Elements
B5
Admin
Team Management, Set Access
B4
Real-Time Collab.
Meeting, Synch. Editing
05
Product Requirement List
We broke down the features into detailed functional points (e.g., within the basic tool “Sticky Note,” we specified multiple shapes, support for proportional scaling/rotation, color customization, and internal text editing). Simultaneously, we established a requirements management list to track the status of each feature and its completion milestones. To monitor weekly progress, we utilized a Gantt chart, and for iterative improvements, we created a bug list and a “to-be-refined” features list during the requirement review phase. Additionally, we formed an internal test user group, inviting colleagues to participate in evaluations and provide feedback. All feedback was documented and converted into a consolidated requirements list for further action.
06
Design
Layout
Diagramming Tools
A1
Map, Help, and Feedbacks
Presentation Tool Bar
Basic Tool Bar
Hover Editor Bar
File Management & Collab. Tool Bar
Text, Sticky Note
Basic Shapes, Line
Ideation Tools
A2
Templates
A3
Mind Map
Sheet
Change Page
Focus Mode
List of Art Board
Presentation
B3
Result after Launching
After the module launch, combined with the comprehensive design functionality upgrades on the RELAY platform, it received widespread acclaim. To date, following the completion of UI design-related feature modules, thousands of designers across the entire corporation have fully migrated their work tasks to this platform.
Related Projects
Contact Me
E-mail:
Tel:
annyjialuli01@gmail.com
(+1)778-697-4718 Canada