Goaltop
UI/UX Design • Branding • illustration
Refonte de l’expérience utilisateur et du design visuel du site web Goaltop • Gestion et partage de tournois sportifs
Résultat
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 84 190" xmlns="http://www.w3.org/2000/svg"><path d="M 0 5.21 L 4.81 0 L 9.83 3.19 L 3.85 9.72 Z" fill="rgb(255, 201, 166)" height="9.719999999999999px" id="c7SVmc3sR" transform="translate(65.21 47.89)" width="9.82990000000001px"/><path d="M 10.892 2.941 C 12.542 5.791 11.632 9.461 8.852 11.151 C 6.072 12.841 2.472 11.891 0.822 9.041 C -0.828 6.191 0.082 2.521 2.862 0.831 C 5.642 -0.849 9.232 0.101 10.892 2.941 Z" fill="rgb(255, 201, 166)" height="11.988219841432837px" id="tfrQVxNev" transform="translate(67.828 39.279)" width="11.714628565384217px"/><path d="M 12.765 0.361 C 13.255 0.851 13.265 1.651 12.795 2.151 L 2.125 13.401 C 1.655 13.901 0.865 13.911 0.375 13.421 C -0.115 12.941 -0.125 12.131 0.345 11.631 L 11.015 0.381 C 11.485 -0.119 12.275 -0.129 12.765 0.361 Z" fill="rgb(0, 0, 0)" height="13.78267044585067px" id="PvNOuHcUG" transform="translate(68.865 33.229)" width="13.140309383257872px"/><path d="M 0.23 0 L 21.99 18.47 L 33.81 4.55 L 38.88 10.87 L 24.92 30.86 C 23.74 32.27 21.64 32.4 20.3 31.14 L 0 19.21 Z" fill="rgb(79, 77, 75)" height="32.00714617891847px" id="hZFW8qNEi" transform="translate(33.06 45.51)" width="38.879999999999995px"/><path d="M 53.71 13.17 C 53.71 13.17 18.47 38.78 4.3 54.54 L 0 50.54 L 11.93 36.18 C 11.93 36.18 17.35 23.52 28.87 19.35 L 44.85 0 Z" fill="rgb(242, 192, 158)" height="54.53999999999999px" id="uaQQkJqiu" transform="translate(5.23 118.5)" width="53.70999px"/><path d="M 4.773 0.108 C 5.243 -0.152 5.773 0.078 5.823 0.578 C 5.923 1.548 6.363 3.018 7.923 4.178 C 9.543 5.388 10.903 5.018 11.683 4.588 C 12.093 4.358 12.573 4.478 12.723 4.878 L 17.603 17.638 C 17.903 18.408 17.853 19.318 17.483 20.148 C 17.133 20.928 16.143 21.208 15.593 20.678 L 0.403 6.038 C -0.197 5.458 -0.117 4.428 0.573 3.778 L 3.963 0.578 C 4.023 0.528 4.083 0.478 4.153 0.438 Z" fill="rgb(31, 37, 42)" height="20.95011291465528px" id="nz7lCSfmq" transform="translate(0.467 166.122)" width="17.798580711687528px"/><path d="M 15.87 0 C 15.87 0 17.58 43.53 22.81 64.06 L 17.09 65.41 L 11.79 47.51 C 11.79 47.51 4.28 35.97 7.21 24.07 L 0 0.03 Z" fill="rgb(252, 201, 167)" height="65.41px" id="UWp7hWt26" transform="translate(44.41 119.37)" width="22.810000000000002px"/><path d="M 0.064 3.978 C 0.104 3.448 0.594 3.128 1.034 3.368 C 1.894 3.828 3.364 4.278 5.194 3.618 C 7.104 2.938 7.554 1.608 7.624 0.718 C 7.664 0.248 8.024 -0.082 8.444 0.018 L 21.764 3.048 C 22.574 3.228 23.304 3.768 23.784 4.538 C 24.244 5.258 23.924 6.238 23.174 6.408 L 2.564 10.898 C 1.754 11.078 0.944 10.438 0.784 9.498 L 0.014 4.908 C 0.004 4.828 -0.006 4.758 0.004 4.678 Z" fill="rgb(31, 37, 42)" height="10.928287211459349px" id="ZLHjtjKRR" transform="translate(59.116 178.432)" width="23.99760760551073px"/><path d="M 0.89 1.87 L 0 29.59 L 40.14 31.59 C 40.14 31.59 35.71 15.64 32.16 0 Z" fill="rgb(128, 168, 193)" height="31.590000000000003px" id="jv7B8U_ky" transform="translate(27.38 110.93)" width="40.140100000000004px"/><path d="M 4.429 22.73 C 3.259 22.59 2.079 21.96 1.209 21.38 C 0.349 20.81 -0.101 19.79 0.019 18.76 L 2.379 0 L 10.589 0.99 L 8.269 19.52 C 8.009 21.64 6.309 22.95 4.429 22.73 Z" fill="rgb(252, 201, 167)" height="22.754000088206016px" id="QRUg9AhCE" transform="translate(30.971 17.48)" width="10.589138246657399px"/><path d="M 3.539 5.19 L 0.699 0 C 0.699 0 -2.011 5.24 3.239 7.56 Z" fill="rgb(242, 192, 158)" height="7.559999999999995px" id="SwFKL6jiz" transform="translate(36.351 26.6)" width="3.53930935206877px"/><path d="M 20.315 11.416 C 19.645 17.006 14.565 20.996 8.975 20.316 C 3.385 19.646 -0.605 14.566 0.075 8.976 C 0.745 3.386 5.825 -0.605 11.415 0.075 C 17.005 0.745 20.985 5.826 20.315 11.416 Z" fill="rgb(252, 201, 167)" height="20.390991180958736px" id="WD3ZNHkN_" transform="translate(28.515 7.924)" width="20.389072759579882px"/><path d="M 4.265 12.6 C 1.615 12.28 -0.285 9.87 0.035 7.21 L 0.875 0.28 L 12.485 0 L 11.665 6.79 C 11.225 10.44 7.915 13.04 4.265 12.6 Z" fill="rgb(252, 201, 167)" height="12.648545523371698px" id="ju_PC4noG" transform="translate(36.345 19.33)" width="12.485265611778075px"/><path d="M 1.68 0 L 3.5 3.52 C 3.75 4.09 3.26 4.69 2.62 4.61 L 0 4.79 Z" fill="rgb(252, 201, 167)" height="4.789999999999999px" id="YJ23SIM3I" transform="translate(46.58 21.57)" width="3.5665216148939862px"/><path d="M 11.011 17.065 L 13.241 16.885 L 14.101 12.905 C 14.101 12.905 23.241 14.525 24.611 10.195 C 24.611 10.195 19.331 -4.365 6.551 1.315 C -2.929 5.525 -0.209 15.945 2.911 19.815 C 3.951 21.105 4.441 22.775 4.301 24.425 C 4.281 24.625 4.261 24.835 4.231 25.055 L 7.961 16.575 Z" fill="rgb(200, 80, 66)" height="25.05496825843646px" id="Dp1to53PD" transform="translate(27.469 5.565)" width="24.611371296810752px"/><path d="M 1.707 0.227 C 3.127 -0.383 4.777 0.277 5.387 1.707 C 5.997 3.127 5.337 4.777 3.907 5.387 C 2.487 5.997 0.837 5.337 0.227 3.907 C -0.383 2.477 0.277 0.837 1.707 0.227 Z" fill="rgb(252, 201, 167)" height="5.614426193928804px" id="Vk5Bnm6bt" transform="translate(33.813 18.163)" width="5.614426193928807px"/><path d="M 26.53 9.405 C 26.53 9.405 24.25 -2.745 13.94 0.575 C 2.58 4.235 7.6 17.345 7.15 20.215 C 6.63 23.575 4.87 27.075 0 27.735 C 0 27.735 13.61 30.795 14.38 21.265 C 15.03 13.245 18.83 9.985 23.16 13.075 Z" fill="rgb(200, 80, 66)" height="28.2025798971026px" id="nzvezKqYe" transform="translate(5.91 0.545)" width="26.529999999999998px"/><path d="M 0.014 6.443 C 0.234 9.773 3.044 12.293 6.294 12.073 C 9.544 11.853 12.014 8.973 11.794 5.643 C 11.574 2.313 8.764 -0.207 5.514 0.013 C 2.264 0.233 -0.206 3.113 0.014 6.443 Z" fill="rgb(252, 201, 167)" height="12.086751556905881px" id="xSUzjcLP0" transform="translate(31.456 114.637)" width="11.807255913510922px"/><path d="M 0 11.41 L 6.07 11.41 L 6.07 0 L 0 0 Z" fill="rgb(252, 201, 167)" height="11.409999999999997px" id="cAo9w6ITC" transform="translate(34.698 106.12)" width="6.07px"/><path d="M 11.312 10.458 L 11.312 66.208 L 2.962 66.208 L 0.012 7.748 C -0.128 5.108 0.982 2.508 3.072 0.968 C 5.452 -0.792 8.662 -0.942 10.912 7.458 C 11.182 8.428 11.312 9.438 11.312 10.458 Z" fill="rgb(79, 77, 75)" height="66.20766823657503px" id="lfiqq4FLb" transform="translate(30.398 45.532)" width="11.311907851758658px"/><path d="M 8.53 3.54 L 8.53 0 L 0 0 L 0.19 3.54 Z" fill="rgb(255, 255, 255)" height="3.539999999999992px" id="nkFj4HQl4" transform="translate(33.18 108.2)" width="8.530099999999997px"/><path d="M 5.52 0.014 C 5.52 0.014 3.17 -0.896 1.98 11.864 C 0.79 24.624 0 84.004 0 84.004 L 37.05 77.694 C 37.05 77.694 30.33 24.594 13.74 0.764 Z" fill="rgb(56, 54, 53)" height="84.00417976783876px" id="TagWKyHNU" transform="translate(25.48 36.226)" width="37.0501px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 88 190" xmlns="http://www.w3.org/2000/svg"><path d="M 2.654 0.787 C 5.244 -0.773 8.614 0.057 10.174 2.657 C 11.734 5.247 10.904 8.617 8.304 10.177 C 5.714 11.737 2.344 10.907 0.784 8.307 C -0.776 5.727 0.064 2.357 2.654 0.787 Z" fill="rgb(153, 107, 81)" height="10.96346179582369px" id="Aq1DK4LHP" transform="translate(26.016 83.693)" width="10.961161891775934px"/><path d="M 13.73 11.44 C 13.55 11.3 3.93 0 3.93 0 L 0 4.76 L 8.68 15.75 Z" fill="rgb(153, 107, 81)" height="15.75px" id="XfKFRU9Le" transform="translate(21.15 73.43)" width="13.729900000000004px"/><path d="M 10.19 1.01 L 7.74 12.2 L 0 11.04 L 2.5 0 Z" fill="rgb(153, 107, 81)" height="12.199999999999989px" id="cL2jsLFSn" transform="translate(16.58 171.96)" width="10.190100000000001px"/><path d="M 7.72 0 L 7.81 11.46 L 0.02 12.04 L 0 0.72 Z" fill="rgb(153, 107, 81)" height="12.039999999999992px" id="p1lTk__9r" transform="translate(53.75 171.97)" width="7.810000000000002px"/><path d="M 24.523 2.052 C 24.363 1.582 23.793 1.382 23.383 1.682 C 22.583 2.262 21.173 2.942 19.133 2.702 C 17.013 2.452 16.254 1.332 15.994 0.532 C 15.854 0.112 15.404 -0.108 14.994 0.052 L 1.864 5.312 C 1.064 5.632 0.424 6.252 0.094 7.042 C -0.226 7.782 0.314 8.612 1.124 8.612 L 23.434 8.772 C 24.314 8.782 25.013 8.052 24.973 7.172 L 24.783 2.862 C 24.783 2.792 24.764 2.722 24.744 2.652 Z" fill="rgb(12, 12, 12)" height="8.772447213101145px" id="lWucDU8j3" transform="translate(0.777 180.288)" width="24.975112808431973px"/><path d="M 0.452 2.052 C 0.612 1.582 1.192 1.382 1.592 1.682 C 2.392 2.262 3.802 2.942 5.842 2.702 C 7.962 2.452 8.712 1.332 8.982 0.532 C 9.122 0.112 9.572 -0.108 9.982 0.052 L 23.112 5.312 C 23.912 5.632 24.552 6.252 24.882 7.042 C 25.202 7.782 24.662 8.612 23.852 8.612 L 1.542 8.772 C 0.662 8.782 -0.038 8.052 0.002 7.172 L 0.192 2.862 C 0.192 2.792 0.212 2.722 0.232 2.652 Z" fill="rgb(12, 12, 12)" height="8.772447213101145px" id="YQQ21LLon" transform="translate(52.528 180.288)" width="24.975153012091823px"/><path d="M 17.95 0 L 11.02 0.6 L 0 6.81 L 0 50.97 L 29.41 50.97 L 29.41 6.81 Z" fill="rgb(128, 168, 193)" height="50.97px" id="dq6h2VziL" transform="translate(34.93 28.3)" width="29.410100000000007px"/><path d="M 5.72 11.21 L 3.73 11.21 C 1.67 11.21 0 9.54 0 7.48 L 0 0 L 9.44 0 L 9.44 7.48 C 9.45 9.54 7.78 11.21 5.72 11.21 Z" fill="rgb(153, 107, 81)" height="11.21px" id="dvIg_VJcW" transform="translate(45.26 21.54)" width="9.440044676922845px"/><path d="M 0 0.06 C 0 0.06 1.47 3.01 4.81 3.01 C 8.15 3.01 9.44 0 9.44 0 Z" fill="rgb(122, 85, 64)" height="3.0100000000000016px" id="dB_DylOJ9" transform="translate(45.26 25.29)" width="9.440000000000005px"/><path d="M 9.447 22.72 L 9.137 22.72 C 4.327 22.72 0.367 18.92 0.177 14.11 L 0.007 9.32 C -0.193 4.23 3.877 0 8.967 0 L 9.617 0 C 13.467 0 18.777 4.23 18.577 9.32 L 18.407 14.11 C 18.217 18.92 14.257 22.72 9.447 22.72 Z" fill="rgb(153, 107, 81)" height="22.720010000000002px" id="DRT2TMNrb" transform="translate(40.643 3.85)" width="18.58255511996655px"/><path d="M 5.867 2.736 C 5.977 4.356 4.757 5.756 3.137 5.866 C 1.517 5.976 0.117 4.756 0.007 3.136 C -0.103 1.516 1.117 0.116 2.737 0.006 C 4.357 -0.094 5.757 1.126 5.867 2.736 Z" fill="rgb(153, 107, 81)" height="5.87262394740941px" id="CxiEWkqYd" transform="translate(37.703 14.064)" width="5.873781604697093px"/><path d="M 5.867 2.736 C 5.977 4.356 4.757 5.756 3.137 5.866 C 1.517 5.976 0.117 4.756 0.007 3.136 C -0.103 1.516 1.117 0.116 2.737 0.006 C 4.357 -0.094 5.757 1.126 5.867 2.736 Z" fill="rgb(153, 107, 81)" height="5.87262394740941px" id="mTqB_RCS6" transform="translate(56.283 14.064)" width="5.873781091020035px"/><path d="M 18.29 0 L 0 97.23 L 10.51 97.13 L 37.25 0.19 Z" fill="rgb(12, 12, 12)" height="97.22999999999999px" id="EeoSddIpo" transform="translate(16.64 79.06)" width="37.25px"/><path d="M 16.69 0 L 15.54 97.12 L 4.43 97.12 L 0 0.61 Z" fill="rgb(12, 12, 12)" height="97.11999999999999px" id="PldbQ6LWj" transform="translate(47.65 79.27)" width="16.690000000000005px"/><path d="M 30.937 0 C 30.937 0 6.377 14.82 0.407 25.1 C -0.763 27.11 0.757 29.71 2.817 30.78 C 5.097 31.97 7.907 31.16 9.217 28.95 L 31.937 15.77 C 31.947 15.77 30.937 4.45 30.937 0 Z" fill="rgb(128, 168, 193)" height="31.32799886513203px" id="iLe9ZMUBL" transform="translate(3.993 35.11)" width="31.937308691553994px"/><path d="M 0.131 7.553 L 0.821 14.913 L 1.931 14.913 L 2.071 11.053 C 2.071 11.053 2.651 9.573 5.241 6.393 C 5.241 6.393 6.931 10.713 17.401 9.873 L 18.011 14.753 L 19.091 14.633 L 19.661 9.393 C 20.041 7.623 20.171 5.973 19.851 4.193 C 19.201 0.593 16.271 -1.397 7.811 1.143 C 7.111 1.353 8.541 1.213 7.811 1.143 C 5.391 0.873 -0.989 0.843 0.131 7.553 Z" fill="rgb(92, 46, 6)" height="14.91322998593042px" id="kaPZwzcXC" transform="translate(40.009 0.177)" width="20.0316020438553px"/><path d="M 2.388 1.7 L 0.008 27.16 C -0.082 28.12 0.568 28.99 1.518 29.17 L 30.718 34.75 C 31.788 34.96 32.808 34.2 32.928 33.12 L 35.598 8.92 C 35.698 7.98 35.088 7.11 34.158 6.89 L 4.668 0.05 C 3.568 -0.21 2.498 0.57 2.388 1.7 Z" fill="rgb(175, 175, 175)" height="34.785159986404636px" id="wllL9QscD" transform="translate(50.212 76.87)" width="35.60901488838px"/><path d="M 2.388 1.7 L 0.008 27.16 C -0.082 28.12 0.568 28.99 1.518 29.17 L 30.718 34.75 C 31.788 34.95 32.808 34.2 32.928 33.12 L 35.598 8.92 C 35.698 7.98 35.088 7.11 34.158 6.89 L 4.668 0.05 C 3.578 -0.21 2.498 0.57 2.388 1.7 Z" fill="rgb(209, 209, 209)" height="34.78253131338364px" id="iNVjomDje" transform="translate(51.832 77.32)" width="35.60891599237694px"/><path d="M 7.042 0.227 C 9.942 1.087 11.602 4.137 10.742 7.037 C 9.882 9.937 6.832 11.597 3.932 10.747 C 1.032 9.887 -0.628 6.837 0.222 3.937 C 1.092 1.027 4.132 -0.633 7.042 0.227 Z" fill="rgb(153, 107, 81)" height="10.969360212358424px" id="q365RvrPg" transform="translate(62.378 104.783)" width="10.969417291966685px"/><path d="M 6.15 15.49 C 6.13 15.26 5.19 0 5.19 0 L 0 0.94 L 0.69 13.95 Z" fill="rgb(153, 107, 81)" height="15.489999999999995px" id="gSeKtyHR3" transform="translate(67.18 94.36)" width="6.1499999999999915px"/><path d="M 0.96 0 C 0.96 0 8.82 5.63 9.32 13.65 L 11.78 32.4 C 11.92 33.5 11.98 34.6 11.94 35.71 L 10.99 64.23 L 0.2 64.23 L 0 33.36 Z" fill="rgb(128, 168, 193)" height="64.23px" id="TLo99jZl7" transform="translate(63.38 35.11)" width="11.952165001447689px"/><path d="M 4.89 0 C 4.05 0.61 0 2.89 0 2.89 C 0 2.89 0.11 8.59 8.69 8.13 C 16.24 7.73 16.19 3.1 16.19 3.1 L 10.98 0 Z" fill="rgb(153, 107, 81)" height="8.156416227545076px" id="lkBP3byeS" transform="translate(41.89 28.3)" width="16.1900085437225px"/><path d="M 12.06 0 L 26.74 23.46 L 19.78 30.05 L 0 6.96 Z" fill="rgb(128, 168, 193)" height="30.050000000000004px" id="ImtaiMGBd" transform="translate(4.44 56.51)" width="26.73997px"/><path d="M 2.44 29.65 L 2.44 19.15 L 0 0" fill="transparent" height="29.64999999999999px" id="nKaRpd45R" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.7693" stroke="rgb(93, 136, 163)" transform="translate(60.93 49.31)" width="2.4399999999999977px"/></svg>)
Aperçu du produit
Application web offre un service de diffusion de tournois et ligues de hockey.
Modes visiteur et administrateur.
Principalement fréquenté sur les appareils mobiles.
Le site web est robuste, les données et fonctionnalités présentes sont fiables.
Produit canadien depuis 2002.
Mission
DEV 2025 - 2026
Objectif: Accroître le traffic sur le site en augmentant le nombre d’inscriptions de tournois et ligues.
Solution: Favoriser l’engagement, la satisfaction et le traffic des utilisateurs sur le site web, en améliorant leur expérience utilisateur avec une interface accessible, moderne et avant-gardiste.
Première phase: refonte de la conception UI/UX du site web en mode visiteur
Mon rôle
UI/UX Designer
Responsabilités
Conception
Recherche UX
Direction artistique
Collaboration avec les développeurs et gestionnaires
Processus de conception
1
1
Empathie
Empathie
Persona
Leo Tremblay
âge
34
éducation
Formation professionnelle
Statut
Père de 2 enfants
Occupation
Contremaître
Location
Rouyn Noranda
technologie
Avancé
Ma famille est ma plus grande fierté. Le sport, ma passion, qui nous me permet de créer des souvenirs ensemble en famille et dans notre région.
Personnalité
Introverti
Manuel
Fier
Rassembleur
Bio
Orienté vers la famille et passionné de sports et de plein air, Leo est impliqué dans l’équipe de hockey de ses enfants dans une ligue junior. Il suit les parties et les pratiques et aime rassembler les gens.
Il cherche un service accessible et inclusif pour consulter et partager de l’information sur les tournois. La ligue junior a un budget pour ce genre d’événements, et il a même offert son aide pour l’organisation.
Besoins essentiels
•
Consulter et partager l’information sur les tournois de ses enfants
•
Partager les horaires et résultats à son entourage de tous âges
Frustrations
•
Peu de services disponibles dans sa région.
•
Il veut retrouver facilement l'information.
Plateforme
Mobile
Persona
Leo Tremblay
âge
34
éducation
Formation professionnelle
Statut
Père de 2 enfants
Occupation
Contremaître
Location
Rouyn Noranda
technologie
Avancé
Ma famille est ma plus grande fierté. Le sport, ma passion, qui nous me permet de créer des souvenirs ensemble en famille et dans notre région.
Personnalité
Introverti
Manuel
Fier
Rassembleur
Bio
Orienté vers la famille et passionné de sports et de plein air, Leo est impliqué dans l’équipe de hockey de ses enfants dans une ligue junior. Il suit les parties et les pratiques et aime rassembler les gens.
Il cherche un service accessible et inclusif pour consulter et partager de l’information sur les tournois. La ligue junior a un budget pour ce genre d’événements, et il a même offert son aide pour l’organisation.
Besoins essentiels
•
Consulter et partager l’information sur les tournois de ses enfants
•
Partager les horaires et résultats à son entourage de tous âges
Frustrations
•
Peu de services disponibles dans sa région.
•
Il veut retrouver facilement l'information.
Plateforme
Mobile
Leo Tremblay
âge
34
éducation
Formation professionnelle
Statut
Père de 2 enfants
Occupation
Contremaître
Location
Rouyn Noranda
technologie
Avancé
Ma famille est ma plus grande fierté. Le sport, ma passion, qui nous me permet de créer des souvenirs ensemble en famille et dans notre région.
Personnalité
Introverti
Manuel
Fier
Rassembleur
Plateforme
Mobile
Bio
Orienté vers la famille et passionné de sports et de plein air, Leo est impliqué dans l’équipe de hockey de ses enfants dans une ligue junior. Il suit les parties et les pratiques et aime rassembler les gens.
Il cherche un service accessible et inclusif pour consulter et partager de l’information sur les tournois. La ligue junior a un budget pour ce genre d’événements, et il a même offert son aide pour l’organisation.
Besoins essentiels
•
Consulter et partager l’information sur les tournois de ses enfants
•
Partager les horaires et résultats à son entourage de tous âges
Frustrations
•
Peu de services disponibles dans sa région.
•
Il veut retrouver facilement l'information.
Carte expérience utilisateur
Carte expérience utilisateur
2
2
Définition
Définition
Points de friction
01
accessibilité
Besoins:
navigation clavier
lecteur d’écran
mode sombre
contraste
02
navigation
Manque certains repères entre les pages, revoir menu et sous-menus.
03
communication
Peu d'icônes et illustrations: potentiel de ludification.
Revoir l’architecture d’information.
04
interaction
Peu d'états de chargement, d’erreur et “empty state”, de micro-animations.
Sitemap
Sitemap
Points de friction
01
accessibilité
Besoins:
navigation clavier
lecteur d’écran
mode sombre
contraste
02
navigation
Manque certains repères entre les pages, revoir menu et sous-menus.
03
communication
Peu d'icônes et illustrations: potentiel de ludification.
Revoir l’architecture d’information.
04
interaction
Peu d'états de chargement, d’erreur et “empty state”, de micro-animations.
3
3
Idéation
Idéation
Wireframes
Ajout de modales pour restructurer l'information affichée, notamment pour les filtres et options;
Explorations de différents éléments de navigations: boutons de retour, options disponibles…
Wireframes
Ajout de modales pour restructurer l'information affichée, notamment pour les filtres et options;
Explorations de différents éléments de navigations: boutons de retour, options disponibles…
4
4
Prototypage
Prototypage
Prototypes basse fidélité
Direction artistique
Palette de couleurs
bleu glace
#739FBB
rouge érable
#C23D2C
bleu nuit profond
#1C3D5C
gris arène
#808E97
gris clair
#EDF0F2
noir puck
#232323
bleu puck
#3A7CA5
or trophée
#E1C08B
Typographie
Titres: Chakra Petch
Corps de texte: Sora
Prototypes basse fidélité
Direction artistique
Palette de couleurs
bleu glace
#739fbb
rouge érable
#C23D2C
bleu nuit profond
#1C3D5C
gris arène
#808E97
gris clair
#EDF0F2
noir puck
#232323
bleu puck
4F87AC
or trophée
#E1C08B
Typographie
Titres: Chakra Petch
Corps de texte: Sora
5
Tests
Étude d'utilisabilité
Paramètres
Type d’étude:
Modérée
Location:
Canada, présentiel
Participants:
4 participants
Durée:
15 minutes
Déroulement
Intro
Parcours: retrouver les informations sur une partie dans un tournoi
Retour sur l’exercice et échange
Découvertes
01
Porte d’entrée
La page d’accueil doit offrir à l’utilisateur des repères et une porte d’entrée (CTA) plus clairs.
Revoir le texte et les images, ainsi que les espaces négatifs.
02
Multi-plateformes
Tenir compte des états et interactions (scroll, hover, tap, click...) des éléments du UI qui peuvent varier sur différents types d’appareil et systèmes d’exploitation.
03
Navigation
Améliorer les liens entre les pages, à l’aide de repères, diminuer la quantité d’information affichée pour dégager l’essentiel.
Le contenu doit être facile à découvrir et captiver l’audience.
Processus de conception
Empathie
Définition
Idéation
Prototypage
Test
Mission
DEV 2025 - 2026
Objectif: Accroître le traffic sur le site en augmentant le nombre d’inscriptions de tournois et ligues.
Solution: Favoriser l’engagement, la satisfaction et le traffic des utilisateurs sur le site web, en améliorant leur expérience utilisateur avec une interface accessible, moderne et avant-gardiste.
Première phase: refonte de la conception UI/UX du site web en mode visiteur
Aperçu du produit
Application web offre un service de diffusion de tournois et ligues de hockey.
Modes visiteur et administrateur.
Principalement fréquenté sur les appareils mobiles.
Produit canadien depuis 2002.
Mon rôle
UI/UX Designer
Responsabilités
Conception
Recherche UX
Direction artistique
Collaboration avec les développeurs et gestionnaires
Tests
5
Étude d'utilisabilité
Paramètres
Type d’étude:
Modérée
Location:
Canada, présentiel
Participants:
4 participants
Durée:
15 minutes
Déroulement
Intro
Parcours: retrouver les informations sur une partie dans un tournoi
Retour sur l’exercice et échange
Découvertes
01
Porte d'entrée
Ajouter des repères dans la page et une porte d’entrée (CTA) plus clairs dans la page d'accueil.
02
Multi-plateformes
Tenir compte des états et interactions des éléments du UI sur différents types d’appareils et systèmes d’exploitation.
03
Navigation
Améliorer les liens entre les pages, à l’aide de repères, diminuer la quantité d’information affichée pour dégager l’essentiel.
Résultat
goaltop
Goaltop
Refonte de l’expérience utilisateur et du design visuel du site web Goaltop • Gestion et partage de tournois sportifs
UI/UX Design • Branding • illustration
goaltop
Goaltop
Refonte de l’expérience utilisateur et du design visuel du site web Goaltop • Gestion et partage de tournois sportifs
UI/UX Design • Branding • illustration
Résultat
Aperçu du produit
Application web offre un service de diffusion de tournois et ligues de hockey.
Modes visiteur et administrateur.
Principalement fréquenté sur les appareils mobiles.
Le site web est robuste, les données et fonctionnalités présentes sont fiables.
Produit canadien depuis 2002.
Mission
DEV 2025 - 2026
Objectif: Accroître le traffic sur le site en augmentant le nombre d’inscriptions de tournois et ligues.
Solution: Favoriser l’engagement, la satisfaction et le traffic des utilisateurs sur le site web, en améliorant leur expérience utilisateur avec une interface accessible, moderne et avant-gardiste.
Première phase: refonte de la conception UI/UX du site web en mode visiteur
Mon rôle
UI/UX Designer
Responsabilités
Conception
Recherche UX
Direction artistique
Collaboration avec les développeurs et gestionnaires
Défi
Il y a une opportunité d'amélioration au niveau de l’expérience globale de l’utilisateur, notamment au niveau de la communication, de l’engagement et pour rendre l’interface utilisateur plus intuitive et accessible.
Processus de conception
Empathie
Définition
Idéation
Prototypage
Test
Persona
Leo Tremblay
âge
34
éducation
Formation professionnelle
Statut
Père de 2 enfants
Occupation
Contremaître
Location
Rouyn Noranda
technologie
Avancé
Ma famille est ma plus grande fierté. Le sport, ma passion, qui nous me permet de créer des souvenirs ensemble en famille et dans notre région.
Personnalité
Introverti
Manuel
Fier
Rassembleur
Bio
Orienté vers la famille et passionné de sports et de plein air, Leo est impliqué dans l’équipe de hockey de ses enfants dans une ligue junior. Il suit les parties et les pratiques et aime rassembler les gens.
Il cherche un service accessible et inclusif pour consulter et partager de l’information sur les tournois. La ligue junior a un budget pour ce genre d’événements, et il a même offert son aide pour l’organisation.
Besoins essentiels
•
Consulter et partager l’information sur les tournois de ses enfants
•
Partager les horaires et résultats à son entourage de tous âges
Frustrations
•
Peu de services disponibles dans sa région.
•
Il veut retrouver facilement l'information.
Plateforme
Mobile
Carte expérience utilisateur
Empathie
1
Sitemap
Points de friction
01
accessibilité
Besoins:
navigation clavier
lecteur d’écran
mode sombre
contraste
02
navigation
Manque certains repères entre les pages, revoir menu et sous-menus.
03
communication
Peu d'icônes et illustrations: potentiel de ludification.
Revoir l’architecture d’information.
04
interaction
Peu d'états de chargement, d’erreur et “empty state”, de micro-animations.
Définition
2
Prototypes basse fidélité
Direction artistique
Palette de couleurs
bleu glace
#739fbb
rouge érable
#C23D2C
bleu nuit profond
#1C3D5C
gris arènes
#808E97
gris clair
#EDF0F2
noir puck
#232323
bleu puck
#3A7CA5
or trophée
#E1C08B
Typographie
Titres: Chakra Petch
Corps de texte: Sora
Prototypage
4
Wireframes
Ajout de modales pour restructurer l'information affichée, notamment pour les filtres et options;
Explorations de différents éléments de navigation: boutons de retour, options disponibles…
Idéation
3
Tests
5
Étude d'utilisabilité
Paramètres
Type d’étude:
Modérée
Location:
Canada, présentiel
Participants:
4 participants
Durée:
15 minutes
Déroulement
Intro
Parcours: retrouver les informations sur une partie dans un tournoi
Retour sur l’exercice et échange
Découvertes
01
Porte d’entrée
La page d’accueil doit offrir à l’utilisateur des repères et une porte d’entrée (CTA) plus clairs.
Revoir le texte et les images, ainsi que les espaces négatifs.
02
Multi-plateformes
Tenir compte des états et interactions (scroll, hover, tap, click...) des éléments du UI qui peuvent varier sur différents types d’appareil et systèmes d’exploitation.
03
Navigation
Améliorer les liens entre les pages, à l’aide de repères, diminuer la quantité d’information affichée pour dégager l’essentiel.
Le contenu doit être facile à découvrir et captiver l’audience.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0.653 3.637 C 0.217 3.232 0 2.731 0 2.134 C 0 1.538 0.218 1.014 0.653 0.608 C 1.09 0.203 1.651 0 2.34 0 C 3.028 0 3.567 0.203 4.003 0.608 C 4.439 1.013 4.656 1.523 4.656 2.134 C 4.656 2.746 4.438 3.232 4.003 3.637 C 3.566 4.042 3.013 4.245 2.34 4.245 C 1.667 4.245 1.09 4.042 0.653 3.637 Z M 4.289 5.961 L 4.289 18.378 L 0.366 18.378 L 0.366 5.961 Z" fill="rgba(73, 69, 69, 0.9)" height="18.378215031978065px" id="JDwK1WGLS" transform="translate(0.684 0.811)" width="4.65604857994353px"/><path d="M 10.883 1.393 C 11.739 2.321 12.166 3.595 12.166 5.218 L 12.166 12.364 L 8.439 12.364 L 8.439 5.721 C 8.439 4.903 8.227 4.267 7.803 3.815 C 7.38 3.362 6.809 3.135 6.094 3.135 C 5.379 3.135 4.808 3.361 4.385 3.815 C 3.961 4.267 3.748 4.903 3.748 5.721 L 3.748 12.364 L 0 12.364 L 0 0.131 L 3.748 0.131 L 3.748 1.754 C 4.128 1.213 4.64 0.786 5.283 0.471 C 5.926 0.157 6.649 0 7.453 0 C 8.885 0 10.029 0.464 10.883 1.393 Z" fill="rgba(73, 69, 69, 0.9)" height="12.364378571428572px" id="GM5cfIPij" transform="translate(7.152 6.606)" width="12.165857142857135px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 32 20" xmlns="http://www.w3.org/2000/svg"><path d="M 13.834 11.037 C 13.347 10.435 12.79 9.974 12.166 9.662 C 12.718 9.331 13.192 8.924 13.585 8.44 C 14.245 7.623 14.581 6.598 14.581 5.394 C 14.581 4.388 14.312 3.465 13.781 2.649 C 13.251 1.834 12.463 1.179 11.437 0.703 C 10.433 0.236 9.222 0 7.844 0 L 0 0 L 0 20 L 8.204 20 C 9.548 20 10.748 19.758 11.77 19.282 C 12.812 18.797 13.624 18.119 14.181 17.269 C 14.74 16.415 15.024 15.445 15.024 14.386 C 15.024 13.144 14.624 12.017 13.834 11.037 Z M 9.668 7.392 C 9.183 7.78 8.475 7.977 7.567 7.977 L 4.174 7.977 L 4.174 3.546 L 7.567 3.546 C 8.471 3.546 9.175 3.749 9.66 4.152 C 10.125 4.538 10.35 5.07 10.35 5.775 C 10.35 6.48 10.127 7.026 9.668 7.392 Z M 4.174 11.525 L 7.816 11.525 C 8.769 11.525 9.503 11.754 10.058 12.224 C 10.59 12.675 10.848 13.274 10.848 14.056 C 10.848 14.839 10.609 15.391 10.115 15.803 C 9.603 16.231 8.867 16.448 7.926 16.448 L 4.174 16.448 Z" fill="rgba(73, 69, 69, 0.9)" height="20px" id="PASeFcOz0" width="15.0242px"/><path d="M 14.23 3.579 C 13.598 2.452 12.704 1.563 11.57 0.939 C 10.439 0.316 9.13 0 7.687 0 C 6.243 0 4.837 0.325 3.678 0.966 C 2.516 1.609 1.602 2.533 0.963 3.716 C 0.324 4.898 0 6.285 0 7.838 C 0 9.391 0.333 10.78 0.992 11.959 C 1.652 13.14 2.573 14.07 3.735 14.721 C 4.894 15.371 6.224 15.701 7.689 15.701 C 9.487 15.701 11.015 15.249 12.231 14.36 C 13.447 13.471 14.299 12.313 14.763 10.921 L 14.797 10.822 L 11.239 10.822 L 11.217 10.865 C 10.533 12.234 9.346 12.927 7.687 12.927 C 6.531 12.927 5.543 12.565 4.748 11.854 C 3.974 11.159 3.529 10.23 3.425 9.089 L 15.059 9.089 L 15.069 9.025 C 15.144 8.566 15.181 8.047 15.181 7.483 C 15.181 6.019 14.861 4.706 14.23 3.579 Z M 4.803 3.78 C 5.561 3.112 6.484 2.775 7.547 2.775 C 8.722 2.775 9.721 3.118 10.515 3.796 C 11.288 4.454 11.698 5.339 11.733 6.424 L 3.458 6.424 C 3.615 5.322 4.068 4.433 4.805 3.782 Z" fill="rgba(73, 69, 69, 0.9)" height="15.700610000000001px" id="FgkNp2HDN" transform="translate(16.819 4.113)" width="15.1811px"/><path d="M 7.749 0 L 0 0 L 0 1.813 L 7.749 1.813 Z" fill="rgba(73, 69, 69, 0.9)" height="1.812746px" id="EhuJk3yB4" transform="translate(20.534 0.459)" width="7.749400000000001px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 14.222 0 M 0 7.111 L 14.222 7.111" fill="transparent" height="7.111111164093018px" id="qljBQH6Xt" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.78" stroke="rgb(73, 69, 69)" transform="translate(0.889 0.444)" width="14.222222223877907px"/></svg>)