Want to see more projects?
Simplii Refer a Friend Restructuring
Redesigning the "Refer a Friend" promotion code copying section with accessibility and UX principles.
Date: July 2022
Role: User Experience Designer
Design Goal: Add a new product referral type while maintaining
Process:
Project Onboarding
Design Ideation
Accessibility Consultation
Conclusion and Next Steps
Simplii Refer a Friend Restructuring
Redesigning the "Refer a Friend" promotion code copying section with accessibility and UX principles.
Date: July 2022
Role: User Experience Designer
Design Goal: Add a new product referral type while maintaining
Process:
Project Onboarding
Design Ideation
Accessibility Consultation
Conclusion and Next Steps
01 Project Onboarding
To familiarize myself with the project and current state, I worked with a Senior Designer on our team. We discussed the current state and the requests from the business.
The goal of the project was to add a new referable product to Simplii's Refer a Friend page. In the original state, two options were listed; Accounts and Mortgage referrals. With this project, a referral option for Simplii's Global Money Transfer needed to be added.
In the original state, both existing options were listed side-by-side, and upon selecting an option, the corresponding referral codes would be displayed underneath.
Original Refer a Friend page
01 Project Onboarding
To familiarize myself with the project and current state, I worked with a Senior Designer on our team. We discussed the current state and the requests from the business.
The goal of the project was to add a new referable product to Simplii's Refer a Friend page. In the original state, two options were listed; Accounts and Mortgage referrals. With this project, a referral option for Simplii's Global Money Transfer needed to be added.
In the original state, both existing options were listed side-by-side, and upon selecting an option, the corresponding referral codes would be displayed underneath.
Original Refer a Friend page
02 Design Ideation
I then built multiple options for a new layout for the page. One of the first obstacles that arose was that there wouldn't be room to add a new option using the same layout. Therefore, entire new layouts had to be explored.
Throughout my ideation and experimenting, I came up with three different potential layouts:
Option 1 Layout
Option 2 Layout
Option 3 Layout
03 Accessibility Consultation
I then connected with the team's Accessibility Consultant to understand which layout would be the most accessible and usable to assistive devices.
We decided on option 1 due to several factors, including:
A screenreader would dictate the three radio button options before the default-open code-copying fields. This would increase clarity by not breaking up the options between additional dictatable text.
Having the interactable code-copying fields at the bottom of the page would make it easier to select and copy the desired code.
The options on the mobile app layout would be visible upfront, whereas if the copy-code fields were nested in the radio button options, clients may not scroll to see the other options below.
Refer a Friend Final Desktop Layout
04 Conclusion and Next Steps
After deciding on a layout, I shared the design with the project's Product Owner, who continued the project and submitted the design to the development team to be built.
Simplii Refer a Friend Restructuring
Simplii Refer a Friend Restructuring
Redesigning the "Refer a Friend" promotion code copying section with accessibility and UX principles.
Redesigning the "Refer a Friend" promotion code copying section with accessibility and UX principles.
Date: July 2022
Role: User Experience Designer
Design Goal: Add a new product referral type while maintaining
Process:
Project Onboarding
Design Ideation
Accessibility Consultation
Conclusion and Next Steps
Date: July 2022
Role: User Experience Designer
Design Goal: Add a new product referral type while maintaining
Process:
Project Onboarding
Design Ideation
Accessibility Consultation
Conclusion and Next Steps
Final Post Sign-On Simplii Mortgage Application Page
Final Post Sign-On Simplii Mortgage Application Page
01 Project Onboarding
To familiarize myself with the project and current state, I worked with a Senior Designer on our team. We discussed the current state and the requests from the business.
The goal of the project was to add a new referable product to Simplii's Refer a Friend page. In the original state, two options were listed; Accounts and Mortgage referrals. With this project, a referral option for Simplii's Global Money Transfer needed to be added.
In the original state, both existing options were listed side-by-side, and upon selecting an option, the corresponding referral codes would be displayed underneath.
Original Refer a Friend page
01 Project Onboarding
To familiarize myself with the project and current state, I worked with a Senior Designer on our team. We discussed the current state and the requests from the business.
The goal of the project was to add a new referable product to Simplii's Refer a Friend page. In the original state, two options were listed; Accounts and Mortgage referrals. With this project, a referral option for Simplii's Global Money Transfer needed to be added.
In the original state, both existing options were listed side-by-side, and upon selecting an option, the corresponding referral codes would be displayed underneath.
Original Refer a Friend page
02 Design Ideation
I then built multiple options for a new layout for the page. One of the first obstacles that arose was that there wouldn't be room to add a new option using the same layout. Therefore, entire new layouts had to be explored.
Throughout my ideation and experimenting, I came up with three different potential layouts:
Option 1 Layout
Option 2 Layout
Option 3 Layout
In addition, I created headings for each option to reduce the visual size difference between the original option titles and to provide guidance to clients on what to expect with each option. I then spoke with the team's copywriters to ensure the text fit the company's intended writing style.
After building the three options, I reached out to the development team and confirmed that all three options were possible to develop by the team.
03 Accessibility Consultation
I then connected with the team's Accessibility Consultant to understand which layout would be the most accessible and usable to assistive devices.
We decided on option 1 due to several factors, including:
A screenreader would dictate the three radio button options before the default-open code-copying fields. This would increase clarity by not breaking up the options between additional dictatable text.
Having the interactable code-copying fields at the bottom of the page would make it easier to select and copy the desired code.
The options on the mobile app layout would be visible upfront, whereas if the copy-code fields were nested in the radio button options, clients may not scroll to see the other options below.
Refer a Friend Final Desktop Layout
Refer a Friend Final Mobile Layout
04 Conclusion and Next Steps
After deciding on a layout, I shared the design with the project's Product Owner, who continued the project and submitted the design to the development team to be built.
[…] Statistics incoming
Want to see more projects?