A governing institution of the state Victoria in Australia
MY ROLE
UX Design & Consultant, UI Design
SUMMARY
As the only UX designer on the project, I worked closely with business stakeholders and an agile cross-functional team of project managers, solution architects, technical consultants, functional consultants, back-end developers and testers.
PROJECT GOAL
The goal is to redesign the responsive website of a state government agency, aiming to enhance its usability, visual appeal, and overall user experience. This is achieved by aligning it with Vic Govt branding and the Ripple Design System, and leveraging Salesforce Lightning Web components with minimal customisation.
DESIGN METHODS
DESIGN PROCESS
Joining the project five months in, the website development had commenced based on business requirements without prior user research, making it challenging to incorporate UX considerations at this point. I began by auditing the existing website and identifying various page templates, followed by creating an information architecture to fully understand the site map.
Information Architecture - Site Map
Subsequently, I studied both the Ripple Design System and Salesforce Lightning Web components in depth, exploring design patterns and component libraries with the aim to enhance the website's accessibility, usability, visual appeal, and overall user experience in the new build.
In the absence of a product owner within our team, I took on the role as PO at times to navigate the situation, acting like a bridge connecting the business and development teams. I made sure each team is heard and decisions benefit both teams. I provided business executives with the information to make decisions while representing the needs of the developers.
In our agile project, we strictly follow a 2-week sprint structure. I attended grooming sessions alongside solution architects, technical consultants, functional consultants, and the developer lead before each sprint begins. These sessions focused on reviewing and refining user stories to ensure that all requirements are fulfilled and are ready for build.
Collaborating with functional consultants, I contributed to crafting user flows and user stories flows, which provide a clear overview of the intended user experience and functionality. This visualisation is valuable for illustrating user interaction and ensuring alignment with business stakeholders and all cross-functional teams.
User flow example
User stories flow example
Design & Critique Workshops
I led design and critique workshops for each epic to ensure alignment and effectiveness in the design process.
This involves understanding the goal in minimising customisation efforts using Salesforce out-of-the box components and aligning with Ripple styling. I initiated brainstorming sessions with the project team and business stakeholders to stimulate the generation of ideas and requirements and collaborative discussions to gather insights from cross-functional teams. Leveraging prototyping, I translated conceptual design ideas into tangible visual representations, allowing stakeholders to grasp the proposed changes more effectively.
UX Documentation
The UX documentation I created catered to both business stakeholders and the entire cross-functional team. It serves as the source of truth, it encompassed detailed design principles and wireframes for designers, clear specifications and design assets for developers, highlighted project goals and milestones for project managers, and included hi-fi prototypes and explanations of user experience benefits for business stakeholders. This comprehensive approach ensured that each group's specific needs and interests were addressed effectively.
ALIGNING RIPPLE DESIGN SYSTEM & SALESFORCE LIGHTNING WEB COMPONENTS
Accordion
The accordion component for Salesforce Lightning and Ripple DS differ in their design. In Salesforce Lightning, the chevron is on the left side, pointing right when collapsed and down when expanded, while in Ripple DS, it's on the right side, pointing down when collapsed and up when expanded.
The goal is to minimise customisation efforts and utilise pre-existing Salesforce components. Therefore, I proposed a solution in keeping the chevron on the left side in alignment with Salesforce's default component, while applying Ripple DS aesthetics for styling, ensuring no significant impact on the overall experience.
Accordion solution utilising Salesforce out-of-the-box component and applying Ripple styling
PAGE TEMPLATES
The website consists of various different types of page structures, they are:
- Homepage
- Landing/Information page
- Search
- Forms
- Payments
- Summary
- Confirmations
CHALLENGES
Lack of Strategy and Design Planning
The project faced challenges due to the absence of a product owner, missed opportunities for integrating user-centered design principles and utilising designers' expertise to guide project direction and outcomes. The website's development was solely based on business requirements initially, UX Design was introduced five months into the project. Therefore, the project encountered difficulties in meeting user experience standards.
Without a dedicated PO, the team has lost focus, leading to misaligned efforts and inefficient backlog management. Consequently, this resulted in failing to meet business stakeholder expectations and deliver value.
No User Insights
Without conducting user research and usability testing for the website, business relied on their assumptions, making it difficult to validate design decisions and prioritise features based on user needs and pain points. This increased the risk of the redesigned website not meeting user expectations, potentially resulting in usability issues and decreased user satisfaction since real problems are not addressed.
Ripple Design System Update
Amidst the project, Ripple 2.0 Beta was released and it was recommended by the Vic Gov’t Design Team to fully adopt the beta version. However, my team expressed reluctance to implement changes with a testing version.
One significant update in Ripple 2.0 is the removal of the "Disabled Button," which greatly affects both the user experience and website development. The Disabled Button has been intentionally removed in Ripple 2.0 because the button is disabled unless all information is entered correctly in order to proceed is not a good user experience for forms. The preferred pattern is for users to submit the form and then receive an error message/inline error messages for correction.
The "Disabled Button" from Ripple 1.0 is widely used in the form pages, where the user is required to enter all correct info in order to proceed to the next page.
Disabled Button in Ripple 1.0
OUTCOME
Due to the project's limitations, the traditional UX process such as UX research and usability testing, couldn't be executed. Nonetheless, I applied my UX expertise to adapt the process and successfully led the team and business in progressing the project. Through collaborative efforts, I effectively implemented an approach that bridged the gap between business and development. The UX documentation served as a comprehensive resource for designers, developers, project managers, and business stakeholders, ensuring that each group's specific needs were addressed effectively.
LEARNING
Throughout this project, I gained valuable insights into the significance of addressing stakeholder management and team expectations. Failure to do so resulted in various challenges including miscommunication, scope creep, conflicts, delayed timelines, budget overruns, and quality issues.
The project’s scope expanded beyond its original boundaries as business stakeholders adding new requirements or changing existing ones without proper documentation and approval processes. This in turn sparked conflicts and resistance among the stakeholders and team members due to differing understandings of roles, responsibilities and project objectives. Consequently, it ultimately affected the project progress, leading to missed deadlines and budget overruns.
