When redesigning a self-service portal, I needed to prioritise the highest value improvements to work within budget, but also keep a strategic end-goal in sight.

Using design principles to generate insights, I prioritised a design roadmap that fed the product backlog, worked on redesigns with an iterative design plan, and added to content and accessibility guidelines to achieve consistency.

The problem to solve

• Applicants need to resolve blockers quickly to avoid delays and lost opportunity
• Application delays were a risk to business revenue potential
• Feedback themes were usability, accessibility, mobile experience and process fit
• Enquiries needed to be sent to the right place to avoid processing delays

Approach

Working with lean and agile principles, I needed to focus my design efforts on the highest value improvements:

• Review against industry-recognised design heuristic conventions
• Collaborate with stakeholders and experts to prioritise improvements
• Order a backlog by business viability, technical feasibility and UX desirability
• Design an iterative hypothesis to address the highest priority improvements

Building the case for redevelopment

After commencing the review, it was clear configuration alone would not address enough of the issues found, and that to achieve accessibility targets, the effort would exceed the available resources.

Ordering the backlog

• Issues were prioritised by business viability, UX desirability, and build feasibility
• The highest priority issues were estimated and added to the product backlog
• Additional work orders were created for redevelopment to address the backlog
• Remaining work was added to the design roadmap and guidelines created

The following example shows how the review was applied to redesign a contact form.

Contact form redesign

Current state review

I started redesign tasks using the design review and backlog to break down the big design piece into smaller units of work. As an example, here’s a summary of the design review for the contact form.

• Guidelines needed

  • Writing style inconsistencies included use of passive language, inconsistent sentence case, inconsistent first-person references (“your”, “my”, “their”), and inconsistent proper noun capitalisation
  • Design inconsistencies included the use of components mismatched to the type of question, like pull down lists with hundreds of options, and checkbox components used when a radio control was more appropriate.

• Simplified form design

  • A single column form layout was needed to reduce the risk of omission errors
  • The number of questions needed to be reduced to fit on a single page, by conditionally hiding irrelevant questions, and removing the unnecessary information gathering
  • On-screen instruction was needed to explain what information was needed, but instructions for how to use a web interface (e.g., ‘click below’) were not needed.

• Improved accessibility

  • Pull-down option select elements were not accessible when used to show hundreds of options
  • Unanswered mandatory questions should not have had a valid answer selected by default, so that omission errors would be detected
  • Temporary placeholder text should not have been used for instructions because they disappeared. Persistent helper text was needed for error correction (e.g., to explain phone number formats).

• Mobile experience

  • Ineligible text that appeared partially off screen and text that was obscured under overlapping elements reduced form usability
  • A responsive design was needed to re-flow wide content to fit the screen, and replace fixed width tables that did not resize
  • The mobile navigation needed redesign so that navigation links were usable and not obscured off-screen
  • The mobile header needed redesign. One quarter of the mobile screen was filled with unused white space that displaced useful content.

Download design review (PDF 11.2Mb)

Future state redesign

Using Figma and a design system based on Fluent, I needed to redesign components to address the accessibility issues and improve mobile compatibility.

The design had to accommodate two states: a future state, and an operational state:

1. Future state: a strategic end-user focussed design that addressed 422 issues and achieved WCAG 2.2 AA success criteria with a contemporary design system
2. Operational state: a design iteration, collaborated with product and technical teams, based on a prioritised roadmap of 20 of 422 improvements and the legacy design system.

The redesigned contact form

• Reduced redundant form choices from 600 options to 20 options
• Responsive and mobile compatible, and WCAG 2.1 AA accessibility improvements
• Content consistent with writing style guidelines.

The post Prioritising a product backlog with lean UX appeared first on davehone.com.

Approach

RMIT’s public website supported a huge range of services, from course discovery and new student acquisition to current student front doors for support and services. The existing interface was fragmented, inconsistent, and difficult to maintain. To deliver a sustainable uplift, I needed to:

• Build a deep understanding of the breadth of services across the university
• Lead design across organisational silos to gain buy‑in on a shared look and feel
• Construct a new design system compatible with legacy CMS constraints
• Translate photography and print‑brand elements for digital‑readiness

Work I completed

I joined the project as Senior UX Designer, responsible for shaping the user experience and ensuring the new design language could be implemented within RMIT’s ageing CMS. My work included:

• Extend the UI/UX design system

  • Retrofit the agency-provided visual designs for compatibility with legacy CMS, and evolving brand and content and UX requirements
  • Redesign the navigation, visual design, page grids, interface patterns, brand images, and proposed information architecture to match the legacy content feed
  • Test the new information architecture, new navigation, and new interface patterns.

• Assist content migration

  • Cross-functional stakeholder engagement across multiple organisational silos
  • Influence work without authority, enabling different ways of working with a unified look and feel
  • Design dozens of new content templates and new UI patterns that match real world context
  • Photography for use across the site for brand and content purposes
  • Design sub-brand applications for campaign sites, schools, and RMIT International.

• Improve accessibility

  • Interview students living with a disability to test the new design with assistive tools
  • Test intuitiveness of key journeys with English-second-language international students
  • Test cognitive load of complex tasks using course information.

Results

The project delivered a more consistent, accessible, and maintainable digital experience for RMIT. It also laid the groundwork for stronger digital governance and a more unified brand presence.

I had an excellent foundation from external agencies Symplicit, U1 and Reactive taking on the initial visual design and journeys, our internal leadership team driving organisational change along a bumpy road, and our long-suffering digital content team. Together we delivered:

1. Successful testing and rollout of a my redesigned navigation and content structure
2. Collaboration with content teams across the university to rebuild hundreds of pages
3. Close partnership with engineering to transform legacy CMS outputs with CSS and JS
4. The RMIT site relaunch in 2013, establishing a modernised foundation for future digital work.

The post RMIT University GUI Design System appeared first on davehone.com.

RAPs is a service designed to address inequitable access to education.

Using co-creation to understand the end-to-end experience, we prioritised improvement opportunities based on impact and technical complexity.

The problem to solve

I needed to reach out to accessibility communities of practice, students, health care professionals and internal stakeholders to find out what was working well and where there was room to improve services for students living with a disability.

• Start with a deep understanding of students living with a disability
• Work across organisation silos and include users to co-create a future state vision
• Evaluate opportunities for improvement, using service design rules of thumb
• Shift thinking from current solutions to problem statements

Outputs

The post Addressing equity barriers with inclusive service design appeared first on davehone.com.