{"id":2755,"date":"2025-01-14T22:45:35","date_gmt":"2025-01-15T06:45:35","guid":{"rendered":"https:\/\/ischoolgroups.sjsu.edu\/ux\/?p=2755"},"modified":"2025-01-16T00:22:42","modified_gmt":"2025-01-16T08:22:42","slug":"ux-design-in-practice-our-website-has-a-new-look","status":"publish","type":"post","link":"https:\/\/ischoolgroups.sjsu.edu\/ux\/2025\/01\/14\/ux-design-in-practice-our-website-has-a-new-look\/","title":{"rendered":"UX design in practice: Our website has a new look!"},"content":{"rendered":"\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size has-small-font-size\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/2024\/10\/14\/meet-the-24-25-leadership-team-web-coordinator\/\" target=\"_blank\" rel=\"noreferrer noopener\">by Raquel Dubin<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e6e1fb58754&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e6e1fb58754\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_homepage-1024x569.jpeg\" alt=\"Homepage before the redesign.\" class=\"wp-image-2765\" srcset=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_homepage-1024x569.jpeg 1024w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_homepage-300x167.jpeg 300w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_homepage-768x427.jpeg 768w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_homepage-1536x853.jpeg 1536w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_homepage.jpeg 1881w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Before<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e6e1fb5b307&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e6e1fb5b307\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"529\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_homepage-1024x529.png\" alt=\"Redesigned homepage.\" class=\"wp-image-2766\" srcset=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_homepage-1024x529.png 1024w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_homepage-300x155.png 300w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_homepage-768x397.png 768w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_homepage-1536x793.png 1536w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_homepage.png 1876w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">After<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p><strong>Highlights:&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"#smaller-header\" data-type=\"internal\" data-id=\"#smaller-header\">Smaller Header<\/a><\/strong> for easier scrolling and an updated look.<\/li>\n\n\n\n<li><strong><a href=\"#link-labels\">Clear Link Labels<\/a><\/strong> for more intuitive navigation.<\/li>\n\n\n\n<li><strong><a href=\"#menu-structure\">Improved Menu Structure<\/a><\/strong> for easier skimming of menu items.<\/li>\n<\/ul>\n\n\n\n<p>As Web Coordinator for the UXSG @ iSchool, I&#8217;ve revamped the appearance and navigation of the UXSG website to reflect UX design principles. I hope this article provides a helpful case study of UX design in action.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The redesign process<\/h2>\n\n\n\n<p><strong>Research<\/strong>:<strong> <\/strong>To understand our users, I started with research. This involved reviewing Site Analytics through Google Search Console and comparing the original site with similar sites, identifying areas of improvement.<\/p>\n\n\n\n<p><strong>Key insights<\/strong>:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Our users tend to use this site\u2019s homepage, the Blog, and the UX classes page. This shows three likely user needs:\n<ul class=\"wp-block-list\">\n<li>To learn about our group and join<\/li>\n\n\n\n<li>To learn about UX<\/li>\n\n\n\n<li>To see blog posts<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>We could streamline navigation with clear-cut link labels and a deeper menu structure.<\/li>\n\n\n\n<li>We could shrink the site\u2019s header to prioritize content.<\/li>\n<\/ul>\n\n\n\n<p><strong>Proposing changes<\/strong>: <a href=\"https:\/\/www.theflowerpress.net\/beyond-design-communication-skills-every-ux-designer-should-master\/\" target=\"_blank\" rel=\"noreferrer noopener\">Communicating insights is crucial in UX design<\/a>. I created wireframes and a sitemap (See on <a href=\"https:\/\/www.canva.com\/design\/DAGKxTCVA_0\/KMxngvJMYt7chmEn2kOfbQ\/edit?utm_content=DAGKxTCVA_0&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=sharebutton\" target=\"_blank\" rel=\"noreferrer noopener\">Canva<\/a>) to help visualize these changes. The wireframes went through several iterations, and the finished design is a new version on its own, showing the messy, iterative nature of the design process.&nbsp;<\/p>\n\n\n\n<p><strong>Archiving the original site<\/strong>: Following our leadership team&#8217;s recommendations, I archived all pages of the original site, accessible via the <a href=\"https:\/\/web.archive.org\/web\/20241105023221\/https:\/\/ischoolgroups.sjsu.edu\/ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">Wayback Machine<\/a>.<\/p>\n\n\n\n<p>To learn more about the user-centered design process, see <a href=\"https:\/\/www.interaction-design.org\/literature\/article\/5-stages-in-the-design-thinking-process\" target=\"_blank\" rel=\"noreferrer noopener\">this article from the Interaction Design Foundation<\/a>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key changes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"smaller-header\">Header<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e6e1fb5da08&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e6e1fb5da08\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"347\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_header-1024x347.jpeg\" alt=\"Header before the redesign: A circular logo for the User Experience Student Group at the San Jose State University School of Information (UXSG @ SJSU iSchool) in the center of a grayscale and gold header background image with stylized illustrations representing different user experience tasks.\" class=\"wp-image-2767\" srcset=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_header-1024x347.jpeg 1024w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_header-300x102.jpeg 300w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_header-768x260.jpeg 768w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_header-1536x521.jpeg 1536w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_header.jpeg 1881w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Before<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e6e1fb5f3dc&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e6e1fb5f3dc\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"163\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_header-1024x163.png\" alt=\"Redesigned header: A circular logo for the User Experience Student Group at the San Jose State University School of Information (UXSG @ SJSU iSchool) in the center of a solid blue header. The text &quot;UX Student Group at SJSU&quot; is under the logo.\" class=\"wp-image-2768\" srcset=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_header-1024x163.png 1024w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_header-300x48.png 300w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_header-768x122.png 768w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_header-1536x244.png 1536w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_header.png 1876w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">After<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>The website header is now smaller to allow for easier scrolling and for an updated look. I also added \u201cUX Student Group at SJSU\u201d under the logo so that the meaning of UXSG @ SJSU is front and center.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e6e1fb5fdd8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e6e1fb5fdd8\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"60\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_navigation-1024x60.png\" alt=\"Website navigation menu before the redesign, with the menu items from left to right: &quot;Home&quot;, &quot;Events&quot;, &quot;FAQ&quot;, &quot;Sign Up&quot;, &quot;Blog&quot;, &quot;Faculty &amp; Classes&quot;, &quot;Student Leadership&quot;, &quot;Membership Rules&quot;, and &quot;About&quot;.\" class=\"wp-image-2769\" style=\"width:801px;height:auto\" srcset=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_navigation-1024x60.png 1024w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_navigation-300x18.png 300w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_navigation-768x45.png 768w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_navigation.png 1137w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Before<\/figcaption><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e6e1fb641da&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e6e1fb641da\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"179\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_navigation-1024x179.png\" alt=\"Redesigned website navigation menu, with the menu items from left to right: &quot;Home&quot;, &quot;Events&quot;, &quot;FAQ&quot;, &quot;UX Classes&quot;, &quot;Blog&quot;, &quot;About&quot; with the submenu items &quot;Leadership Team&quot; and &quot;Membership Rules&quot;, and &quot;Join UXSG&quot;.\" class=\"wp-image-2770\" style=\"width:841px;height:auto\" srcset=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_navigation-1024x179.png 1024w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_navigation-300x53.png 300w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_navigation-768x134.png 768w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_navigation.png 1451w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">After<\/figcaption><\/figure>\n\n\n\n<p>The main navigation of our site now has clear-cut link labels and an improved menu structure:<\/p>\n\n\n\n<p id=\"link-labels\"><strong>Clear link labels: <\/strong>I<strong> <\/strong>renamed three of the link labels for more intuitive navigation.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u201cSign Up\u201d to \u201cJoin UXSG\u201d\n<ul class=\"wp-block-list\">\n<li>\u201cJoin UXSG\u201d clearly describes how users can join our group: by signing up for our newsletter.&nbsp;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u201cFaculty &amp; Classes\u201d to \u201cUX Classes\u201d\n<ul class=\"wp-block-list\">\n<li>\u201cUX Classes\u201d succinctly describes the page it links to. It also allows for content growth beyond the faculty and classes available at SJSU.&nbsp;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u201cStudent Leadership\u201d to \u201cLeadership Team\u201d\n<ul class=\"wp-block-list\">\n<li>\u201cLeadership Team\u201d is a slightly shorter, more descriptive link label.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p id=\"menu-structure\"><strong>Improved menu structure<\/strong>:<strong> <\/strong>I made two of the menu options (\u201cLeadership Team\u201d and \u201cMembership Rules\u201d) subcategories of the \u201cAbout\u201d page.&nbsp;<\/p>\n\n\n\n<p>This reduces the overwhelm of menu options that can occur with \u201cflatter\u201d website structures (See<a href=\"https:\/\/ux.iu.edu\/articles\/navigation-and-architecture\/\" target=\"_blank\" rel=\"noreferrer noopener\"> this Navigation and Architecture article<\/a> for more on flat versus deep website structures and other concepts useful for website navigation).<\/p>\n\n\n\n<p><strong>Search bar and Breadcrumbs<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>To provide options beyond main navigation, I added a search bar and breadcrumbs to the site. These are the site\u2019s new breadcrumbs:<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e6e1fb64d2b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e6e1fb64d2b\" class=\"wp-block-image aligncenter size-large is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"113\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/breadcrumbs-1024x113.png\" alt=\"An example of breadcrumbs on the UXSG website.\" class=\"wp-image-2771\" style=\"width:591px;height:auto\" srcset=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/breadcrumbs-1024x113.png 1024w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/breadcrumbs-300x33.png 300w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/breadcrumbs-768x84.png 768w, https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/breadcrumbs.png 1474w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Accessibility<\/h3>\n\n\n\n<p>Accessibility is always a crucial aspect of design. The official Web Content Accessibility Guidelines (WCAG) can be found in this <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/\" target=\"_blank\" rel=\"noreferrer noopener\">customizable quick reference<\/a> by the World Wide Web Consortium (W3C).<\/p>\n\n\n\n<p>For this redesign, I ensured:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>High color contrast<\/strong>, meaning that users can easily see text against background colors. A great tool for this is <a href=\"https:\/\/color.adobe.com\/create\/color-contrast-analyzer\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe\u2019s Color Contrast Analyzer<\/a>. The color choices are based on SJSU\u2019s school colors.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:500px\">\n<ul class=\"wp-block-list\">\n<li><strong>Large, easily visible<\/strong> <strong>buttons<\/strong>, making it easy to see and press the buttons on our site. For example, I made the hamburger menu button larger and added a \u201cMenu\u201d label for clarity:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"121\" height=\"121\" src=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/original_hamburger_menu.jpg\" alt=\"Hamburger menu before the redesign: three stacked solid black lines.\" class=\"wp-image-2772\" style=\"width:102px;height:auto\"\/><figcaption class=\"wp-element-caption\">Before<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"183\" height=\"233\" src=\"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-content\/uploads\/2025\/01\/new_hamburger_menu.jpg\" alt=\"Redesigned hamburger menu: three stacked solid white lines over a dark blue background with the label &quot;Menu&quot;.\" class=\"wp-image-2773\" style=\"width:80px;height:auto\"\/><figcaption class=\"wp-element-caption\">After<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>We hope these changes will improve the user experience of our website. Feel free to let us know what you think in the comments below!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Highlights:&nbsp; As Web Coordinator for the UXSG @ iSchool, I&#8217;ve revamped the appearance and navigation of the UXSG website to reflect UX design principles. I hope this article provides a helpful case study of UX design in action. The redesign process Research: To understand our users, I started with research. This involved reviewing Site Analytics [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":2808,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"slim_seo":{"title":"UX design in practice: Our website has a new look! - UXSG@ SJSU iSchool","description":"Highlights:&nbsp; As Web Coordinator for the UXSG @ iSchool, I've revamped the appearance and navigation of the UXSG website to reflect UX design principles. I"},"footnotes":""},"categories":[5,64],"tags":[39,40,92],"class_list":["post-2755","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-group-news","category-ux-resources","tag-user-experience","tag-ux","tag-website-redesign"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/posts\/2755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/comments?post=2755"}],"version-history":[{"count":35,"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/posts\/2755\/revisions"}],"predecessor-version":[{"id":2811,"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/posts\/2755\/revisions\/2811"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/media\/2808"}],"wp:attachment":[{"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/media?parent=2755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/categories?post=2755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ischoolgroups.sjsu.edu\/ux\/wp-json\/wp\/v2\/tags?post=2755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}