WILLDAN CASE STUDY

As the UX/UI Project Manager, I spearheaded the complete redesign of a sophisticated B2B SaaS application, called ViewPoint.  It was replacing an outdated legacy system used by utility companies nationwide.

This new platform revolutionized program management by integrating extensive data handling, complex energy efficiency calculations, and accommodating diverse user groups with specific permissions and workflows.

My leadership ensured seamless collaboration with stakeholders, meticulous planning of project scope and objectives, and delivery of a user-centric design that enhanced operational efficiency and user experience.

OVERVIEW

This project aimed to transform Willdan's outdated and inefficient utility program management system into a modern, robust B2B SaaS platform called ViewPoint. The system suffered from significant inefficiencies, outdated technology, and an inadequate user interface that failed to meet contemporary standards.  The new platform integrated Willdan's best proprietary technologies, creating an efficient, user-friendly solution that enhanced overall operational effectiveness.

ROLE & RESPONSIBILITIES

As the UX/UI Project Manager, I led the entire design process from initial research and discovery to final implementation and evaluation. My role involved a blend of leadership, strategic thinking, and hands-on design work to ensure the project achieved its goals and delivered an exceptional user experience. I also built the UX/UI department from scratch, managed the team’s budget, and supervised junior designers, guiding their work and fostering their professional growth.

TEAM CAPACITY NEEDED

A cross-functional team was essential for the successful completion of this project. The team included:

  • Executive Leadership
  • Key Stakeholders
  • Product Owner
  • Product Manager
  • Project Managers
  • Developers
  • Business Analysts
  • UX/UI Designers
  • User Acceptance Trainers
  • Database Developers
  • QA/QC Testers

TOOLS USED

To ensure smooth collaboration and efficient workflows, we utilized a range of tools including but not limited to:

  • Figma and Balsamiq for brainstorming, wireframing and design prototyping
  • Visio for workflows
  • Azure DevOps and Monday.com for project management
  • Various testing tools for QA/QC
  • WebEx for communication and meetings
  • Dropbox to store documentation

RESEARCH & DISCOVERY

In the research and discovery phase, I conducted comprehensive stakeholder interviews with key subject matter experts provided by Con Edison. This allowed me to gather valuable insights, identify user needs, pain points, and opportunities. I focused on synthesizing information gathered from user interviews, developing personas, creating journey maps, and collaborating with Business Analysts to define the current state workflow for each user group at every stage.

CHALLENGES

The existing system was plagued by inefficiencies due to its outdated technology and a user interface that fell short of modern usability standards. Many field users were still relying on pen and paper for data entry and reporting, highlighting a severe disconnect between the outdated system and the needs of a modern workforce.

The challenge was not only to replace this system but also to introduce a unified B2B SaaS platform that would address significant obstacles. These included managing the complexities of system integration, ensuring minimal disruption to ongoing operations, and designing a user experience that seamlessly transitioned from traditional manual processes to a more intuitive and efficient digital solution.

ANALYSIS

The analysis and planning phase was crucial in transforming Willdan’s outdated utility program management system.  The goal was to create a seamless, efficient experience for our clients, starting with Con Edison.

Following discussions with senior management and key stakeholders, it was decided to initially focus on Con Edison's Small-Medium Businesses (SMB) and lighting efficiencies. While there were multiple user groups involved, the auditors were identified as the key group to get started with the project.  Below are a few pain points that were identified.

  • Auditors faced challenges with prospecting new clients and connecting with Con Edison efficiently.
  • Assessing lighting usage and savings required the use of several tools, leading to delays.
  • Manual input in tracking sales and auditing customers resulted in errors.

STRATEGY

During this phase, the UX/UI team had not yet been established, so I concentrated on setting up the foundational planning elements, including:

  • Protocols for how information was shared and communicated among stakeholders and team members.
  • Design workflows for iterations, feedback loops, reviews, and sign-off.
  • Documentation and tools for tracking progress and managing documentation.  The team utilized Azure DevOps. Additionally, I created Wikis to provide access to the Design SDLC documentation, training materials, and other onboarding resources.

