Contact Me

Acedboard (Website)

Platform

Web

Client

Acedboard

Role

Lead UX/UI Designer

Duration

4 Weeks

Project Summary

AcedBoard is a task management platform built for productivity and collaboration. While the platform itself was robust, the original website did not reflect its full potential. The outdated homepage lacked clarity, emotional resonance, and the navigation was too limited for the range of potential users. This project involved a focused redesign of the homepage and core navigation structure to improve discoverability, increase user engagement, and align the website with AcedBoard’s evolving brand voice.

Project Goals

  • Improve first impressions through clearer value communication
  • Increase homepage conversions (sign-ups and demo requests)
  • Expand navigation for varied user types (teams, enterprises, individuals)
  • Modernize the visual identity to reflect the product’s strengths impressions through clearer value communication
  • Increase homepage conversions (sign-ups and demo requests)
  • Expand navigation for varied user types (teams, enterprises, individuals)
  • Modernize the visual identity to reflect the product’s strengths

    • Research & Discovery

    Audit Findings

  • The homepage was text-heavy and lacked immediate clarity on what AcedBoard offered.
  • Navigation was limited to four generic items, offering little direction for enterprise or role-specific visitors.
  • Visual elements lacked focus; screenshots were outdated, and CTA buttons were not clearly distinguishable.

    • Stakeholder Insights

  • Enterprise clients needed a clearer entry point.
  • Teams were often unsure whether AcedBoard was tailored for them.
  • There was a demand for more information on integrations, use cases, and success stories.

    • Competitive Analysis
    Reviewed leading SaaS tools (Asana, ClickUp, Monday.com) to understand:

  • How they structure content for different audience types
  • Use of live product previews and illustrations
  • Navigation depth and discoverability strategies

    • Ideation & Structure

    Rather than a complete overhaul, we refined the layout and expanded key content blocks. Navigation was extended from 4 to 6 items, addressing new entry points for specific user needs and decision stages.

    New Navigation Structure

  • Features
  • Solutions (new)
  • Resources (new)
  • Company
  • Pricing
  • Enterprise (new)

    • Homepage Enhancements

  • Feature Highlights Section: Modular grid showcasing core platform capabilities.
  • Customer Testimonials: Social proof from real users with brand logos
  • Use Case Cards: Targeted content for different audience types
  • Consistent CTAs: Placed at multiple scroll depths to improve conversions
  • Sticky Header: Ensures persistent access to nav and CTAs

    • Design Decisions Informed By:
  • Stakeholder input around role-based targeting
  • Competitive site structures
  • Review of user drop-off patterns in analytics

    • Visual Identity & UI Design

    The redesign aimed to create a clean, modern aesthetic that reflected AcedBoard’s personality — practical, powerful, and intuitive. We focused on typographic clarity, strategic color usage, and UI component consistency.

    Typography

  • Hero Text: Satoshi, 70px, 120% line spacing
  • Section Headers: 36px, 120% line spacing
  • Body/Subtext: 24px, 150% line spacing
    • This hierarchy allowed for strong visual rhythm and improved scannability across all sections.

    Brand Colors

    Label Color Code Usage
    Primary Blue #6495ED Used for the word "Work" in hero and in primary CTAs
    Accent Pink #DE3163 Used to emphasize "Collaboration" and highlight visual energy

    Color usage emphasized emotional connection while maintaining accessibility contrast standards.

    UI Components

  • Buttons: Bold, high-contrast, full-width on mobile with hover/active states
  • Sticky Header: Includes dropdown nav, CTA in brand blue
  • Cards: Modular with subtle shadows and hover motion
  • Hero Screenshot: Real UI screenshot above the fold adds clarity and trust

    • Accessibility

  • Meets WCAG AA standards
  • Responsive typography and spacing
  • Touch targets and focus states included

    • Microinteractions & CTAs

    Navigation: Improved with dropdowns and sticky header

    Hero Section:

  • Highlighted the words "Work" (#6495ED) and "Collaboration" (#DE3163) for clarity
  • Featured two CTAs: "Get started for free" (primary) and "Contact sales" (secondary)
  • Included a real homepage screenshot to quickly communicate product UI

    • Button Feedback: Hover animations and color transitions for responsiveness

    Modals: Smooth fade-in for sign-up and contact forms

    Before & After Comparison

    To show the impact of the redesign, we included side-by-side screenshots of the original and new homepage. These images highlight:

  • Clearer visual hierarchy
  • Better use of screen real estate
  • Modern typography and color contrast
  • More targeted, engaging CTAs
    • Including these visuals made it easier to demonstrate value to stakeholders and align teams on design impact.

    Hero Section (Before)

    Hero Section (After)

    User Testing & Feedback

  • 5 usability test participants (both B2C and B2B personas)

  • Tasks: Explore features, check pricing, request enterprise demo

    • Results:
  • All completed key tasks with no assistance
  • Participants found the new nav helpful for exploring the platform
  • SUS Score: 87 (up from 65)

    • Results Post-Launch

    Metric Before After
    Bounce rate 58%31%
    Sign-up conversion 2.4%6.9%
    Mobile drop-off rate High Reduced by 43%
    Avg. session duration 1m 10s 3m 03s
    “Request Enterprise Demo” clicks 0.9% 4.8%

    User Feedback

    “The site now feels like it’s made for different types of teams. I didn’t get that before.” - Freelance Project Manager, during usability testing

    “Before the redesign, I bounced off the homepage. Now it’s way more obvious what the tool does and how I can get started.” - First-time visitor, feedback from Hotjar session replay follow-up

    “Being able to compare plans and see which one fits my team size was super helpful. That used to be a guessing game.” - Team Lead at an Agency, post-launch feedback survey

    “The Enterprise page answered questions I usually have to email support for. The demo CTA is easy to find now.” - Operations Director, Mid-size company, evaluating tools for procurement

    Handoff & Dev Collaboration

  • Delivered mobile and desktop UI files in Figma with annotations
  • Shared a design system with reusable components (buttons, nav, cards)
  • Conducted responsive design QA with engineers pre-launch
  • Created additional assets for content marketing and blog visuals

    • Tools Used

  • Figma (Design & Prototyping)
  • FigJam (Sitemap & User Flows)
  • Maze (Usability Testing)
  • Google Analytics + Hotjar (Behavior Tracking)
  • Notion (Design documentation)

    • Reflection

    Redesigning Acedboard’s website was a strategic blend of UX thinking and marketing clarity. Expanding the navigation gave users multiple paths to explore value, from individual productivity to enterprise workflows. This project reaffirmed that content structure, not just visuals, is key to building trust and driving conversion.

    Prev Project
    Aquila Website
    Next Project
    PRIVM

    all Projects