![](https://static.wixstatic.com/media/022d7c_89759cf553424b55943e801688e3819d.png/v1/fill/w_1280,h_260,al_c,q_85,enc_avif,quality_auto/022d7c_89759cf553424b55943e801688e3819d.png)
![](https://static.wixstatic.com/media/022d7c_ea38ed3c514247f99bb23c4b72d8d801.png/v1/fill/w_201,h_40,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_ea38ed3c514247f99bb23c4b72d8d801.png)
![](https://static.wixstatic.com/media/022d7c_e2abb3ea14ba4897ae39027eba0d677c~mv2_d_3889_1319_s_2.png/v1/fill/w_980,h_332,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_e2abb3ea14ba4897ae39027eba0d677c~mv2_d_3889_1319_s_2.png)
![](https://static.wixstatic.com/media/022d7c_12bba6df41ae462294876753a3c61c42~mv2_d_2050_1387_s_2.png/v1/crop/x_87,y_0,w_1876,h_1387/fill/w_796,h_600,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_12bba6df41ae462294876753a3c61c42~mv2_d_2050_1387_s_2.png)
![](https://static.wixstatic.com/media/022d7c_a5d9eb7b1d824a9da0d18e5584804baf~mv2_d_3889_6728_s_4_2.png/v1/fill/w_980,h_1695,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_a5d9eb7b1d824a9da0d18e5584804baf~mv2_d_3889_6728_s_4_2.png)
The Challenge
Working on behalf of the Vordik team, we conducted usability reviews, as well as stakeholder interviews, to determine the site’s pain points. From our research, we learned many users were frustrated with the overall User Experience.
The problem with the content-heavy website was it’s inability to equally accommodate the different types of audiences and the specific content and information related to each audience.Due to the lack of information hierarchy on the site, users often resorted to contacting the IPC by phone or email for help.
![](https://static.wixstatic.com/media/022d7c_ae8b677144fe4eb9ae1c313d5cfba58f~mv2_d_1734_2382_s_2.png/v1/fill/w_1234,h_1695,al_c,q_95,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_ae8b677144fe4eb9ae1c313d5cfba58f~mv2_d_1734_2382_s_2.png)
The Solution
Our key solution for better accommodating the IPC site users, was to focus on improving the accessibility and usability of the site. We created a more intuitive user experience by re-defining the user flow. By streamlining the site into two versions, one for Professional Users, and the other for the General Public, we created a simpler way to direct the correct information to the respective audiences.
In addition, we re-designed the IPC website to be a WCAG Level 2.0 and AODA compliant site, with a cleaner and more modern user interface.
![](https://static.wixstatic.com/media/022d7c_992eb3f098134ac7ac79b67139878c5a~mv2.png/v1/fill/w_1032,h_669,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_992eb3f098134ac7ac79b67139878c5a~mv2.png)
Information Architecture
![](https://static.wixstatic.com/media/022d7c_e8cc22061a7a4c2782e5a0ed890d2bb2~mv2.png/v1/fill/w_980,h_654,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_e8cc22061a7a4c2782e5a0ed890d2bb2~mv2.png)
Splash Page
![](https://static.wixstatic.com/media/022d7c_3d1cd46b58614e2a8b5016151d7c7ed8~mv2.png/v1/crop/x_0,y_51,w_1168,h_1129/fill/w_845,h_817,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_3d1cd46b58614e2a8b5016151d7c7ed8~mv2.png)
![](https://static.wixstatic.com/media/022d7c_0f61eaa7c41d4376944a20090dac12bd~mv2_d_3890_3103_s_4_2.png/v1/fill/w_980,h_782,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_0f61eaa7c41d4376944a20090dac12bd~mv2_d_3890_3103_s_4_2.png)
Wireframes
Various Wireframes were created for both Public User Content versus Professional User Content.
![](https://static.wixstatic.com/media/022d7c_cbb276aa484549249741a161e0a8c9c4~mv2.png/v1/fill/w_595,h_159,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_cbb276aa484549249741a161e0a8c9c4~mv2.png)
![](https://static.wixstatic.com/media/022d7c_cb618546bed24c20a67d0acb92bb321b~mv2_d_3516_2082_s_2.png/v1/fill/w_1052,h_623,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_cb618546bed24c20a67d0acb92bb321b~mv2_d_3516_2082_s_2.png)
UI Design
Part of designing a cleaner user interface, was implementing a color scheme within the site, for the three most active IPC topics: Access, Privacy & Health. The three colors were used within many areas to differentiate between various blog articles, event types, legal forms and documents, etc.
Access Related
Privacy Related
Health Related
![](https://static.wixstatic.com/media/022d7c_6106efd17d594020b6283e77f241e862~mv2.png/v1/fill/w_428,h_579,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_6106efd17d594020b6283e77f241e862~mv2.png)
![](https://static.wixstatic.com/media/022d7c_e4ded134d7e54ff3b6e96a4215d31ee1~mv2.png/v1/fill/w_779,h_643,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_e4ded134d7e54ff3b6e96a4215d31ee1~mv2.png)
![](https://static.wixstatic.com/media/022d7c_e2c3567ae6044da7bc61e4e99e1eefe5~mv2_d_3889_5170_s_4_2.png/v1/fill/w_980,h_1303,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_e2c3567ae6044da7bc61e4e99e1eefe5~mv2_d_3889_5170_s_4_2.png)
![](https://static.wixstatic.com/media/022d7c_ab00a0f6600f4c26af75084231ce67cc~mv2.png/v1/fill/w_768,h_644,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_ab00a0f6600f4c26af75084231ce67cc~mv2.png)
![](https://static.wixstatic.com/media/022d7c_65466fefb63648c4a31819fd3a28e29e~mv2.png/v1/fill/w_835,h_693,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_65466fefb63648c4a31819fd3a28e29e~mv2.png)
![](https://static.wixstatic.com/media/022d7c_a178fbf588df423982909db8d1b8569a~mv2.png/v1/fill/w_783,h_765,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_a178fbf588df423982909db8d1b8569a~mv2.png)
![](https://static.wixstatic.com/media/022d7c_0542e36feedf4d34a92aabb8f58060c7~mv2_d_1324_1329_s_2.png/v1/fill/w_857,h_860,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_0542e36feedf4d34a92aabb8f58060c7~mv2_d_1324_1329_s_2.png)
![](https://static.wixstatic.com/media/022d7c_3d75be37541648948b9506ca83e44734~mv2.png/v1/fill/w_815,h_995,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_3d75be37541648948b9506ca83e44734~mv2.png)
![](https://static.wixstatic.com/media/022d7c_de0b7dcc13914e8b87d853a535039d42~mv2_d_3889_3258_s_4_2.png/v1/fill/w_980,h_821,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_de0b7dcc13914e8b87d853a535039d42~mv2_d_3889_3258_s_4_2.png)
UI Elements
![](https://static.wixstatic.com/media/022d7c_230e2ad9a9f14dde9d13185a917c757d~mv2.png/v1/fill/w_239,h_193,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_230e2ad9a9f14dde9d13185a917c757d~mv2.png)
![](https://static.wixstatic.com/media/022d7c_1e7868c1b59342fb9df0d49e7ec3f52c~mv2.png/v1/fill/w_241,h_387,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_1e7868c1b59342fb9df0d49e7ec3f52c~mv2.png)
![](https://static.wixstatic.com/media/022d7c_838b4bcb26bf48cc85c32223ce9f060f~mv2.png/v1/crop/x_4,y_0,w_306,h_488/fill/w_243,h_388,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_838b4bcb26bf48cc85c32223ce9f060f~mv2.png)
![](https://static.wixstatic.com/media/022d7c_2b6951b16c9e45f4921e1927585ebd45~mv2.png/v1/fill/w_224,h_181,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_2b6951b16c9e45f4921e1927585ebd45~mv2.png)
![](https://static.wixstatic.com/media/022d7c_88420551586a43ea81b77f65b06de14a~mv2.png/v1/fill/w_227,h_184,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_88420551586a43ea81b77f65b06de14a~mv2.png)
![](https://static.wixstatic.com/media/022d7c_a3aee8e700f743eeacfc624d4f19b863~mv2.png/v1/fill/w_228,h_184,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_a3aee8e700f743eeacfc624d4f19b863~mv2.png)
Responsive
Multi-Level Navigation
To make sure all IPC Content was accessible across all platforms, we created a responsive push navigation for mobile and tablet versions of the site, so that users could easily access or find any information using an intuitive multi-level navigation system.
![](https://static.wixstatic.com/media/022d7c_dec9f41ecb5d40eca098313262d28bee~mv2.png/v1/fill/w_316,h_587,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/022d7c_dec9f41ecb5d40eca098313262d28bee~mv2.png)