Overview
Timeline: January - August/24 - 07 months
My role: UX/UI Designer
Website Developer: Vinicius Rodrigues
Where Cybersecurity Meets Trust
Over seven months, DataOpus transitioned from a product under DisruptiveOps to a standalone cybersecurity brand. The team partnered with CEO Jonathan Jenkins to address major flaws in the original website, including poor usability, unclear messaging, and a weak visual identity. These issues were impacting client retention and investor trust—critical for a cybersecurity company.
The team redesigned the website with a clear structure, refined content, and a modern visual identity that emphasized trust and professionalism. Despite challenges with WordPress, strong collaboration ensured a faithful implementation of the design. The new site positioned DataOpus as a credible, investor-ready leader in database-focused cybersecurity.
Where Cybersecurity Meets Trust
The original website suffered from several usability and design flaws:
The user experience was confusing, making it hard for visitors to understand what DataOpus offered.
Content lacked clarity, structure, and hierarchy.
Visual identity didn’t reflect a trustworthy or professional company, which is essential in the cybersecurity space.
Client and investor retention was low, largely due to a poor first impression.
These challenges were stalling business growth and undermining the company’s credibility with a highly technical and security-conscious audience.
Goals
Redesign the website with a modern, intuitive layout
Strengthen the brand identity to reflect expertise and reliability
Enhance usability and provide a better user journey
Attract and retain clients, as well as spark interest from potential investors
Position DataOpus as a reference in database-focused cybersecurity solutions
Research & Analysis
While DataOpus has no direct competitors, we conducted a competitive analysis with indirect players like:
SonarQube
Coverity
Checkmarx
Micro Focus (Fortify)
Perforce
We studied their positioning, UX patterns, pricing models, integration capabilities, and how they communicated their value. This helped us:
Define key differentiators for DataOpus, such as its proprietary SIAS (Static Information Architecture Analysis)
Identify gaps in UX and content structure
Benchmark visual styles and tone suited for technical audiences
Collaboration & Development
We used an agile, iterative approach throughout the 7-month project. Collaboration was key:
CEO provided vision, business goals, and final approvals.
Design & UX translated business strategy into an intuitive and visually engaging site.
Developer translated Figma files into a responsive WordPress site.
One key challenge was WordPress’s limitations when implementing pixel-perfect design. We overcame this through strong communication and frequent check-ins, resulting in a faithful and optimized translation of the design system
Desing Process
Before initiating the redesign, we conducted a detailed audit of the original website to identify specific issues and opportunities:
Navigation: Pages were hard to find and poorly labeled. Key services and product features were buried or inconsistent.
Visual Design: Outdated layout, poor use of whitespace, inconsistent typography, and lack of visual hierarchy weakened the site’s professional appeal.
Content: Messaging was vague, filled with jargon, and failed to communicate value clearly. There was no focus on what made DataOpus unique.
Brand Trust: There were no testimonials, case studies, or recognizable trust signals to reassure prospective clients or investors.
Responsiveness: Mobile experience was broken, with layout issues and slow loading times.
This evaluation gave us a clear roadmap for improvements and helped prioritize usability, content clarity, and brand credibility.
Analyzing the Original Website
The redesign involved a full transformation:
Information Architecture: We restructured the entire site to prioritize clarity and ease of navigation.
Content Strategy: Refined messaging to clearly explain services, technologies, and value propositions.
Visual Identity: While keeping the logo, we introduced a modern color palette, typography, and iconography that emphasized professionalism and trust.
UI Design: High-fidelity wireframes and interactive prototypes were built in Figma.
Accessibility: Ensured better contrast, scalable typography, and keyboard navigation support.
We used feedback loops and CEO reviews to align the visual and functional design with the company’s strategic goals. The old DataOpus homepage included a range of technical features and service offerings but failed to communicate them effectively to users.
Homepage
1. Lack of Clear Messaging (What + Why)
The hero section headline is vague: “Database Forensics for Real Time Health Metrics and Remediations” is overly technical without explaining the core value proposition.
No clear explanation of what the company does for first-time visitors.
The CTA (“Discover More”) lacks clarity on what the user will find next
2. Overwhelming Visual Density
Multiple sections stacked with little whitespace or visual breathing room.
Too many colors and styles fighting for attention (e.g. green buttons, red/blue/teal backgrounds, multiple icon styles).
Misuse of image-heavy cards that don’t add informative value (e.g. the 3 image tiles under "Database Resiliency").
3. Information Overload
The page attempts to explain everything all at once — products, platforms, metrics, exports, REST services, AI, etc.
No clear user flow — the visitor doesn't know where to focus or click next.
Jargon-heavy language (e.g. "Static Structural Analysis", "resiliency-based conditions", “RPC, etc.”) without explanation or context.
4. Outdated Design Patterns
Generic stock images (e.g. business people staring at screens) feel disconnected from the tech focus.
Navigation bar has too many links, some redundant or unclear (e.g. “News & Blog” vs “Resources”).
Footer is cluttered with repetitive contact info and social icons not aligned with the rest of the brand.
5. Low Accessibility & Responsiveness
No visible focus state or high-contrast CTA buttons.
Font sizes are inconsistent and could pose readability issues.
Layout likely lacks responsive design adaptability across devices.
Product Page
1. Outdated Aesthetics
The visual style feels dated and lacks modern polish (e.g., flat icons, inconsistent image quality, heavy borders).
The use of stock photography (smiling woman at a computer) feels generic and unrelated to the specific products.
2. Lack of Visual Hierarchy
Fonts and sizes don’t create enough contrast to guide the eye—especially in the product descriptions.
"OUR PRODUCTS" stands out, but the product names and descriptions below are not easily scannable.
3. Weak Product Descriptions
Very short, vague explanations
“Health: Quickly learn the real-time health of your database.” → What metrics? What databases
“Microservices: Access your risks and health metrics with RESTful services.” → What risks? What services?
4. No Call to Action (CTA)
No clear next step for users after viewing the products (e.g., “Request Demo,” “Schedule a Call,” “Download Datasheet”).
None of the product names appear clickable. There are no dedicated pages or deep links to learn more.
Platform Page
1. Information Overload
The page is extremely long, packed with charts, screenshots, and text with little breathing room.
Users are bombarded with detailed technical visuals before they understand the core value of the product.
There's no progressive disclosure — everything is thrown at the user at once.
2. Poor Visual Hierarchy
Important elements like the product name, benefits, and CTAs (calls-to-action) get lost due to lack of hierarchy.
All content sections are visually similar, with minimal contrast or visual cues to guide the eye.
Data-heavy visuals dominate the page without context, making it feel like a report instead of a marketing or product page.
3. Stock Image Disconnect
The large banner image (woman smiling with papers) doesn’t relate directly to the product or its use cases.
It takes up valuable above-the-fold space that could instead be used to deliver the product’s value proposition.
4. Lack of Clear CTA (Call to Action)
Nowhere on the page is there a clear, prominent action for the user to take (e.g., “Get a Demo,” “Contact Sales,” or “Try It Now”).
This reduces conversion opportunities and leaves the user unsure of what to do next.
5. Too Technical, Too Soon
The user is shown highly technical, detailed database analytics before they understand why this matters or how it helps them.
There’s a missed opportunity to tell a story or provide a simple, business-oriented explanation first.
6. Navigation Frustration
There's no sidebar or sticky navigation to help users jump between sections.
Scrolling is the only option, which makes it hard to scan or revisit important information.
7. No Clear Target Audience or Benefit
There’s no direct messaging addressing the user persona (e.g., IT admin, CTO, database engineer).
The value proposition is vague or buried deep in the page, rather than being front and center.
8. Design & Accessibility Issues
The font contrast and sizing aren’t optimal in some sections, especially within the screenshots.
Heavy reliance on images of code and UI tables makes the site less accessible and harder to interpret without zooming in.
Outcome & Results
The redesigned website delivered clear improvements:
Improved user experience and simplified navigation
Increased market visibility and credibility
New clients acquired and active interest from investors
A digital presence that matches the innovation and depth of the DataOpus offering
This transformation helped solidify DataOpus’s positioning as a trustworthy, forward-thinking leader in cybersecurity for database platforms.
Information Architecture
New Design
New Homepage
1. Hero Section
Clear headline: “Database Resiliency Made Easy”
Subheadline clearly explains the benefit
Bold CTAs: “Try it for free” + “Learn more” with good contrast
2. Clarity
Simplified, user-friendly language
Key benefits (discover, learn, improve) are broken down visually
Value-driven structure with sections that tell a story
3. Visual Hierarchy
Consistent styling, typography, iconography
Proper white space and padding give breathing room
Each section has a clear purpose and structure
4. User Flow / Navigation
Clean nav with focused categories
Logical scroll progression: value > features > platforms > trust
CTA placement encourages interaction throughout
5. Visual Design
Sleek, modern UI with updated iconography
Proper alignment, consistent card and section layout
Cohesive brand colors (neon green + black/white balance)
6. Accessibility
There's no sidebar or sticky navigation to help users jump between sections.
Scrolling is the only option, which makes it hard to scan or revisit important information.
7. Trust + Credibility
Stronger positioning via charts, data visualizations, and product dashboards
Use cases tied to real outcomes (cost savings, compliance, AI readiness)
8. Footer Design
Clean footer with refined layout
Reuses hero messaging to reinforce brand promise
Product Page
1. Clearer Value Proposition
"The world's first database resiliency platform" with a concise description of the solution.
Immediately communicates the product’s purpose.
Highlights low-cost, risk-free analysis for organizations.
Users instantly grasp what the product does and why it matters.
2. Visual Hierarchy & Layout
Sections are organized with headings (e.g., "3 Easy Steps," "Four Subscription Plans"), icons, and dividers.
Easier for users to digest information.
Better spacing between sections reduces clutter.
Users can quickly find relevant information without effort.
3. Stronger Call-to-Action (CTA)
"Try it for free" is prominently placed in the header and repeated in sections.
Encourages conversions.
Increases conversion rates by reducing friction.
4. Product Features Breakdown
Clear differentiation of access methods (Client, Daemon, Cloud, RESTful Services) with icons and brief descriptions.
Helps users identify the right solution for their needs.
Explains which solution fits specific needs (e.g., security demands, CI/CD pipelines).
5. Subscription Plans
Explicit mention of "Four subscription plans... including a free one" with pricing logic (database tiers).
Builds trust and aids decision-making.
6. Benefits Section
“Discover, Learn, Improve" framework with tangible benefits (e.g., "Free updates for life").
Reinforces value and addresses user pain points.
Plan Page
1. Clear Tiered Structure
Plans are divided into HealthScan (Free), Essentials, and SEO, with escalating features.
Pricing visibility: Dollar values are listed (e.g., "$5.00/day"), though formatting is inconsistent.
2. Feature Breakdown
Each plan lists supported platforms (e.g., MySQL, PostgreSQL) and reporting capabilities (vulnerabilities, weaknesses, risks).
Higher tiers (e.g., SEO) include advanced features like AI readiness checks and compliance frameworks (NIST, CMMI).
3. Use Case Clarity
Distinguishes between basic needs (Free) and enterprise-level requirements (SEO).
