# CRM Deal Detail Design: Identity, Stages, and Tasks Source: https://www.jvds.cn/en/share/ui-design/crm-deal-stage-task-result-u098 Language: en Published: 2026-10-18 Author: JVDS Design Studio These CRM details group owner, organization, contact, amount, stages, notes, and tasks around Palo Alto Networks deal. Color and large containers make the page lively, but information roles matter more. Sales staff need to identify the deal, understand progress, then handle specific work. These layers should not merge into one generic completion state. ## Key takeaways - Large headings and people identify the deal, while a separate overview contains amount and probability. - Deal results, stage progress, and task completion occupy different positions and scopes. - Mobile separates Status and Workspace tabs while retaining task names and participants. ## Identity and overview have separate regions The desktop uses a light/dark split for one layout. Bruce Banner sits above the heading, with organization and Wendy Darcy on its right. A blue General card below left holds 33,000, Hot Deal, 65%, and dates; Details lists contact information. Large title identifies the object and blue card provides overview, without forcing all text into one table. Won and Lost are filled buttons at the upper right, above stages and workspace. Deal-result actions are separate from notes, calls, and email. The amount stays prominent without entering every task card, supporting continued work on one clearly identified deal. Cards, headings, and entries retain positions across themes, showing structural continuity. Actual theme adaptation still needs checks of fine lines, labels, and text, especially light text in pale purple and gray text on dark areas. Complete container outlines do not guarantee local readability. ![Light/dark comparison with large deal title, blue General card, and stages and tasks on the right](https://www.jvds.cn/upload/2026/1008/d187-tp/u098-i1.webp) Identity, overview, and workspace have separate positions; result buttons sit independently above. ## Stages and tasks describe different progress The stage bar aligns circles and bands above 36 Days, 24 Days, 48 Days, and 0 Days. Color and duration suggest progression, but stage names are not visible. Time spent and current business stage are different information; names beside circles would give durations clear objects. Notes, Activity, Propose Times, Call, Email, Files, and Documents precede Focus tasks. Clarification of details identifies a follow-up call, with meeting type, count, 30 Minutes, and participants below. The task explains concrete work more fully than the stage bar. JVDS prefers naming deal stages separately from [task completion](https://www.jvds.cn/en/share/ui-design/crm-ui-ux-design). Completing a call changes that task; moving a stage or winning a deal needs its own object and feedback. Check as completed and Won already occupy different positions. That separation can support explicit results, records, and necessary undo options. ## Mobile work retains task ownership The phone keeps owner and deal name above Status and Workspace, with a green rule beneath Workspace. Circular icons replace desktop text entries, followed by note input and Focus. Tabs separate status viewing from work instead of squeezing every overview into a small screen. Clarification of details retains phone icon, name, short explanation, and participants Wendy Darcy and Bruce Banner. A circular check replaces the completion button beside a more menu. An organization task uses another icon and green check, creating difference, but black and green need words or consistent rules to explain availability, completion, or other states. Meeting type and duration are not all retained on this mobile card. Prioritizing object and task names is a reasonable starting point. [Unlabeled icons](https://www.jvds.cn/en/share/ui-design/product-icon-system-design) need visible names, supporting explanations, or subsequent headings so people away from their desks can confirm the activity they are recording. ![Mobile Workspace with Focus call task and participants](https://www.jvds.cn/upload/2026/1008/d187-tp/u098-i2.webp) Mobile compression retains task identity; completion still needs understandable naming. ## Frequently asked questions ### What should a mobile task card retain? Prioritize task name, associated deal, participants or owner, current state, and primary action. Duration can move into details, but compression should not detach completion from its object. ## Design review checklist - Name stage circles and associate durations with definite stages. - Separate actions and feedback for tasks, stages, and deal results. - Check mobile icon and checkmark meanings, keeping object ownership clear. ## Organize objects and states in a sales workspace If CRM details need deal overviews, follow-up tasks, and mobile records, JVDS Design Studio can help with UI/UX design and website development to define information levels and action scope. Begin with the existing sales flow to discuss correspondence between stage names, task cards, and completion feedback. [Contact JVDS to discuss your project](https://www.jvds.cn/contact)