SurePact
Transforming a Complex B2B SaaS Platform
SurePact is a comprehensive project and grant management software that empowers organizations to track and manage critical details throughout the project lifecycle.
Overview
SurePact, a leading B2B SaaS company, faced significant design challenges in revitalizing their intricate platform. The project encompassed a wide array of tasks, including establishing a robust design system, redesigning the existing interface, integrating new features, creating a new product, improving accessibility, and developing high-fidelity prototypes—all within an ambitious six-week timeframe. As the Lead UX Designer, I spearheaded these efforts, navigating the complexities of remote collaboration and driving effective communication across cross-functional teams to deliver a comprehensive and user-centric solution.
Challenges and Approach
Challenge 1: Conducting Comprehensive User Research
One of the initial challenges was the need to conduct extensive user research within a limited timeframe. To tackle this, I collaborated closely with the product manager, who gathered critical insights into user requirements and preferences. Armed with this information, I developed detailed user personas and seamlessly integrated user feedback into the wireframing and design process. This collaborative approach ensured that our designs were aligned with user expectations and delivered a valuable user experience, despite the tight deadlines.
Challenge 2: Redesigning the Interface and Integrating New Features
Revitalising the existing interface and integrating new features required a meticulous approach to understanding user needs, optimising information architecture, and maintaining design consistency. By analysing the current structure, I identified optimal placements for new features, ensuring a seamless user experience. Additionally, I developed user training materials and onboarding resources to facilitate smooth adoption of the enhanced interface. This comprehensive redesign successfully met both user expectations and business objectives.
Challenge 3: Improving Information Architecture
SurePact users struggled with navigating the platform due to a cluttered interface and an ineffective information architecture. To address this, I transformed the horizontal workflow bar into a vertical layout, allowing for a more flexible and intuitive navigation system. This redesign streamlined the interface, reducing clutter and significantly improving user efficiency by merging workflow steps with the process bar, optimising screen real estate, and enhancing overall usability.
Challenge 4: Providing Immediate Support and Guidance
Users needed immediate support within the interface, but the existing training page lacked context-specific guidance. To solve this, I introduced context-specific tutorials within each section, accessible directly from the top panel. This enhancement empowered users to receive real-time support without leaving their current page, improving their productivity and overall experience.
Challenge 5: Enhancing Accessibility
The platform's lack of essential accessibility features presented a significant barrier to users with disabilities. Utilising my expertise in WCAG 2.1, level AA guidelines, I proposed and implemented design changes to improve colour contrast, font size, alternative text for images, and compatibility with assistive technologies. These enhancements ensured that the platform was accessible to all users, providing a more inclusive user experience.
Challenge 6: Establishing a Design System
Creating a design system from scratch for a sophisticated B2B SaaS product was a critical challenge. I worked closely with the product manager to establish a comprehensive design system tailored to SurePact's unique requirements. By identifying recurring design patterns, establishing consistent guidelines, and aligning with business objectives, we developed a robust design system that prioritised consistency, scalability, and efficiency.
Challenge 7: Developing a New Product
Designing multiple screens and features for a new related product required rapid ideation and execution. I facilitated virtual brainstorming sessions, created low-fidelity wireframes, and conducted rapid prototyping exercises to iterate on designs quickly. Leveraging the established design system, we efficiently produced the required screens and features within the allotted timeframe, resulting in the successful launch of the new product.
Challenge 8: Creating High-Fidelity Prototypes
Using the newly developed design system, I crafted high-fidelity prototypes that ensured smooth interactions and visual clarity. These polished mockups accurately represented the final product and served as valuable tools for stakeholder presentations, usability testing, and gaining insights into the user journey.
Outcome
The completion of the design system, the redesign of the existing product, the introduction of new features, the development of a new product, and the accessibility enhancements generated significant excitement within SurePact. The success of these initiatives even led to the hiring of a new Head of Sales to drive market success. The high-fidelity prototypes effectively communicated the product's value, sparking enthusiasm among stakeholders and positioning SurePact for future growth.
