{"id":417,"date":"2025-12-01T20:26:00","date_gmt":"2025-12-02T04:26:00","guid":{"rendered":"https:\/\/tiaogilvie.ca\/?p=417"},"modified":"2026-04-27T21:24:41","modified_gmt":"2026-04-28T04:24:41","slug":"university-of-louisiana","status":"publish","type":"post","link":"https:\/\/tiaogilvie.ca\/?p=417","title":{"rendered":"University of Louisiana"},"content":{"rendered":"\n<div class=\"wide-image-block\" id=\"hero\">\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"435\" src=\"http:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-34-1-1024x435.png\" alt=\"\" class=\"wp-image-549\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-34-1-1024x435.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-34-1-300x128.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-34-1-768x326.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-34-1.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading advgb-dyn-d55d20fd\" id=\"client-fad407c3-efed-4c0b-83ed-1c53ba4b17b3\">Overview<\/h3>\n\n\n\n<p>The University of Louisiana at Lafayette is a public research university in Lafayette, Louisiana. It has the largest enrollment within the nine-campus University of Louisiana System and the second largest enrollment in Louisiana, behind only Louisiana State University.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h4 class=\"wp-block-heading advgb-dyn-3de295b0\">Role<\/h4>\n\n\n\n<p>UI Designer<\/p>\n\n\n\n<h4 class=\"wp-block-heading advgb-dyn-b4e0f222\">Tools<\/h4>\n\n\n\n<p>Figma<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-8406a2c6\">Problem Analysis<\/h3>\n\n\n\n<p>The issues I found with this website are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The theme of the website is old fashion<\/li>\n\n\n\n<li>The layout needs a refresh<\/li>\n\n\n\n<li>The colour red is over used in the header\/menu<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-b061d992\">My Solution<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Redesign ULL\u2019s website to have an up-to-date design.<\/li>\n\n\n\n<li>Preserve the branding of ULL\u2019s website.<\/li>\n\n\n\n<li>Redesign the website\u2019s header.<\/li>\n\n\n\n<li>Redesign the website\u2019s menu.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-d17690cc\">Wireframe<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"3810\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-23.png\" alt=\"\" class=\"wp-image-540\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-23.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-23-151x300.png 151w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-23-516x1024.png 516w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-23-768x1524.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-23-774x1536.png 774w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-23-1032x2048.png 1032w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p><strong>Mobile Wireframe<\/strong><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1176\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-22.png\" alt=\"\" class=\"wp-image-539\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-22.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-22-300x184.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-22-1024x627.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-22-768x470.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-22-1536x941.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p><strong>Web Wireframe<\/strong><\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-e8078194\">Current Version vs My UI Redesign<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"466\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-24.png\" alt=\"\" class=\"wp-image-541\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-24.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-24-300x73.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-24-1024x249.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-24-768x186.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-24-1536x373.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p><strong>Header &amp; Navigation &#8211; Web<\/strong><br>The aim of the redesign for the navigation and header was to simplify it by removing a layer, and making it feel lighter by contolling the amount of information is being shown as well as the colour.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Instead of having all the links crowd the header, I have placed them in the \u201cQuick Links\u201d section of the navigation<\/li>\n\n\n\n<li>In the navigation, the menu item that is being viewed is easily identified compared to the original menu.<\/li>\n\n\n\n<li>Only one list of options will be shown for the menu items, instead of all at once. This will help the user not to feel overwhelmed<\/li>\n<\/ol>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-25.png\" alt=\"\" class=\"wp-image-542\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-25.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-25-300x169.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-25-1024x576.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-25-768x432.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-25-1536x864.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p><strong>Redesign Header &amp; Navigation &#8211; Mobile<\/strong><br>The original mobile version of the menu is not expandable in order too see the different menu options under each section. Therefore, my aim for the mobile menu was to design a mobile navigation that gives the same options and has the same feel as the website.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the original version, the navigation makes the screen longer when it is accessed. However, in the redesign, it opens as an overlay over the screen and provides each menu options and their sub menu options below when clicked<\/li>\n\n\n\n<li>The submenu options<\/li>\n<\/ol>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1148\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-26.png\" alt=\"\" class=\"wp-image-543\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-26.png 2048w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-26-300x168.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-26-1024x574.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-26-768x431.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-26-1536x861.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p><strong>Home Body &#8211; Web &amp; Mobile<\/strong><br>The body section of the home page is organized as columns like a newspaper article. With the layout, users may become overwhelmed with the amount of information they are being shown at a given time. Also, this layout makes the content seems like it is being squuezed in to fit because it is limited by the column width. This may not be the best layout method because website are more generous with horizontal spacing than mobile devices.<br>Therefore, the aim of this section\u2019s redesign is to maximise on the horizontal spacing.<\/p>\n\n\n\n<p>For this page, the order of the sections was determined by the order of the original mobile screen. The aim of the mobile screen is to cut down on the amount of scrolling the user has to do.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The news section highlights only one of the latest news while showing the heading &amp; date of 3 others. In the mobile screen, it is shown as a tab view while web shows it as two separate sections. The original design shows both web &amp; mobile as a tab view.<\/li>\n\n\n\n<li>The event section highlighting the dates of the events.<\/li>\n\n\n\n<li>Secondary button<\/li>\n\n\n\n<li>Use of the primary button with secondary button<\/li>\n\n\n\n<li>This section is expanded in the mobile but is viewed as a carousel in the mobile view.<\/li>\n\n\n\n<li>In the original version, this section is shown as a vertical menu list<\/li>\n\n\n\n<li>On the original website, this section is shown as a collapsable list, I decided to make it into a slider.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1148\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-28.png\" alt=\"\" class=\"wp-image-544\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-28.png 2048w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-28-300x168.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-28-1024x574.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-28-768x431.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-28-1536x861.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p><strong>Current Student Page &#8211; Web &amp; Mobile<\/strong><br>For this page, as with the home page, it uses a column layout. The aim of this page\u2019s redesign is to not crowd the user with too much information, and with the mobile version, to also minimise on scrolling.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>This section is redundant because it is a repetition of the links from the \u201cGet Academic-The Basics\u201d section. And for the mobile, it is at the bottomo of the screen, therefore it will be missed by the user because the page is already long and they might not scroll all the way to the bottom of the page to find that menu.<\/li>\n<\/ol>\n\n\n\n<p><strong>Redesign Student Page &#8211; Web &amp; Mobile<\/strong><br>With this redesign, both the web and mobile pages are shorter in length, especially the mobile screen.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Section header for each of the 3 sections<\/li>\n\n\n\n<li>Selected submenu. in the mobile version it is shown as a dropdown component<\/li>\n\n\n\n<li>Submenu options. For the website, there is always one active submenu showing the menu options. For mobile, none of the dropdowns are expanded until the user clicks on the submenu title.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1148\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-29.png\" alt=\"\" class=\"wp-image-545\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-29.png 2048w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-29-300x168.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-29-1024x574.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-29-768x431.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-29-1536x861.png 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p><strong>Current News Article Single Page &#8211; Web &amp; Mobile<\/strong><br>For this page, it has a lot of information that is unrelated to the article itself. Therefore, the aim for this redesign is to remove all the elements on this page so that it feels lighter and better organise the contents<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>For this section, it is badly placed, especially for the mobile screen where it appears below the article photo but before the article content making it seem as if it is related to the article itself.<\/li>\n\n\n\n<li>These two sections are unrelated to the post but are available from the home page of the News &amp; Events page.<\/li>\n<\/ol>\n\n\n\n<p><strong>Redesign News Article Single Page &#8211; Web &amp; Mobile<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The image for the article is made more evident because it is related to the article<\/li>\n\n\n\n<li>The share options are moved further up the article so that the user does not need to scroll all the way to the bottom of the article to find the option to share.<\/li>\n\n\n\n<li>Contents for the top story section was kept because it is also good to show the users other article they may be interested it. In the mobile version it is presented as a carousel\/horizontal slider.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-ff7a85ae\">UI Kit<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1608\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-33.png\" alt=\"\" class=\"wp-image-546\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-33.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-33-300x251.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-33-1024x858.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-33-768x643.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/Slide-16_9-33-1536x1286.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Overview The University of Louisiana at Lafayette is a public research university in Lafayette, Louisiana. It has the largest enrollment within the nine-campus University of Louisiana System and the second largest enrollment in Louisiana, behind only Louisiana State University. Role UI Designer Tools Figma Problem Analysis The issues I found with this website are as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":499,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[15],"tags":[],"class_list":["post-417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design-study"],"author_meta":{"display_name":"tiaogilvie","author_link":"https:\/\/tiaogilvie.ca\/?author=1"},"featured_img":"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/05\/uol-300x260.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/tiaogilvie.ca\/?cat=15\" class=\"advgb-post-tax-term\">UI Design Study<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">UI Design Study<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 5 months ago","modified":"Updated 12 hours ago"},"absolute_dates":{"created":"Posted on 1 December 2025","modified":"Updated on 27 April 2026"},"absolute_dates_time":{"created":"Posted on 1 December 2025 8:26 pm","modified":"Updated on 27 April 2026 9:24 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts\/417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=417"}],"version-history":[{"count":13,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":552,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts\/417\/revisions\/552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/media\/499"}],"wp:attachment":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}