Kanban for status at a glance
The board view uses colour-coded status columns with card counts and assignee avatars, so a team lead can see the project state without opening anything.
SaaS & Productivity / 2026
WeWorkable
Boards, updates, resources, and chat — a complex product made clear in one workspace.
WeWorkable is a project and task management SaaS. We designed the full product in Figma and built the front-end in React, covering six core product views: workspace, updates, in progress, board, manage, and notifications.
- Service
- UI/UX & Branding + Engineering
- Industry
- SaaS & Productivity
- Solution
- Enterprise Web Application
- Engagement
- Design and development
Project overview
Six product views, one coherent system.
The product covers the full range of a team's working day: kanban boards for project status, status tables for task tracking, a manage view for team permissions, a chat for turning conversation into action, a notifications feed, and a pricing page for new customers.
The design challenge was making a dense, multi-feature product feel obvious to navigate — not just functional, but actually easy to use from day one.
The challenge
The design and engineering challenge
Work management products accumulate complexity fast: tasks have statuses, priorities, assignees, flags, and due dates; boards have columns, filters, and drag-and-drop; chat needs threading and action tracking. All of this had to coexist in one interface without overwhelming the user.
- Status tables with multiple columns of data needed a clear visual hierarchy.
- Kanban boards needed to be scannable at a glance.
- The chat needed to connect messages to tasks, not just hold conversations.
- The pricing page had to compare three tiers without a wall of feature text.
UX approach
UX focus — making a multi-feature product navigable
Every view was designed to give users one clear orientation point — a primary object — and secondary actions arranged around it.
Tables for density with clarity
The task tracking table surfaces status, risk flags, priority, assignee, and progress in a dense but scannable row format, with column controls to show or hide fields.
Chat that connects to work
The workspace chat is built alongside the task list, so conversations can reference in-progress work and turn into actions without switching context.
Pricing that earns the upgrade
Three tiers — Free, Starter at $19, and Enterprise at $99 — sit side by side with a 30-day money-back guarantee and a feature comparison that highlights the decision point clearly.
Selected work
A data-heavy product, kept navigable.
Kanban boards, task tables, team management, and pricing.
UI and product direction
Design focus — dark navy and orange on a data-dense canvas
The visual language uses a dark navy base with an orange accent to give the product a focused, professional character, while keeping information dense without feeling crowded.
- Colour
- Dark navy base with orange as the primary action and emphasis colour, creating clear hierarchy in dense data views.
- Typography
- Compact, legible type at small sizes — table rows carry a lot of information and need to be readable at a glance.
- Components
- Status badges, priority flags, avatar stacks, and progress indicators built as a consistent component set used across every view.
- Layout
- A persistent left navigation keeps orientation constant as users move between boards, tables, chat, and notifications.
Our process
From understanding the problem to a focused product direction.
- 01
Define the product surface
We mapped six core views — workspace, updates, in progress, board, manage, and notifications — and defined the information architecture across them.
- 02
Design in Figma
We designed all six views in Figma, building a shared component library covering status badges, tables, cards, chat, and pricing components.
- 03
Build the React front-end
We implemented all views in React, including the kanban board, task table, team management, notifications feed, chat, and pricing page.
- 04
Refine the data-heavy screens
We iterated on the table and board views specifically, where density and clarity had to coexist, until both felt natural to use.
Execution
React front-end across six product views
The complete front-end was built in React from the Figma designs, covering all the core product surfaces a work management tool needs to function.
- Six product views built in React
- Kanban board with status columns
- Task tracking table with multi-column data
- Team management, notifications, and workspace chat
- Three-tier pricing page
Impact
A complex product made clear
"BlastUp Labs took our outdated frontend and rebuilt it in React from the ground up. The performance improvement was immediate and the codebase was clean, well-structured, and easy for the rest of the team to maintain." — WeWorkable team
- Full Figma design across six product views
- Complete React front-end implementation
- Kanban, tables, chat, and notifications in one system
- Pricing page with three-tier comparison
Closing perspective
Density is a design decision
The project reinforced that in productivity tools, the hardest design problem is not what to show — it is how much to show at once. Every row, badge, and column needed to earn its place in the interface.
Other projects
More products and experiences shaped by BlastUp Labs.
AI-Accelerated Delivery
AI + MCP DELIVERY SYSTEMS
Human-led / AI-enabled
Better digital work, delivered faster.
We combine experienced strategy, design, and engineering with AI tools and MCP-connected workflows to research, prototype, build, and refine more efficiently.
Faster exploration. Quicker iterations. Production-ready delivery.
EXPERT DESIGN & ENGINEERING TEAM
Let’s shapewhat comes next.
Skip the long forms and start with one focused 30-minute conversation.
Fast, practical conversations for founders and product teams.
Loading available times…