01 · Research
Find where customers lose control of the system.
Interviews exposed the operational gaps behind the clutter. A quantitative survey then measured the strongest signals across navigation, monitoring, accountability, security, and mobile access.
Navigation
No clear home, navigation model, or visible key-management path.
Responsive access
Important portal actions were not usable across smaller screens.
System visibility
No performance plots for memory, connections, bandwidth, or CPU.
Accountability
No history trail for actions or ownership of configuration changes.
Security
Critical and irreversible actions lacked OTP confirmation.
Self-service
Instances and SSL certificates could not be created inside the portal.
65%
rated navigation below average
78%
struggled to find features or information
82%
called performance plots important or essential
90%
said history would improve accountability
75%
would use the portal on mobile
Make the system observable
Users needed real-time performance plots, complete certificate details, and active or inactive instance status.
Design response: Keep operational state visible at the point where decisions are made.
Make actions accountable
Teams asked for history, role-based permissions, clearer ownership, and safeguards around important changes.
Design response: Attach identity, permission, confirmation, and history to every high-risk action.
Move routine work into the portal
Instance setup, SSL creation, category management, and mobile access depended on fragmented or unavailable paths.
Design response: Turn repeatable operations into guided self-service flows.
02 · Define
Make complex administration visible, safe, and self-service.
The redesign was not a dashboard reskin. It had to establish one operating model: show system state, help people find the right task, protect high-risk actions, and guide technical setup without hiding its consequences.
Success criteria
What the new portal had to prove.
- 01
A first-time user can locate every major portal area from one clear home.
- 02
Operational status and performance remain visible without opening separate tools.
- 03
Critical actions communicate consequence and require role-aware confirmation.
- 04
Instance and certificate creation become guided, recoverable workflows.
- 05
Core management tasks remain usable on desktop, tablet, and mobile.
03 · Architect
Organise the portal around customer operations.
Six product areas replaced a collection of disconnected utilities. Each area keeps information, creation, management, and accountability in the same task context.
- 01
- Overview
- Keys, C-Code, expiry, system health, search, and recent activity.
- 02
- Instances
- Status, IP address, uptime, resource plots, management, and guided setup.
- 03
- Certificates
- Complete certificate data, lifecycle actions, and a guided SSL builder.
- 04
- Web categorization
- Search, highlighted matches, assignment visibility, and custom categories.
- 05
- Signatures
- Expandable records and a three-step creation flow with optional context.
- 06
- Team
- Four roles with permissions matched to operational responsibility.
Role architecture
Access follows responsibility—not convenience.
Technical discussions established four roles so highly sensitive settings are not available to everyone.
- Super Admin
- Full system and team control
- Admin
- Day-to-day portal administration
- Technical Team
- Instances, certificates, and technical operations
- Procurement Team
- Subscription and commercial access
04 · Design
Turn research signals into interaction decisions.
Each decision connects a retained user signal to a product structure and the operational change it creates.
Decision 01
Use a focused tab model instead of a sidebar
Evidence
Leadership wanted to avoid a dense sidebar, while research showed that newcomers already felt overwhelmed.
Decision
A compact primary navigation exposes only the major product areas and keeps the active section unmistakable.
Impact
The portal gains a clear home without replacing clutter with another long control surface.
Decision 02
Treat each instance as an operable system
Evidence
The previous portal showed instance information but offered little interaction and no live performance context.
Decision
Each instance exposes status, IP address, uptime, management actions, and dedicated resource plots.
Impact
Administrators can understand health and act from the same operational context.
Decision 03
Protect irreversible actions at the moment of risk
Evidence
Users could mis-click destructive actions, while the existing system lacked explicit consequence and OTP safeguards.
Decision
Destructive flows state that the action is irreversible, explain the consequence, and require OTP confirmation.
Impact
Security becomes part of the interaction instead of a warning remembered outside it.
Decision 04
Convert expert procedures into guided builders
Evidence
Instance and certificate creation were highly requested but involved technical decisions that could overwhelm new users.
Decision
Instance setup becomes four stages; certificate setup branches into upload or self-signed creation with only relevant fields.
Impact
Complex configuration becomes self-service without removing the information experienced users need.
Need image by Mukund
Responsive home and system overview
Add the final desktop, tablet, and mobile screens showing key details, search, expiry states, health, and recent activity.
Need image by Mukund
Instance monitoring and management
Add the instance list, management state, IP and uptime details, performance plots, and destructive-action modal.
Need image by Mukund
Four-step instance builder
Add deployment choice, hardware requirements, installation guidance, and activation-key steps.
Need image by Mukund
Certificate detail and SSL builder
Add the transparent certificate view plus upload and self-signed certificate creation paths.
Need image by Mukund
Categories, signatures, and team access
Add search and assignment states, signature creation, and the four-role team-management interface.
05 · Validate
Measure whether the portal became easier to operate.
Post-redesign evaluation recorded stronger navigation, monitoring usefulness, secure action handling, mobile access, and overall satisfaction.
4.5/5
Navigation rating
Up from 2.5/5 in the retained evaluation
95%
Performance plots
Rated the new monitoring view very useful
−70%
Unauthorised attempts
Reported after history and OTP safeguards
30→75%
User satisfaction
Reported increase after the redesign
Delivered impact
The portal now carries the operational context.
- Responsive access
- Mobile accessibility increased by 60% across the redesigned portal.
- Operational clarity
- Keys, C-Code, expiry, live status, and performance move into visible decision points.
- Secure administration
- History, four roles, confirmations, and OTP create a traceable action model.
- Self-service
- Instance, certificate, category, and signature creation become guided portal workflows.
Accessibility decisions
Responsive access without hidden meaning.
Status uses written labels alongside colour so meaning does not depend on colour alone.
Critical actions use explicit verbs, consequence copy, and confirmation rather than ambiguous icons.
Responsive layouts preserve the task hierarchy instead of hiding core actions on smaller screens.
Search, section labels, field guidance, and validation messages keep navigation and forms understandable.
Original project archive
Customer Portal Redesign · Framer