Website CRM Dashboard
When designing the DataPollex CRM dashboard, the core question I kept asking was: what does a person actually need to do in the first 60 seconds of opening this? The answer shaped every decision.
Some of the early stage wireframing that helped me shape the final design. I worked with various chunking of the side bar elements and positions of the top bar. The final design was chosen based on the most functional one where the left side bar elements work as page specific interactions whereas the top bar is the constant point interaction.
Dark mode wasn't a trend choice; it was a continuity one.
The client's existing website is dark-only, so carrying that visual language into the CRM was essential for product unity. A user moving between the public-facing site and their back-office dashboard shouldn't feel like they've switched products. The dark base creates that seamless transition while also benefiting operators who spend long hours inside the tool.
The red was non-negotiable; so I made it work harder.
With the brand color fixed, the design challenge shifted from choosing an accent to deploying it with intention. Crimson appears on the primary CTA, active navigation states, and chart series - building a consistent visual grammar where red reliably signals importance or interaction. When a color is locked, consistency becomes the craft.
For the Lead Pipeline chart, I moved away from a grouped bar chart and chose a horizontal stacked bar. Pipeline data is inherently sequential and additive, Contacted feeds Negotiation feeds Closed. Stacked bars communicate that relationship structurally, not just visually. Users can read totals and stage breakdowns in a single glance, which matters when you're checking this screen every morning.
The Recent Enquiries table anchors the bottom as the operational workhorse. Category badges, sortable columns, and truncated descriptions give users enough context to triage without opening every record.
Overall, the layout follows a deliberate information hierarchy: health metrics at the top for a quick pulse check, charts in the middle for trend context, and the action-oriented table at the bottom where decisions get made. The constraints - dark mode, brand red - weren't limitations. They were the brief. Good design works within them.
Iterations
Here are some of the iterations i made
Opted for a donut chart which helps to reduce the amount of red in the design.
Also, i tried out a light mode version of the design.
Reviews
4 reviews
The project makes a really good first impression. The dark theme with the red accent is consistent and builds a cohesive visual identity. The information hierarchy on the dashboard is clear: KPIs at the top, charts in the middle, table at the bottom, a classic but effective layout aligned with the "match between system and the real world" heuristic. The wireframes also show solid process thinking behind the final result.
I agree on the pie chart point. A donut chart with visible spacing between segments would handle the red monotony much better and improve the readability of the divisions. It's also worth considering toning down the icon saturation slightly, a subtler shade of red there would let the UI breathe a bit more.
I can clearly see the hand of someone who understands layout and typography. Refine that chart detail and this will be a genuinely strong portfolio piece! 💪
Kudos Roy,
This is definitely a tricky one with the red being a non-negotiable. I would however love to see a version where you had your creative freedom. Becuase one thing is for sure that you know your design layout and alignments. Everything is where it's supposed to be with the only thing working against it being the colors.
Was there no wiggle room to at least limit the shades in certain elements say the icons could use a much subtle shade of the red.
Would have also opted for a donut chart with visible border spacings in place of the solid pie chart for clear distinction of the divisions due to the monotone red limitation once again.
Still an incredible delivery regardless, pretty solid layout, hierarchy and typography.
Great job, Roy! I love that you started with the question, "What does a person actually need to do in the first 60 seconds of opening this?". It shows a high level of UX thinking and empathy for the user's daily workflow.
I also like how you structured the information hierarchy: placing critical metrics at the top, followed by Sources and Pipelines in the middle, and the Enquiries table at the bottom as the operational workhorse.
Whatcould be improved:
- It’s currently a bit difficult to differentiate between the categories in the table. Since you’ve highlighted them so strongly, I assume they are more important than the "Subject" column. I suggest using different colors for the tags (e.g., specific colors for Sales vs. Support). This would help the admin’s eye catch specific categories immediately, reducing cognitive load when triaging a long list.
- I wonder how you would show if a component is truly critical and demands an immediate reaction? Since red is your primary brand color, it might get lost. You showed "Action Required" in the Pending Queries, but I’m curious how other metrics would signal a "danger" state without blending into the overall red theme.
- Please check the color contrast on the tags using WCAG tools. White text on a bright red background can be difficult to read for long periods. Additionally, I recommend checking the font size in the Lead Pipeline tooltips; it looks a bit small for a dashboard that people will be staring at for hours.
Overall, the project is very strong!
Hey Roy,
I really like the core question you set for yourself at the beginning. It shows a thoughtful approach to the problem and a good way of framing the project.
I also appreciate how you showed the iterations and explained the reasoning behind them. That kind of transparency makes the design process much easier to follow.
At first glance, the donut chart feels a bit squished. I would personally expect it to be a more regular circle, unless that shape was intentional. If it was deliberate, I’d be curious to hear what the reasoning was behind that choice.
On the screen itself there’s also quite a lot of red, which I understand is your primary color. I’d consider introducing some semantic colors so red doesn’t lose its importance. For example, in the recent enquiries section, different statuses could use different colors. That would make it easier to quickly spot differences and understand the state of each item.
You might also like
Improving Dating App Onboarding: A/B Test Design
FORM Checkout Flow - Mobile
A/B Test for Hinge's Onboarding Flow
Accessibility Asse
The Fitness Growth Engine
The Relational Workspace
Popular Courses
UX Design Foundations
Introduction to Figma
Design Terminology
