Avoiding the “Design Before Solutioning” Trap – Large-Scale Web Development

The Risks of Prioritising Design Over Technical Planning

1. Misaligned Expectations

When design leads the way without adequately considering technical constraints, it often results in unrealistic expectations. Stakeholders may fall in love with visually stunning designs that are either technically unfeasible or prohibitively expensive to implement. This disconnect between vision and reality can erode trust, derail projects blow out budgets, make for dysfunctional solutions and impair UX.

2. Technical Infeasibility

Designs developed without technical input may include features that are challenging or impossible to implement within the project’s technical framework. This misalignment can necessitate significant redesign efforts, consuming valuable time, effort and resources and send you into a costly continual cycle of fix modes.

3. Scope Creep

Without a solid technical foundation, designs can lead to ambiguous or expanding project scopes. Features that look simple on paper may require complex back-end solutions, increasing timelines and costs.

4. Inefficient Workflows

Starting with design often creates silos between designers and developers. When developers are brought in late, they may need to retrofit functionality into designs, leading to inefficiencies and friction between teams and ends with suboptimal solutions.

5. Missed Opportunities for Innovation

Technical teams often bring innovative ideas to the table when involved early. By side-lining them during the design phase, projects may miss opportunities for optimisation or creative solutions.

6. Compromised Performance

Designs that do not account for technical considerations may lead to performance issues, such as slow load times or poor scalability, adversely affecting the user experience and the project’s overall success.

7. Increased Costs

Reworking designs to align with technical realities can be expensive. According to industry studies, fixing issues during development costs exponentially more than addressing them during planning phases.

Strategies for Balancing Design and Solutioning

1. Collaborative Project Kick-off

A successful project begins with a collaborative kick-off involving all key stakeholders, designers, developers, project managers, and clients. This ensures alignment on goals, constraints, and priorities from the outset.

• Define Objectives Clearly: Outline what the website needs to achieve for its users and stakeholders.
• Establish Constraints: Discuss budgetary limits, technical capabilities, and timeline restrictions early.
• Create a Shared Vision: Develop a high-level roadmap that balances aesthetic goals with functional requirements.

2. Foster Cross-Disciplinary Collaboration

Encourage continuous collaboration between design and technical teams throughout the project lifecycle. This integrated approach ensures that design decisions are informed by technical realities, leading to solutions that are both innovative and implementable.

3. Integrated Discovery Phase

The discovery phase should integrate both design and technical perspectives. This phase is critical for gathering requirements, identifying risks, and aligning teams.

• User-Centred Research: Understand user needs through interviews, surveys, or analytics data.
• Technical Feasibility Assessments: Involve developers in evaluating whether proposed features are achievable within constraints.
• Wireframing Over High-Fidelity Designs: Start with low-fidelity wireframes to focus on functionality before aesthetics.

4. Agile Methodologies

Adopt iterative development methodologies, such as Agile practices can help maintain balance by encouraging iterative development cycles that incorporate feedback from both designers and developers. This flexibility enables teams to adapt to new information and changing requirements, reducing the risk of costly redesigns.

• Sprints for Cross-Functional Teams: Organise work into sprints where designers and developers collaborate on deliverables.
• Continuous Integration: Regularly test designs against technical implementations to catch issues early.
• Daily Standups: Short meetings ensure ongoing alignment across teams.

5. Conduct Feasibility Assessments Early

Perform technical feasibility assessments during the initial design phases to identify potential challenges and constraints. Early detection of issues allows for timely adjustments, preventing more significant problems later in the project.

6. Prototyping Early and Often

Prototypes bridge the gap between design and development by providing tangible representations of how features will function.

• Low-Fidelity Prototypes: Use simple tools to test basic functionality without committing significant resources.
• Interactive Prototypes: Develop clickable models that simulate user interactions to validate both design and technical feasibility⁵.

7. Documentation as a Living Resource

Documentation is often viewed as a chore but is essential for maintaining alignment throughout the project lifecycle.

• Design Systems: Create reusable components and standards that streamline collaboration between teams.
• Technical Specifications: Document APIs, integrations, and other back-end requirements clearly.
• Version Control: Use tools like Git to track changes in both codebases and design assets.

8. Risk Management

Identify potential risks early by involving all stakeholders in risk assessment workshops.

• Scenario Planning: Discuss what could go wrong at each stage of the project.
• Contingency Budgets: Allocate funds for unexpected challenges like scope creep or technical hurdles.
• Regular Checkpoints: Schedule reviews at key milestones to reassess risks.

Case Studies to consider

These case studies of university website redesigns can draw insights and inspiration.

1. University of West London (UWL) Website Redesign 

This case study highlights the importance of user-centred design, accessibility, and information architecture testing in the redesign process. UWL employed methods such as tree testing, card sorting, and usability testing to align navigation with user mental models. The project also focused on WCAG 2.1 AA compliance, improved content hierarchy, and optimised mobile experiences, resulting in significant improvements in usability and user engagement.

2. Integrated and Holistic Project Assessment for a Library Website Redesign

This project at the University of Michigan Library involved a complete overhaul of technical infrastructure, content strategy, and design. The redesign achieved measurable improvements in usability, accessibility (WCAG 2.1 compliance), mobile performance, and content authoring efficiency. The team used metrics-driven methods to ensure success across multiple dimensions, including intuitive navigation and stakeholder buy-in.

3. Pope Tech Accessibility Case Study

A public research university in the United States implemented Pope Tech to address accessibility issues across its web portfolio. By integrating automated accessibility tools and training multiple teams, the university resolved hundreds of thousands of errors and achieved significant improvements in accessibility compliance across 465 websites. This initiative underscores the importance of ongoing monitoring and institutional commitment to digital inclusivity.

These examples illustrate best practices in balancing user experience, accessibility, technical planning, and stakeholder alignment during large-scale university website redesigns.

Key Takeaways

Avoiding the “design before solutioning” trap requires cultural shifts within organisations:

1. Foster collaboration between designers and developers from day one.
2. Emphasise user needs over aesthetic preferences.
3. Treat documentation as an evolving resource rather than a static deliverable.
4. Choose methodologies like Agile or Scrum that encourage iterative progress.
5. Allocate time for prototyping and testing throughout development cycles.

By integrating these strategies into your workflow, you can navigate the complexities of large-scale web projects more effectively delivering outcomes that are not only visually compelling but also technically robust.

Balancing design with solutioning is not just about avoiding pitfalls; it’s about creating digital products that meet user needs while aligning with organisational goals—a win-win for all stakeholders involved.