CREATE

In this phase, I began by creating a library of reusable components and design patterns in Figma and Balsamiq. To ensure thorough testing and seamless development, the design system was integrated into Storybook.  This foundational work ensured consistency and efficiency, providing essential UI elements—buttons, form fields, icons—and design patterns to guide the project’s user interface.

I collaborated closely with the Engineering team to determine when low-fidelity wireframes were sufficient for development and when high-fidelity designs were needed. This approach ensured that designers efficiently utilized their time and had the capacity to work on new assignments, helping us meet project milestones effectively.

BRAINSTORMING & WIREFRAMING

Now that the foundation was set for the team, we could begin brainstorming and creating for the project.

Breaking Down Design Stories: The project began with defining design stories based on the scope and MVP provided by the Product Owner. We focused on the auditor user group, starting with the initial login process and extending to the audit completion.

Allocating Tasks to Team Members: Tasks were allocated based on team members' strengths and workload.

Brainstorming and Wireframing: Brainstorming sessions via WebEx, led to initial ideas, which were transformed into low-fidelity wireframes using Balsamiq.

VALIDATE

I conducted usability testing sessions on the wireframes with the auditors to gather feedback on the basic structure and flow.  This allowed me to identify any major issues or misunderstandings early.

It also ensured the wireframes captured all necessary elements and interactions from the user's perspective.

By validating at this stage, I was able to identify bottlenecks and gaps, and get the auditors input on proposed solutions.

HIGH-FIDELITY PROTOTYPING

Once the wireframes were validated and refined, I created high-fidelity  prototypes in Figma when needed. These prototypes included detailed UI elements and interactions.

I then conducted another round of usability testing with the auditors, focusing on the visual and interactive aspects of the design. This stage ensured the design met the auditors’ expectations and was intuitive.

STAKEHOLDER PRESENTATION

Insights from the high-fidelity testing sessions were used to make final prototype adjustments.

I presented the refined high-fidelity prototypes to stakeholders, showcasing the evolution from wireframes to high-fidelity designs and highlighting key design decisions and user feedback.

By involving auditors at both stages, we ensured continuous user feedback and iterative improvement, leading to a more user-centered final product.

ENGINEERING TEAM

To maintain alignment with our engineering team, we followed Agile methodologies, conducting regular sprint planning sessions and daily standups. This iterative approach allowed us to address any issues promptly and ensure we addressed technical feasibility concerns and the final product met our quality standards and user expectations.

As we transitioned from design to development, I facilitated the handoff to the engineering team. I worked closely with Business Analysts to write comprehensive user stories and acceptance criteria.

This ensured that all design elements and functionalities were well-documented and understood by the development team. Our collaborative efforts helped bridge any gaps between design and development, ensuring a smooth transition.

IMPACT

The successful implementation of the new B2B SaaS application significantly transformed the work processes for auditors in the field. Initially, there were challenges in adopting the new technology, as many auditors were accustomed to traditional methods. However, once they began using the application, they completed their tasks more efficiently, improving accuracy and productivity.

From testing sessions, auditors reported qualitative feedback such as:

  • Ease of new application use over the legacy system increased over 85%.
  • There was a noticeable reduction in errors with calculations.
  • Auditors indicated a significant improvement in the audit process as a whole; from signing up customers, calculating energy efficiency savings, making recommendations, to implementation.
  • Numerous auditors indicated they completed the audit in half the time.
  • Enhanced readability and functionality exceeded expectations; auditors found table data easier to interpret and filtering capabilities more advanced than anticipated.

The positive feedback from the auditors highlighted the application's effectiveness in enhancing their daily operations and overall experience.

ONGOING IMPROVEMENT & FEEDBACK

Our project not only achieved its initial goals but also laid the groundwork for continuous improvement. Recognizing the importance of ongoing optimization, I implemented a comprehensive feedback system that enabled users to:

  • Test and evaluate new features
  • Rank their experiences
  • Provide detailed recommendations for further enhancements

By empowering them with these tools, I ensured they could continually monitor and improve their success rates, fostering a culture of continuous improvement and user-centric development.