Step Indicator Component

Role

Lead Designer

Timeline

8 weeks

Team

Visual Design team (4)

Skills

Visual Design, Interaction Design, Design Systems, User Research

Tools

Figma

The Challenge

Amongst our visual design team, we collectively noticed that the step indicator component was inconsistent across various RBC apps, along with UI and accessibility concerns.

Problem Exploration

We got together as a group of 4 visual designers to brainstorm frustrations with the current step indicator component(s).

The main themes we discovered were:

01

User is not clear on what step they are on

02

Takes up too much screen real estate

03

Not flexible to use in various responsive states

04

Accessibility concerns with colour contrast and navigation

We turned our main frustration themes into HMW questions, then conjured up potential solutions.

Evaluating Potential Solutions

Before committing to a design direction, we plugged our potential solution notes onto a prioritization matrix, measuring based on impact and effort.

Design Principles

We decided to set design principles that will guide our direction when exploring different new designs.

Ensure visibility & discoverability

Explore ways to indicate different interaction patterns that communicate the steps in a flow.

Meet accessibility standards

Be mindful of colour contrasts, tabbing orders, screen readers, keyboard navigation.

Be mindful of smaller breakpoints

Explore ways to have smaller hit areas, font-sizing, touch areas etc. on smaller screens.

Clear visual elements

Explore a version where it uses intuitive icons with clear visual cues.

Accommodating number of steps

Use assumption of 3 to 5 steps in the flow (average # of steps in RBC apps).

Design Exploration

We brainstormed various design ideas for the step indicator component, both individually and collectively, then shared with the group to iterate upon an existing concepts. Through a gallery walk-style session, we gathered feedback from multiple interaction designers.

Feedback Gathering

We grouped the the feedback into main themes then applied them to the next iteration of our designs.

We also ran quick A/B testing with a group of clients to get end-user feedback.

Final Designs

After client feedback iterations, we collectively voted on our final design.

In collaboration with the design systems team, we documented the new step component design into the components library, ensuring it details different states and accessibility notes for ease-of-use by users.

Step Indicator Component

The Challenge

The Challenge

The Challenge

Amongst our visual design team, we collectively noticed that the step indicator component was inconsistent across various RBC apps, along with UI and accessibility concerns.

Amongst our visual design team, we collectively noticed that the step indicator component was inconsistent across various RBC apps, along with UI and accessibility concerns.

Amongst our visual design team, we collectively noticed that the step indicator component was inconsistent across various RBC apps, along with UI and accessibility concerns.

Problem Exploration

We got together as a group of 4 visual designers to brainstorm frustrations with the current step indicator component(s).

The main themes we discovered were:

01

02

03

04

We turned our main frustration themes into HMW questions, then conjured up potential solutions.

Evaluating Potential Solutions

Before committing to a design direction, we plugged our potential solution notes onto a prioritization matrix, measuring based on impact and effort.

Design Principles

We decided to set design principles that will guide our direction when exploring different new designs.

Ensure visibility & discoverability

Explore ways to indicate different interaction patterns that communicate the steps in a flow.

Meet accessibility standards

Be mindful of colour contrasts, tabbing orders, screen readers, keyboard navigation.

Be mindful of smaller breakpoints

Explore ways to have smaller hit areas, font-sizing, touch areas etc. on smaller screens.

Clear visual elements

Explore a version where it uses intuitive icons with clear visual cues.

Accommodating number of steps

Use assumption of 3 to 5 steps in the flow (average # of steps in RBC apps).

Design Exploration

We brainstormed various design ideas for the step indicator component, both individually and collectively, then shared with the group to iterate upon an existing concepts. Through a gallery walk-style session, we gathered feedback from multiple interaction designers.

Feedback Gathering

We grouped the the feedback into main themes then applied them to the next iteration of our designs.

We also ran quick A/B testing with a group of clients to get end-user feedback.

Final Designs

After client feedback iterations, we collectively voted on our final design.

In collaboration with the design systems team, we documented the new step component design into the components library, ensuring it details different states and accessibility notes for ease-of-use by users.

© 2025

YUNIJO

© 2025

YUNIJO

© 2025

YUNIJO

Step Indicator Component

The Challenge

The Challenge

The Challenge

Amongst our visual design team, we collectively noticed that the step indicator component was inconsistent across various RBC apps, along with UI and accessibility concerns.

Amongst our visual design team, we collectively noticed that the step indicator component was inconsistent across various RBC apps, along with UI and accessibility concerns.

Amongst our visual design team, we collectively noticed that the step indicator component was inconsistent across various RBC apps, along with UI and accessibility concerns.

Problem Exploration

We got together as a group of 4 visual designers to brainstorm frustrations with the current step indicator component(s).The main themes we discovered were:

01

02

03

04

We turned our main frustration themes into HMW questions, then conjured up potential solutions.

Evaluating Potential Solutions

Before committing to a design direction, we plugged our potential solution notes onto a prioritization matrix, measuring based on impact and effort.

Design Principles

We decided to set design principles that will guide our direction when exploring different new designs.

Ensure visibility & discoverability

Explore ways to indicate different interaction patterns that communicate the steps in a flow.

Meet accessibility standards

Be mindful of colour contrasts, tabbing orders, screen readers, keyboard navigation.

Be mindful of smaller breakpoints

Explore ways to have smaller hit areas, font-sizing, touch areas etc. on smaller screens.

Clear visual elements

Explore a version where it uses intuitive icons with clear visual cues.

Accommodating number of steps

Use assumption of 3 to 5 steps in the flow (average # of steps in RBC apps).

Design Exploration

We brainstormed various design ideas for the step indicator component, both individually and collectively, then shared with the group to iterate upon an existing concepts. Through a gallery walk-style session, we gathered feedback from multiple interaction designers.

Feedback Gathering

We grouped the the feedback into main themes then applied them to the next iteration of our designs.We also ran quick A/B testing with a group of clients to get end-user feedback.

Final Designs

After client feedback iterations, we collectively voted on our final design.In collaboration with the design systems team, we documented the new step component design into the components library, ensuring it details different states and accessibility notes for ease-of-use by users.

© 2025

YUNIJO

© 2025

YUNIJO

© 2025

YUNIJO

We got together as a group of 4 visual designers to brainstorm frustrations with the current step indicator component(s).

The main themes we discovered were:

We grouped the the feedback into main themes then applied them to the next iteration of our designs.

We also ran quick A/B testing with a group of clients to get end-user feedback.

After client feedback iterations, we collectively voted on our final design.

In collaboration with the design systems team, we documented the new step component design into the components library, ensuring it details different states and accessibility notes for ease-of-use by users.