Timeline: 12 weeks<\/h3>\n<\/div>\n\n\n\n\nCore Team<\/h3>\n\n\n\n- Front-end Developer<\/li>
- Digital Communications Assistant<\/li>
- Copywriter<\/li>
- SEO Content Expert<\/li><\/ul>\n<\/div>\n\n<\/div>\n\n\n\n\n
My Responsibilities<\/h3>\n\n\n\n- Project management<\/li>
- Information architecture<\/li>
- Wireframing<\/li>
- UI Design and prototyping<\/li>
- Drupal portion of front-end development<\/li>
- Writing documentation<\/li>
- On-boarding and outreach<\/li><\/ul>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n\n\n\n
Results<\/h3>\n\n\n\n- Increased traffic the Majors site homepage by 32%.<\/li>
- Page Views increased for almost every major page YOY Q1<\/li>
- Moved up in Google Search Rankings<\/li>
- Greatly improved content ops for this site<\/li><\/ul>\n<\/div>\n\n\n\n\n
\n<\/div>\n\n\n\n\nCompany Overview<\/h2>\n\n\n\nWestern Washington University<\/h3>\n\n\n\n
Western Washington University is a mid-size, public university in Bellingham, WA. Total enrollment is around 16,000 students.<\/p>\n\n\n\n
The Office of Admissions oversees the Majors Site, one of the highest traffic sites used for undergraduate recruitment. Prospective students use it to browse the majors and programs offered by the university.<\/p>\n\n\n\n
Availability of major is one of the most important factors in the college search process.<\/strong> Therefore, it\u2019s crucial to make this part of the customer journey as easy as possible.<\/p>\n\n\n\nThe Majors Site was launched in 2016, and I\u2019ve been responsible for designing and implementing the bulk of the changes to it since 2019.<\/p>\n<\/div>\n\n\n\n
\n
\n<\/div>\n\n\n\nProject History<\/h2>\n\n\n\nMajors Homepage 2016<\/h3>\n\n\n\n\n![\"\"](\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\")
<\/figure>\n<\/figure>\n\n\n\n\nWhat wasn’t working<\/h4>\n\n\n\n- 200+ items in an alphabetical list with no way of filtering or sorting<\/li>
- Non-tabular information displayed in a table<\/li>
- Only wide-screen compatible, not responsive for mobile-sized screens<\/li><\/ul>\n\n\n\n<\/div>\n<\/div>\n\n\n\n
Majors Homepage 2018<\/h3>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n\n\n\nWhat was working<\/h4>\n\n\n\n- Keyboard search gives a way to filter the 200+ item list<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n- Lime green on blue isn\u2019t a minimum 1:3 contrast for larger text and doesn\u2019t meet web accessibility standards<\/li>
- Keyword search is pulling from just degree titles, so keyword search isn\u2019t reliable<\/li>
- Long degree titles taking up multiple lines \u201cBiology\u2014Ecology, Evolution, and Organismal Biology (EEO) Emphasis, BS\u201d<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<\/div>\n\n\n\n
Majors Homepage 2021<\/h3>\n\n\n\n\nRight before this project started<\/figcaption><\/figure>\n<\/figure>\n\n\n\n\n\n\nWhat was working<\/h4>\n\n\n\n- This splash header displayed a random major on page load. This is one of the features I kept.<\/li>
- The list is much shorter (about 100 majors) due to consolidation from ongoing information architecture project.<\/li>
- Majors names are much shorter.<\/li>
- The list is able to be filtered by keyword or starting letter.<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n- Header block is taking up too much vertical height for the value of information it\u2019s delivering.<\/li>
- Despite consolidation, the page is still much too long and isn\u2019t compelling content.<\/li>
- There is still no dedicated field for keywords and search results rely on the contents of the body field that describes the field of study.<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n
\n<\/div>\n\n\n\nProcess Timeline<\/h2>\n\n\n\n
I was the project lead and UX\/UI Designer on this 12-week project from design to post-launch with a core remote team of 4: my web content assistant, a front-end developer, an SEO editor, and a copywriter.<\/p>\n\n\n\n
\nWeeks 1\u20132: Migration of site content and information architecture redesign<\/p>\n\n\n\n
Week 2: Design survey of the competition<\/p>\n\n\n\n
Weeks 3\u20136: Wireframe, prototype, and review<\/p>\n\n\n\n
Weeks 7\u20138: Coding components and building Drupal structures<\/p>\n\n\n\n
Week 9: Launch<\/p>\n\n\n\n
Weeks 9\u201310: Added search function<\/p>\n\n\n\n
Weeks 10\u201311: On-boarding and outreach<\/p>\n<\/div>\n\n\n\n
\n
\n<\/div>\n\n\n\nProcess Details<\/h2>\n\n\n\nContent Strategy & Information Architecture<\/h3>\n\n\n\n
This was the end of a years long process of redesigning the information architecture for this content, writing new content, and wrangling a bunch of fields and metadata. Originally each of the 200+ degree programs had their own page.<\/p>\n\n\n\n
\nProblems<\/h4>\n\n\n\n- hard to scan-read homepage<\/li>
- hard to search homepage<\/li>
- redundant content on degrees pages from poor content strategy and lack of resources<\/li>
- poor Google search rankings<\/li><\/ul>\n<\/div>\n\n\n\n\n
Solution: Re-centering User Experience<\/h4>\n\n\n\n
College students ask \u201cWhat\u2019s your major?\u201d, not \u201cWhat\u2019s your degree program?\u201d Interest clusters are important to their college search. <\/p>\n\n\n\n
The first logical step was to consolidate the 200+ degree programs into majors.<\/p>\n\n\n\n
\n\nDegrees<\/strong>
Biology, BA
Biology\/Anthropology, BS
Biology\/Mathematics, BS
Biology\u2014 Ecology, Evolution, and Organismal Biology (EEO) Emphasis, BS
Biology\u2014 General Emphasis, BS
Biology\u2014 Marine Emphasis, BS
Biology\u2014 Molecular and Cell Biology Emphasis, BS
Biology\u2014 Secondary Teaching Emphasis, BS
Chemistry\/Biology\u2014 Secondary, BAE<\/p>\n<\/div>\n\n\n\n\n\u2192<\/p>\n<\/div>\n\n\n\n
\nMajor<\/strong>
Biology<\/p>\n<\/div>\n<\/div>\n\n\n\nThe second was to assign an interest category tag to each major. A single majors can be tagged with multiple categories.<\/p>\n\n\n\n
\n\nAll Interest<\/strong> Categories<\/strong>
Advocacy and Social Justice
Business
Culture and Language
Design
Education
Engineering
Environment
Health
Humanities
Interdisciplinary
Math
Media and Communication
Science
STEM
Technology<\/p>\n<\/div>\n\n\n\n\nExample of Majors in an Interest Category<\/strong>
Advocacy and Social Justice<\/strong>
American Cultural Studies
Sociology
Urban Planning
Urban Sustainability
Women, Gender, and Sexuality Studies<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\nSolution: Standardizing Content in Drupal<\/h4>\n\n\n\n
Easier to create templates for. Easier for copywriters to manage content.<\/p>\n\n\n\n
- I identified what content was shared by each major:<\/strong> degree programs, advisors, academic departments, etc.<\/li>
- I created a new content type in Drupal<\/strong> with fields that fit the type of data to be stored, and multiple taxonomies for reusable data like contact info for advisers.<\/li>
- This made content easier to manage:<\/strong> changes could be made in one place and updated in many, filter-based dynamic content, etc.<\/li><\/ol>\n\n\n\n
\n<\/figure>\n<\/figure>\n<\/div>\n\n\n\n<\/div>\n\n\n\nDesign Survey<\/h3>\n\n\n\n
The university had neither the budget nor the time to do any user research. Therefore, I conducted a design survey of both university academic program and education-related private sector websites to identify familiar UX patterns for our users and assist with stakeholder buy-in.<\/p>\n\n\n\n
Included in Survey<\/strong><\/summary>\nUniversities (Competition)<\/strong><\/p>\n\n\n\n- University of Washington<\/li>
- Washington State University<\/li>
- Central Washington University<\/li>
- University of Colorado – Boulder<\/li><\/ul>\n\n\n\n
Universities (Aspirational)<\/strong><\/p>\n\n\n\n- Stanford: Undergrad Majors<\/li>
- Brown: Undergraduate Concentrations<\/li>
- Harvard: Programs<\/li>
- SCAD: Academic Programs<\/li><\/ul>\n\n\n\n
Private Sector<\/strong><\/p>\n\n\n\n- Skillshare<\/li>
- Code Academy: Catalog<\/li>
- General Assembly<\/li>
- Udemy<\/li><\/ul>\n<\/div><\/details><\/div>\n\n\n\n\n
Process<\/h4>\n\n\n\n- Gathering screenshots into FigJam and jotting down immediate thoughts<\/li>
- 2 quick workshops: immediate team and university-wide marketing
- Discuss what was\/wasn\u2019t working<\/li>
- Identify specific components and patterns that would support our goals and resonate with our audience<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n\n
Outcomes<\/h4>\n\n\n\n\n\n\n<\/figure>\n\n\n\nHad a good feel for the different kinds of interaction animations and patterns to explore during the design phase.<\/p>\n<\/div>\n\n<\/div>\n\n
\n\n\n<\/figure>\n\n\n\nDecreased the amount of time it would have taken to design and prototype more than 2 different options by being able to focus on specific UI patterns.<\/p>\n<\/div>\n\n<\/div>\n\n
\n\n\n<\/figure>\n\n\n\nCould point to specific examples from other institutions\/companies when questioned by administration-level stakeholders.<\/p>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/div>\n\n\n\n
<\/div>\n\n\n\nWireframe and Prototype<\/h3>\n\n\n\n\nProcess<\/h4>\n\n\n\n
Throughout this process I kept our front-end developer in the loop so she could let me know if something would be too difficult to implement before the deadline. Our accessibility developer was also included in the design review process. This ensured that we wouldn’t waste time on anything that wasn’t accessible. <\/p>\n\n\n\n
- Draft 2\u20133 low fidelity wireframes<\/li>
- Review with stakeholders<\/li>
- Create a high fidelity mock-up and prototype any interaction animations<\/li>
- Review with stakeholders<\/li>
- Share final design to front-end developer<\/li><\/ol>\n\n\n\n
Challenges<\/strong><\/summary>\n- History of poor communication between University Marketing (UM) and my team.<\/li>
- Key team positions in the management structure were vacant.<\/li>
- Despite being the Project Lead, the perceived hierarchy of my position made it difficult to maintain a clear and open line of communication with UM leadership.<\/li>
- UM leadership wasted time making their SEO content designer flesh out specifics for a different page structure without looping me in.<\/li>
- I had to create an additional high fidelity mock-up at the last minute to please leadership. They ultimately did not pick this design.<\/li>
- This ended up delaying our launch date by a week.<\/li><\/ul>\n<\/div><\/details><\/div>\n\n\n\n
Option 1: Individual major cards<\/h4>\n\n\n\nFor all 70 majors. 4 column and 6 column were also tried, but 5 worked best for our content. Using the actual major names was critical as some, like “Communication Sciences and Disorders”, needed to wrap 2\u20133 lines.<\/figcaption><\/figure>\n\n\n\nOption 1 cards (large-screens): animation on hover<\/figcaption><\/figure>\n\n\n\n<\/figure>\nOption 1 cards (small-screens): No hover state for mobile means adjusting elements. Strict character limits on the synopsis ensure that the card functions correctly at all screen-sizes.<\/p>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\nOption 2: Interest\/program sections<\/h4>\n\n\n\n<\/figure>\nOption 2 layout:<\/strong> Single column, large cards for each Interest (12 total). Was initially preferred by some internal stakeholders for the SEO possibilities (Carnegie Dartlet<\/a>, who was consulting for our search campaigns, was strongly advocating for more text on the homepage).<\/p>\n<\/div><\/div>\n\n\n\n<\/figure>\nOption 2 cards: Example of how they would stack on mobile<\/p>\n<\/div><\/div>\n\n\n\n
Core Team<\/h3>\n\n\n\n- Front-end Developer<\/li>
- Digital Communications Assistant<\/li>
- Copywriter<\/li>
- SEO Content Expert<\/li><\/ul>\n<\/div>\n\n<\/div>\n\n\n\n\n
My Responsibilities<\/h3>\n\n\n\n- Project management<\/li>
- Information architecture<\/li>
- Wireframing<\/li>
- UI Design and prototyping<\/li>
- Drupal portion of front-end development<\/li>
- Writing documentation<\/li>
- On-boarding and outreach<\/li><\/ul>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n\n\n\n
Results<\/h3>\n\n\n\n- Increased traffic the Majors site homepage by 32%.<\/li>
- Page Views increased for almost every major page YOY Q1<\/li>
- Moved up in Google Search Rankings<\/li>
- Greatly improved content ops for this site<\/li><\/ul>\n<\/div>\n\n\n\n\n
\n<\/div>\n\n\n\n\nCompany Overview<\/h2>\n\n\n\nWestern Washington University<\/h3>\n\n\n\n
Western Washington University is a mid-size, public university in Bellingham, WA. Total enrollment is around 16,000 students.<\/p>\n\n\n\n
The Office of Admissions oversees the Majors Site, one of the highest traffic sites used for undergraduate recruitment. Prospective students use it to browse the majors and programs offered by the university.<\/p>\n\n\n\n
Availability of major is one of the most important factors in the college search process.<\/strong> Therefore, it\u2019s crucial to make this part of the customer journey as easy as possible.<\/p>\n\n\n\nThe Majors Site was launched in 2016, and I\u2019ve been responsible for designing and implementing the bulk of the changes to it since 2019.<\/p>\n<\/div>\n\n\n\n
\n
\n<\/div>\n\n\n\nProject History<\/h2>\n\n\n\nMajors Homepage 2016<\/h3>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n\nWhat wasn’t working<\/h4>\n\n\n\n- 200+ items in an alphabetical list with no way of filtering or sorting<\/li>
- Non-tabular information displayed in a table<\/li>
- Only wide-screen compatible, not responsive for mobile-sized screens<\/li><\/ul>\n\n\n\n<\/div>\n<\/div>\n\n\n\n
Majors Homepage 2018<\/h3>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n\n\n\nWhat was working<\/h4>\n\n\n\n- Keyboard search gives a way to filter the 200+ item list<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n- Lime green on blue isn\u2019t a minimum 1:3 contrast for larger text and doesn\u2019t meet web accessibility standards<\/li>
- Keyword search is pulling from just degree titles, so keyword search isn\u2019t reliable<\/li>
- Long degree titles taking up multiple lines \u201cBiology\u2014Ecology, Evolution, and Organismal Biology (EEO) Emphasis, BS\u201d<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<\/div>\n\n\n\n
Majors Homepage 2021<\/h3>\n\n\n\n\nRight before this project started<\/figcaption><\/figure>\n<\/figure>\n\n\n\n\n\n\nWhat was working<\/h4>\n\n\n\n- This splash header displayed a random major on page load. This is one of the features I kept.<\/li>
- The list is much shorter (about 100 majors) due to consolidation from ongoing information architecture project.<\/li>
- Majors names are much shorter.<\/li>
- The list is able to be filtered by keyword or starting letter.<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n- Header block is taking up too much vertical height for the value of information it\u2019s delivering.<\/li>
- Despite consolidation, the page is still much too long and isn\u2019t compelling content.<\/li>
- There is still no dedicated field for keywords and search results rely on the contents of the body field that describes the field of study.<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n
\n<\/div>\n\n\n\nProcess Timeline<\/h2>\n\n\n\n
I was the project lead and UX\/UI Designer on this 12-week project from design to post-launch with a core remote team of 4: my web content assistant, a front-end developer, an SEO editor, and a copywriter.<\/p>\n\n\n\n
\nWeeks 1\u20132: Migration of site content and information architecture redesign<\/p>\n\n\n\n
Week 2: Design survey of the competition<\/p>\n\n\n\n
Weeks 3\u20136: Wireframe, prototype, and review<\/p>\n\n\n\n
Weeks 7\u20138: Coding components and building Drupal structures<\/p>\n\n\n\n
Week 9: Launch<\/p>\n\n\n\n
Weeks 9\u201310: Added search function<\/p>\n\n\n\n
Weeks 10\u201311: On-boarding and outreach<\/p>\n<\/div>\n\n\n\n
\n
\n<\/div>\n\n\n\nProcess Details<\/h2>\n\n\n\nContent Strategy & Information Architecture<\/h3>\n\n\n\n
This was the end of a years long process of redesigning the information architecture for this content, writing new content, and wrangling a bunch of fields and metadata. Originally each of the 200+ degree programs had their own page.<\/p>\n\n\n\n
\nProblems<\/h4>\n\n\n\n- hard to scan-read homepage<\/li>
- hard to search homepage<\/li>
- redundant content on degrees pages from poor content strategy and lack of resources<\/li>
- poor Google search rankings<\/li><\/ul>\n<\/div>\n\n\n\n\n
Solution: Re-centering User Experience<\/h4>\n\n\n\n
College students ask \u201cWhat\u2019s your major?\u201d, not \u201cWhat\u2019s your degree program?\u201d Interest clusters are important to their college search. <\/p>\n\n\n\n
The first logical step was to consolidate the 200+ degree programs into majors.<\/p>\n\n\n\n
\n\nDegrees<\/strong>
Biology, BA
Biology\/Anthropology, BS
Biology\/Mathematics, BS
Biology\u2014 Ecology, Evolution, and Organismal Biology (EEO) Emphasis, BS
Biology\u2014 General Emphasis, BS
Biology\u2014 Marine Emphasis, BS
Biology\u2014 Molecular and Cell Biology Emphasis, BS
Biology\u2014 Secondary Teaching Emphasis, BS
Chemistry\/Biology\u2014 Secondary, BAE<\/p>\n<\/div>\n\n\n\n\n\u2192<\/p>\n<\/div>\n\n\n\n
\nMajor<\/strong>
Biology<\/p>\n<\/div>\n<\/div>\n\n\n\nThe second was to assign an interest category tag to each major. A single majors can be tagged with multiple categories.<\/p>\n\n\n\n
\n\nAll Interest<\/strong> Categories<\/strong>
Advocacy and Social Justice
Business
Culture and Language
Design
Education
Engineering
Environment
Health
Humanities
Interdisciplinary
Math
Media and Communication
Science
STEM
Technology<\/p>\n<\/div>\n\n\n\n\nExample of Majors in an Interest Category<\/strong>
Advocacy and Social Justice<\/strong>
American Cultural Studies
Sociology
Urban Planning
Urban Sustainability
Women, Gender, and Sexuality Studies<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\nSolution: Standardizing Content in Drupal<\/h4>\n\n\n\n
Easier to create templates for. Easier for copywriters to manage content.<\/p>\n\n\n\n
- I identified what content was shared by each major:<\/strong> degree programs, advisors, academic departments, etc.<\/li>
- I created a new content type in Drupal<\/strong> with fields that fit the type of data to be stored, and multiple taxonomies for reusable data like contact info for advisers.<\/li>
- This made content easier to manage:<\/strong> changes could be made in one place and updated in many, filter-based dynamic content, etc.<\/li><\/ol>\n\n\n\n
\n<\/figure>\n<\/figure>\n<\/div>\n\n\n\n<\/div>\n\n\n\nDesign Survey<\/h3>\n\n\n\n
The university had neither the budget nor the time to do any user research. Therefore, I conducted a design survey of both university academic program and education-related private sector websites to identify familiar UX patterns for our users and assist with stakeholder buy-in.<\/p>\n\n\n\n
Included in Survey<\/strong><\/summary>\nUniversities (Competition)<\/strong><\/p>\n\n\n\n- University of Washington<\/li>
- Washington State University<\/li>
- Central Washington University<\/li>
- University of Colorado – Boulder<\/li><\/ul>\n\n\n\n
Universities (Aspirational)<\/strong><\/p>\n\n\n\n- Stanford: Undergrad Majors<\/li>
- Brown: Undergraduate Concentrations<\/li>
- Harvard: Programs<\/li>
- SCAD: Academic Programs<\/li><\/ul>\n\n\n\n
Private Sector<\/strong><\/p>\n\n\n\n- Skillshare<\/li>
- Code Academy: Catalog<\/li>
- General Assembly<\/li>
- Udemy<\/li><\/ul>\n<\/div><\/details><\/div>\n\n\n\n\n
Process<\/h4>\n\n\n\n- Gathering screenshots into FigJam and jotting down immediate thoughts<\/li>
- 2 quick workshops: immediate team and university-wide marketing
- Discuss what was\/wasn\u2019t working<\/li>
- Identify specific components and patterns that would support our goals and resonate with our audience<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n\n
Outcomes<\/h4>\n\n\n\n\n\n\n<\/figure>\n\n\n\nHad a good feel for the different kinds of interaction animations and patterns to explore during the design phase.<\/p>\n<\/div>\n\n<\/div>\n\n
\n\n\n<\/figure>\n\n\n\nDecreased the amount of time it would have taken to design and prototype more than 2 different options by being able to focus on specific UI patterns.<\/p>\n<\/div>\n\n<\/div>\n\n
\n\n\n<\/figure>\n\n\n\nCould point to specific examples from other institutions\/companies when questioned by administration-level stakeholders.<\/p>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/div>\n\n\n\n
<\/div>\n\n\n\nWireframe and Prototype<\/h3>\n\n\n\n\nProcess<\/h4>\n\n\n\n
Throughout this process I kept our front-end developer in the loop so she could let me know if something would be too difficult to implement before the deadline. Our accessibility developer was also included in the design review process. This ensured that we wouldn’t waste time on anything that wasn’t accessible. <\/p>\n\n\n\n
- Draft 2\u20133 low fidelity wireframes<\/li>
- Review with stakeholders<\/li>
- Create a high fidelity mock-up and prototype any interaction animations<\/li>
- Review with stakeholders<\/li>
- Share final design to front-end developer<\/li><\/ol>\n\n\n\n
Challenges<\/strong><\/summary>\n- History of poor communication between University Marketing (UM) and my team.<\/li>
- Key team positions in the management structure were vacant.<\/li>
- Despite being the Project Lead, the perceived hierarchy of my position made it difficult to maintain a clear and open line of communication with UM leadership.<\/li>
- UM leadership wasted time making their SEO content designer flesh out specifics for a different page structure without looping me in.<\/li>
- I had to create an additional high fidelity mock-up at the last minute to please leadership. They ultimately did not pick this design.<\/li>
- This ended up delaying our launch date by a week.<\/li><\/ul>\n<\/div><\/details><\/div>\n\n\n\n
Option 1: Individual major cards<\/h4>\n\n\n\nFor all 70 majors. 4 column and 6 column were also tried, but 5 worked best for our content. Using the actual major names was critical as some, like “Communication Sciences and Disorders”, needed to wrap 2\u20133 lines.<\/figcaption><\/figure>\n\n\n\nOption 1 cards (large-screens): animation on hover<\/figcaption><\/figure>\n\n\n\n<\/figure>\nOption 1 cards (small-screens): No hover state for mobile means adjusting elements. Strict character limits on the synopsis ensure that the card functions correctly at all screen-sizes.<\/p>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\nOption 2: Interest\/program sections<\/h4>\n\n\n\n<\/figure>\nOption 2 layout:<\/strong> Single column, large cards for each Interest (12 total). Was initially preferred by some internal stakeholders for the SEO possibilities (Carnegie Dartlet<\/a>, who was consulting for our search campaigns, was strongly advocating for more text on the homepage).<\/p>\n<\/div><\/div>\n\n\n\n<\/figure>\nOption 2 cards: Example of how they would stack on mobile<\/p>\n<\/div><\/div>\n\n\n\n
My Responsibilities<\/h3>\n\n\n\n- Project management<\/li>
- Information architecture<\/li>
- Wireframing<\/li>
- UI Design and prototyping<\/li>
- Drupal portion of front-end development<\/li>
- Writing documentation<\/li>
- On-boarding and outreach<\/li><\/ul>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n\n\n\n
Results<\/h3>\n\n\n\n- Increased traffic the Majors site homepage by 32%.<\/li>
- Page Views increased for almost every major page YOY Q1<\/li>
- Moved up in Google Search Rankings<\/li>
- Greatly improved content ops for this site<\/li><\/ul>\n<\/div>\n\n\n\n\n
\n<\/div>\n\n\n\n\nCompany Overview<\/h2>\n\n\n\nWestern Washington University<\/h3>\n\n\n\n
Western Washington University is a mid-size, public university in Bellingham, WA. Total enrollment is around 16,000 students.<\/p>\n\n\n\n
The Office of Admissions oversees the Majors Site, one of the highest traffic sites used for undergraduate recruitment. Prospective students use it to browse the majors and programs offered by the university.<\/p>\n\n\n\n
Availability of major is one of the most important factors in the college search process.<\/strong> Therefore, it\u2019s crucial to make this part of the customer journey as easy as possible.<\/p>\n\n\n\nThe Majors Site was launched in 2016, and I\u2019ve been responsible for designing and implementing the bulk of the changes to it since 2019.<\/p>\n<\/div>\n\n\n\n
\n
\n<\/div>\n\n\n\nProject History<\/h2>\n\n\n\nMajors Homepage 2016<\/h3>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n\nWhat wasn’t working<\/h4>\n\n\n\n- 200+ items in an alphabetical list with no way of filtering or sorting<\/li>
- Non-tabular information displayed in a table<\/li>
- Only wide-screen compatible, not responsive for mobile-sized screens<\/li><\/ul>\n\n\n\n<\/div>\n<\/div>\n\n\n\n
Majors Homepage 2018<\/h3>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n\n\n\nWhat was working<\/h4>\n\n\n\n- Keyboard search gives a way to filter the 200+ item list<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n- Lime green on blue isn\u2019t a minimum 1:3 contrast for larger text and doesn\u2019t meet web accessibility standards<\/li>
- Keyword search is pulling from just degree titles, so keyword search isn\u2019t reliable<\/li>
- Long degree titles taking up multiple lines \u201cBiology\u2014Ecology, Evolution, and Organismal Biology (EEO) Emphasis, BS\u201d<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<\/div>\n\n\n\n
Majors Homepage 2021<\/h3>\n\n\n\n\nRight before this project started<\/figcaption><\/figure>\n<\/figure>\n\n\n\n\n\n\nWhat was working<\/h4>\n\n\n\n- This splash header displayed a random major on page load. This is one of the features I kept.<\/li>
- The list is much shorter (about 100 majors) due to consolidation from ongoing information architecture project.<\/li>
- Majors names are much shorter.<\/li>
- The list is able to be filtered by keyword or starting letter.<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n- Header block is taking up too much vertical height for the value of information it\u2019s delivering.<\/li>
- Despite consolidation, the page is still much too long and isn\u2019t compelling content.<\/li>
- There is still no dedicated field for keywords and search results rely on the contents of the body field that describes the field of study.<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n
\n<\/div>\n\n\n\nProcess Timeline<\/h2>\n\n\n\n
I was the project lead and UX\/UI Designer on this 12-week project from design to post-launch with a core remote team of 4: my web content assistant, a front-end developer, an SEO editor, and a copywriter.<\/p>\n\n\n\n
\nWeeks 1\u20132: Migration of site content and information architecture redesign<\/p>\n\n\n\n
Week 2: Design survey of the competition<\/p>\n\n\n\n
Weeks 3\u20136: Wireframe, prototype, and review<\/p>\n\n\n\n
Weeks 7\u20138: Coding components and building Drupal structures<\/p>\n\n\n\n
Week 9: Launch<\/p>\n\n\n\n
Weeks 9\u201310: Added search function<\/p>\n\n\n\n
Weeks 10\u201311: On-boarding and outreach<\/p>\n<\/div>\n\n\n\n
\n
\n<\/div>\n\n\n\nProcess Details<\/h2>\n\n\n\nContent Strategy & Information Architecture<\/h3>\n\n\n\n
This was the end of a years long process of redesigning the information architecture for this content, writing new content, and wrangling a bunch of fields and metadata. Originally each of the 200+ degree programs had their own page.<\/p>\n\n\n\n
\nProblems<\/h4>\n\n\n\n- hard to scan-read homepage<\/li>
- hard to search homepage<\/li>
- redundant content on degrees pages from poor content strategy and lack of resources<\/li>
- poor Google search rankings<\/li><\/ul>\n<\/div>\n\n\n\n\n
Solution: Re-centering User Experience<\/h4>\n\n\n\n
College students ask \u201cWhat\u2019s your major?\u201d, not \u201cWhat\u2019s your degree program?\u201d Interest clusters are important to their college search. <\/p>\n\n\n\n
The first logical step was to consolidate the 200+ degree programs into majors.<\/p>\n\n\n\n
\n\nDegrees<\/strong>
Biology, BA
Biology\/Anthropology, BS
Biology\/Mathematics, BS
Biology\u2014 Ecology, Evolution, and Organismal Biology (EEO) Emphasis, BS
Biology\u2014 General Emphasis, BS
Biology\u2014 Marine Emphasis, BS
Biology\u2014 Molecular and Cell Biology Emphasis, BS
Biology\u2014 Secondary Teaching Emphasis, BS
Chemistry\/Biology\u2014 Secondary, BAE<\/p>\n<\/div>\n\n\n\n\n\u2192<\/p>\n<\/div>\n\n\n\n
\nMajor<\/strong>
Biology<\/p>\n<\/div>\n<\/div>\n\n\n\nThe second was to assign an interest category tag to each major. A single majors can be tagged with multiple categories.<\/p>\n\n\n\n
\n\nAll Interest<\/strong> Categories<\/strong>
Advocacy and Social Justice
Business
Culture and Language
Design
Education
Engineering
Environment
Health
Humanities
Interdisciplinary
Math
Media and Communication
Science
STEM
Technology<\/p>\n<\/div>\n\n\n\n\nExample of Majors in an Interest Category<\/strong>
Advocacy and Social Justice<\/strong>
American Cultural Studies
Sociology
Urban Planning
Urban Sustainability
Women, Gender, and Sexuality Studies<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\nSolution: Standardizing Content in Drupal<\/h4>\n\n\n\n
Easier to create templates for. Easier for copywriters to manage content.<\/p>\n\n\n\n
- I identified what content was shared by each major:<\/strong> degree programs, advisors, academic departments, etc.<\/li>
- I created a new content type in Drupal<\/strong> with fields that fit the type of data to be stored, and multiple taxonomies for reusable data like contact info for advisers.<\/li>
- This made content easier to manage:<\/strong> changes could be made in one place and updated in many, filter-based dynamic content, etc.<\/li><\/ol>\n\n\n\n
\n<\/figure>\n<\/figure>\n<\/div>\n\n\n\n<\/div>\n\n\n\nDesign Survey<\/h3>\n\n\n\n
The university had neither the budget nor the time to do any user research. Therefore, I conducted a design survey of both university academic program and education-related private sector websites to identify familiar UX patterns for our users and assist with stakeholder buy-in.<\/p>\n\n\n\n
Included in Survey<\/strong><\/summary>\nUniversities (Competition)<\/strong><\/p>\n\n\n\n- University of Washington<\/li>
- Washington State University<\/li>
- Central Washington University<\/li>
- University of Colorado – Boulder<\/li><\/ul>\n\n\n\n
Universities (Aspirational)<\/strong><\/p>\n\n\n\n- Stanford: Undergrad Majors<\/li>
- Brown: Undergraduate Concentrations<\/li>
- Harvard: Programs<\/li>
- SCAD: Academic Programs<\/li><\/ul>\n\n\n\n
Private Sector<\/strong><\/p>\n\n\n\n- Skillshare<\/li>
- Code Academy: Catalog<\/li>
- General Assembly<\/li>
- Udemy<\/li><\/ul>\n<\/div><\/details><\/div>\n\n\n\n\n
Process<\/h4>\n\n\n\n- Gathering screenshots into FigJam and jotting down immediate thoughts<\/li>
- 2 quick workshops: immediate team and university-wide marketing
- Discuss what was\/wasn\u2019t working<\/li>
- Identify specific components and patterns that would support our goals and resonate with our audience<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n\n
Outcomes<\/h4>\n\n\n\n\n\n\n<\/figure>\n\n\n\nHad a good feel for the different kinds of interaction animations and patterns to explore during the design phase.<\/p>\n<\/div>\n\n<\/div>\n\n
\n\n\n<\/figure>\n\n\n\nDecreased the amount of time it would have taken to design and prototype more than 2 different options by being able to focus on specific UI patterns.<\/p>\n<\/div>\n\n<\/div>\n\n
\n\n\n<\/figure>\n\n\n\nCould point to specific examples from other institutions\/companies when questioned by administration-level stakeholders.<\/p>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/div>\n\n\n\n
<\/div>\n\n\n\nWireframe and Prototype<\/h3>\n\n\n\n\nProcess<\/h4>\n\n\n\n
Throughout this process I kept our front-end developer in the loop so she could let me know if something would be too difficult to implement before the deadline. Our accessibility developer was also included in the design review process. This ensured that we wouldn’t waste time on anything that wasn’t accessible. <\/p>\n\n\n\n
- Draft 2\u20133 low fidelity wireframes<\/li>
- Review with stakeholders<\/li>
- Create a high fidelity mock-up and prototype any interaction animations<\/li>
- Review with stakeholders<\/li>
- Share final design to front-end developer<\/li><\/ol>\n\n\n\n
Challenges<\/strong><\/summary>\n- History of poor communication between University Marketing (UM) and my team.<\/li>
- Key team positions in the management structure were vacant.<\/li>
- Despite being the Project Lead, the perceived hierarchy of my position made it difficult to maintain a clear and open line of communication with UM leadership.<\/li>
- UM leadership wasted time making their SEO content designer flesh out specifics for a different page structure without looping me in.<\/li>
- I had to create an additional high fidelity mock-up at the last minute to please leadership. They ultimately did not pick this design.<\/li>
- This ended up delaying our launch date by a week.<\/li><\/ul>\n<\/div><\/details><\/div>\n\n\n\n
Option 1: Individual major cards<\/h4>\n\n\n\nFor all 70 majors. 4 column and 6 column were also tried, but 5 worked best for our content. Using the actual major names was critical as some, like “Communication Sciences and Disorders”, needed to wrap 2\u20133 lines.<\/figcaption><\/figure>\n\n\n\nOption 1 cards (large-screens): animation on hover<\/figcaption><\/figure>\n\n\n\n<\/figure>\nOption 1 cards (small-screens): No hover state for mobile means adjusting elements. Strict character limits on the synopsis ensure that the card functions correctly at all screen-sizes.<\/p>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\nOption 2: Interest\/program sections<\/h4>\n\n\n\n<\/figure>\nOption 2 layout:<\/strong> Single column, large cards for each Interest (12 total). Was initially preferred by some internal stakeholders for the SEO possibilities (Carnegie Dartlet<\/a>, who was consulting for our search campaigns, was strongly advocating for more text on the homepage).<\/p>\n<\/div><\/div>\n\n\n\n<\/figure>\nOption 2 cards: Example of how they would stack on mobile<\/p>\n<\/div><\/div>\n\n\n\n
Results<\/h3>\n\n\n\n- Increased traffic the Majors site homepage by 32%.<\/li>
- Page Views increased for almost every major page YOY Q1<\/li>
- Moved up in Google Search Rankings<\/li>
- Greatly improved content ops for this site<\/li><\/ul>\n<\/div>\n\n\n\n\n
\n<\/div>\n\n\n\n\nCompany Overview<\/h2>\n\n\n\nWestern Washington University<\/h3>\n\n\n\n
Western Washington University is a mid-size, public university in Bellingham, WA. Total enrollment is around 16,000 students.<\/p>\n\n\n\n
The Office of Admissions oversees the Majors Site, one of the highest traffic sites used for undergraduate recruitment. Prospective students use it to browse the majors and programs offered by the university.<\/p>\n\n\n\n
Availability of major is one of the most important factors in the college search process.<\/strong> Therefore, it\u2019s crucial to make this part of the customer journey as easy as possible.<\/p>\n\n\n\nThe Majors Site was launched in 2016, and I\u2019ve been responsible for designing and implementing the bulk of the changes to it since 2019.<\/p>\n<\/div>\n\n\n\n
\n
\n<\/div>\n\n\n\nProject History<\/h2>\n\n\n\nMajors Homepage 2016<\/h3>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n\nWhat wasn’t working<\/h4>\n\n\n\n- 200+ items in an alphabetical list with no way of filtering or sorting<\/li>
- Non-tabular information displayed in a table<\/li>
- Only wide-screen compatible, not responsive for mobile-sized screens<\/li><\/ul>\n\n\n\n<\/div>\n<\/div>\n\n\n\n
Majors Homepage 2018<\/h3>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n\n\n\nWhat was working<\/h4>\n\n\n\n- Keyboard search gives a way to filter the 200+ item list<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n- Lime green on blue isn\u2019t a minimum 1:3 contrast for larger text and doesn\u2019t meet web accessibility standards<\/li>
- Keyword search is pulling from just degree titles, so keyword search isn\u2019t reliable<\/li>
- Long degree titles taking up multiple lines \u201cBiology\u2014Ecology, Evolution, and Organismal Biology (EEO) Emphasis, BS\u201d<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<\/div>\n\n\n\n
Majors Homepage 2021<\/h3>\n\n\n\n\nRight before this project started<\/figcaption><\/figure>\n<\/figure>\n\n\n\n\n\n\nWhat was working<\/h4>\n\n\n\n- This splash header displayed a random major on page load. This is one of the features I kept.<\/li>
- The list is much shorter (about 100 majors) due to consolidation from ongoing information architecture project.<\/li>
- Majors names are much shorter.<\/li>
- The list is able to be filtered by keyword or starting letter.<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n- Header block is taking up too much vertical height for the value of information it\u2019s delivering.<\/li>
- Despite consolidation, the page is still much too long and isn\u2019t compelling content.<\/li>
- There is still no dedicated field for keywords and search results rely on the contents of the body field that describes the field of study.<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\n
\n<\/div>\n\n\n\nProcess Timeline<\/h2>\n\n\n\n
I was the project lead and UX\/UI Designer on this 12-week project from design to post-launch with a core remote team of 4: my web content assistant, a front-end developer, an SEO editor, and a copywriter.<\/p>\n\n\n\n
\nWeeks 1\u20132: Migration of site content and information architecture redesign<\/p>\n\n\n\n
Week 2: Design survey of the competition<\/p>\n\n\n\n
Weeks 3\u20136: Wireframe, prototype, and review<\/p>\n\n\n\n
Weeks 7\u20138: Coding components and building Drupal structures<\/p>\n\n\n\n
Week 9: Launch<\/p>\n\n\n\n
Weeks 9\u201310: Added search function<\/p>\n\n\n\n
Weeks 10\u201311: On-boarding and outreach<\/p>\n<\/div>\n\n\n\n
\n
\n<\/div>\n\n\n\nProcess Details<\/h2>\n\n\n\nContent Strategy & Information Architecture<\/h3>\n\n\n\n
This was the end of a years long process of redesigning the information architecture for this content, writing new content, and wrangling a bunch of fields and metadata. Originally each of the 200+ degree programs had their own page.<\/p>\n\n\n\n
\nProblems<\/h4>\n\n\n\n- hard to scan-read homepage<\/li>
- hard to search homepage<\/li>
- redundant content on degrees pages from poor content strategy and lack of resources<\/li>
- poor Google search rankings<\/li><\/ul>\n<\/div>\n\n\n\n\n
Solution: Re-centering User Experience<\/h4>\n\n\n\n
College students ask \u201cWhat\u2019s your major?\u201d, not \u201cWhat\u2019s your degree program?\u201d Interest clusters are important to their college search. <\/p>\n\n\n\n
The first logical step was to consolidate the 200+ degree programs into majors.<\/p>\n\n\n\n
\n\nDegrees<\/strong>
Biology, BA
Biology\/Anthropology, BS
Biology\/Mathematics, BS
Biology\u2014 Ecology, Evolution, and Organismal Biology (EEO) Emphasis, BS
Biology\u2014 General Emphasis, BS
Biology\u2014 Marine Emphasis, BS
Biology\u2014 Molecular and Cell Biology Emphasis, BS
Biology\u2014 Secondary Teaching Emphasis, BS
Chemistry\/Biology\u2014 Secondary, BAE<\/p>\n<\/div>\n\n\n\n\n\u2192<\/p>\n<\/div>\n\n\n\n
\nMajor<\/strong>
Biology<\/p>\n<\/div>\n<\/div>\n\n\n\nThe second was to assign an interest category tag to each major. A single majors can be tagged with multiple categories.<\/p>\n\n\n\n
\n\nAll Interest<\/strong> Categories<\/strong>
Advocacy and Social Justice
Business
Culture and Language
Design
Education
Engineering
Environment
Health
Humanities
Interdisciplinary
Math
Media and Communication
Science
STEM
Technology<\/p>\n<\/div>\n\n\n\n\nExample of Majors in an Interest Category<\/strong>
Advocacy and Social Justice<\/strong>
American Cultural Studies
Sociology
Urban Planning
Urban Sustainability
Women, Gender, and Sexuality Studies<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\nSolution: Standardizing Content in Drupal<\/h4>\n\n\n\n
Easier to create templates for. Easier for copywriters to manage content.<\/p>\n\n\n\n
- I identified what content was shared by each major:<\/strong> degree programs, advisors, academic departments, etc.<\/li>
- I created a new content type in Drupal<\/strong> with fields that fit the type of data to be stored, and multiple taxonomies for reusable data like contact info for advisers.<\/li>
- This made content easier to manage:<\/strong> changes could be made in one place and updated in many, filter-based dynamic content, etc.<\/li><\/ol>\n\n\n\n
\n<\/figure>\n<\/figure>\n<\/div>\n\n\n\n<\/div>\n\n\n\nDesign Survey<\/h3>\n\n\n\n
The university had neither the budget nor the time to do any user research. Therefore, I conducted a design survey of both university academic program and education-related private sector websites to identify familiar UX patterns for our users and assist with stakeholder buy-in.<\/p>\n\n\n\n
Included in Survey<\/strong><\/summary>\nUniversities (Competition)<\/strong><\/p>\n\n\n\n- University of Washington<\/li>
- Washington State University<\/li>
- Central Washington University<\/li>
- University of Colorado – Boulder<\/li><\/ul>\n\n\n\n
Universities (Aspirational)<\/strong><\/p>\n\n\n\n- Stanford: Undergrad Majors<\/li>
- Brown: Undergraduate Concentrations<\/li>
- Harvard: Programs<\/li>
- SCAD: Academic Programs<\/li><\/ul>\n\n\n\n
Private Sector<\/strong><\/p>\n\n\n\n- Skillshare<\/li>
- Code Academy: Catalog<\/li>
- General Assembly<\/li>
- Udemy<\/li><\/ul>\n<\/div><\/details><\/div>\n\n\n\n\n
Process<\/h4>\n\n\n\n- Gathering screenshots into FigJam and jotting down immediate thoughts<\/li>
- 2 quick workshops: immediate team and university-wide marketing
- Discuss what was\/wasn\u2019t working<\/li>
- Identify specific components and patterns that would support our goals and resonate with our audience<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n\n
Outcomes<\/h4>\n\n\n\n\n\n\n<\/figure>\n\n\n\nHad a good feel for the different kinds of interaction animations and patterns to explore during the design phase.<\/p>\n<\/div>\n\n<\/div>\n\n
\n\n\n<\/figure>\n\n\n\nDecreased the amount of time it would have taken to design and prototype more than 2 different options by being able to focus on specific UI patterns.<\/p>\n<\/div>\n\n<\/div>\n\n
\n\n\n<\/figure>\n\n\n\nCould point to specific examples from other institutions\/companies when questioned by administration-level stakeholders.<\/p>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/div>\n\n\n\n
<\/div>\n\n\n\nWireframe and Prototype<\/h3>\n\n\n\n\nProcess<\/h4>\n\n\n\n
Throughout this process I kept our front-end developer in the loop so she could let me know if something would be too difficult to implement before the deadline. Our accessibility developer was also included in the design review process. This ensured that we wouldn’t waste time on anything that wasn’t accessible. <\/p>\n\n\n\n
- Draft 2\u20133 low fidelity wireframes<\/li>
- Review with stakeholders<\/li>
- Create a high fidelity mock-up and prototype any interaction animations<\/li>
- Review with stakeholders<\/li>
- Share final design to front-end developer<\/li><\/ol>\n\n\n\n
Challenges<\/strong><\/summary>\n- History of poor communication between University Marketing (UM) and my team.<\/li>
- Key team positions in the management structure were vacant.<\/li>
- Despite being the Project Lead, the perceived hierarchy of my position made it difficult to maintain a clear and open line of communication with UM leadership.<\/li>
- UM leadership wasted time making their SEO content designer flesh out specifics for a different page structure without looping me in.<\/li>
- I had to create an additional high fidelity mock-up at the last minute to please leadership. They ultimately did not pick this design.<\/li>
- This ended up delaying our launch date by a week.<\/li><\/ul>\n<\/div><\/details><\/div>\n\n\n\n
Option 1: Individual major cards<\/h4>\n\n\n\nFor all 70 majors. 4 column and 6 column were also tried, but 5 worked best for our content. Using the actual major names was critical as some, like “Communication Sciences and Disorders”, needed to wrap 2\u20133 lines.<\/figcaption><\/figure>\n\n\n\nOption 1 cards (large-screens): animation on hover<\/figcaption><\/figure>\n\n\n\n<\/figure>\nOption 1 cards (small-screens): No hover state for mobile means adjusting elements. Strict character limits on the synopsis ensure that the card functions correctly at all screen-sizes.<\/p>\n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\nOption 2: Interest\/program sections<\/h4>\n\n\n\n<\/figure>\nOption 2 layout:<\/strong> Single column, large cards for each Interest (12 total). Was initially preferred by some internal stakeholders for the SEO possibilities (Carnegie Dartlet<\/a>, who was consulting for our search campaigns, was strongly advocating for more text on the homepage).<\/p>\n<\/div><\/div>\n\n\n\n<\/figure>\nOption 2 cards: Example of how they would stack on mobile<\/p>\n<\/div><\/div>\n\n\n\n
\n<\/div>\n\n\n\n
Company Overview<\/h2>\n\n\n\nWestern Washington University<\/h3>\n\n\n\n
Western Washington University is a mid-size, public university in Bellingham, WA. Total enrollment is around 16,000 students.<\/p>\n\n\n\n
The Office of Admissions oversees the Majors Site, one of the highest traffic sites used for undergraduate recruitment. Prospective students use it to browse the majors and programs offered by the university.<\/p>\n\n\n\n
Availability of major is one of the most important factors in the college search process.<\/strong> Therefore, it\u2019s crucial to make this part of the customer journey as easy as possible.<\/p>\n\n\n\n The Majors Site was launched in 2016, and I\u2019ve been responsible for designing and implementing the bulk of the changes to it since 2019.<\/p>\n<\/div>\n\n\n\n I was the project lead and UX\/UI Designer on this 12-week project from design to post-launch with a core remote team of 4: my web content assistant, a front-end developer, an SEO editor, and a copywriter.<\/p>\n\n\n\n Weeks 1\u20132: Migration of site content and information architecture redesign<\/p>\n\n\n\n Week 2: Design survey of the competition<\/p>\n\n\n\n Weeks 3\u20136: Wireframe, prototype, and review<\/p>\n\n\n\n Weeks 7\u20138: Coding components and building Drupal structures<\/p>\n\n\n\n Week 9: Launch<\/p>\n\n\n\n Weeks 9\u201310: Added search function<\/p>\n\n\n\n Weeks 10\u201311: On-boarding and outreach<\/p>\n<\/div>\n\n\n\n This was the end of a years long process of redesigning the information architecture for this content, writing new content, and wrangling a bunch of fields and metadata. Originally each of the 200+ degree programs had their own page.<\/p>\n\n\n\n College students ask \u201cWhat\u2019s your major?\u201d, not \u201cWhat\u2019s your degree program?\u201d Interest clusters are important to their college search. <\/p>\n\n\n\n The first logical step was to consolidate the 200+ degree programs into majors.<\/p>\n\n\n\n Degrees<\/strong> \u2192<\/p>\n<\/div>\n\n\n\n Major<\/strong> The second was to assign an interest category tag to each major. A single majors can be tagged with multiple categories.<\/p>\n\n\n\n All Interest<\/strong> Categories<\/strong> Example of Majors in an Interest Category<\/strong> Easier to create templates for. Easier for copywriters to manage content.<\/p>\n\n\n\n The university had neither the budget nor the time to do any user research. Therefore, I conducted a design survey of both university academic program and education-related private sector websites to identify familiar UX patterns for our users and assist with stakeholder buy-in.<\/p>\n\n\n\n Universities (Competition)<\/strong><\/p>\n\n\n\n Universities (Aspirational)<\/strong><\/p>\n\n\n\n Private Sector<\/strong><\/p>\n\n\n\n Had a good feel for the different kinds of interaction animations and patterns to explore during the design phase.<\/p>\n<\/div>\n\n<\/div>\n\n Decreased the amount of time it would have taken to design and prototype more than 2 different options by being able to focus on specific UI patterns.<\/p>\n<\/div>\n\n<\/div>\n\n Could point to specific examples from other institutions\/companies when questioned by administration-level stakeholders.<\/p>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/div>\n\n\n\n Throughout this process I kept our front-end developer in the loop so she could let me know if something would be too difficult to implement before the deadline. Our accessibility developer was also included in the design review process. This ensured that we wouldn’t waste time on anything that wasn’t accessible. <\/p>\n\n\n\n Option 1 cards (small-screens): No hover state for mobile means adjusting elements. Strict character limits on the synopsis ensure that the card functions correctly at all screen-sizes.<\/p>\n<\/div><\/div>\n\n\n\n Option 2 layout:<\/strong> Single column, large cards for each Interest (12 total). Was initially preferred by some internal stakeholders for the SEO possibilities (Carnegie Dartlet<\/a>, who was consulting for our search campaigns, was strongly advocating for more text on the homepage).<\/p>\n<\/div><\/div>\n\n\n\n Option 2 cards: Example of how they would stack on mobile<\/p>\n<\/div><\/div>\n\n\n\n
\n<\/div>\n\n\n\nProject History<\/h2>\n\n\n\n
Majors Homepage 2016<\/h3>\n\n\n\n
![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-10-05-at-4.41.47-PM-1-1024x552.png\")
<\/figure>\n<\/figure>\n\n\n\nWhat wasn’t working<\/h4>\n\n\n\n
Majors Homepage 2018<\/h3>\n\n\n\n
![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/screencapture-web-archive-org-web-20181023133846-http-www-wwu-edu-majors-2022-08-22-01_40_47-edited-1-1.png\")
<\/figure>\n<\/figure>\n\n\n\nWhat was working<\/h4>\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n
Majors Homepage 2021<\/h3>\n\n\n\n
![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/screencapture-wwu-edu-majors-2021-10-05-16_43_49-1-1-edited-1-1.png\")
What was working<\/h4>\n\n\n\n
What wasn’t working<\/h4>\n\n\n\n
\n<\/div>\n\n\n\nProcess Timeline<\/h2>\n\n\n\n
\n<\/div>\n\n\n\nProcess Details<\/h2>\n\n\n\n
Content Strategy & Information Architecture<\/h3>\n\n\n\n
Problems<\/h4>\n\n\n\n
Solution: Re-centering User Experience<\/h4>\n\n\n\n
Biology, BA
Biology\/Anthropology, BS
Biology\/Mathematics, BS
Biology\u2014 Ecology, Evolution, and Organismal Biology (EEO) Emphasis, BS
Biology\u2014 General Emphasis, BS
Biology\u2014 Marine Emphasis, BS
Biology\u2014 Molecular and Cell Biology Emphasis, BS
Biology\u2014 Secondary Teaching Emphasis, BS
Chemistry\/Biology\u2014 Secondary, BAE<\/p>\n<\/div>\n\n\n\n
Biology<\/p>\n<\/div>\n<\/div>\n\n\n\n
Advocacy and Social Justice
Business
Culture and Language
Design
Education
Engineering
Environment
Health
Humanities
Interdisciplinary
Math
Media and Communication
Science
STEM
Technology<\/p>\n<\/div>\n\n\n\n
Advocacy and Social Justice<\/strong>
American Cultural Studies
Sociology
Urban Planning
Urban Sustainability
Women, Gender, and Sexuality Studies<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nSolution: Standardizing Content in Drupal<\/h4>\n\n\n\n
![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/Majors-Pages-Degree-Card-Taxonomies-02-1-1024x594.png\")
<\/figure>\n<\/figure>\n<\/div>\n\n\n\nDesign Survey<\/h3>\n\n\n\n
Included in Survey<\/strong><\/summary>
Process<\/h4>\n\n\n\n
Outcomes<\/h4>\n\n\n
![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/icon-animation-2-2.png\"){kind=icon}
<\/figure>\n\n\n\n![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/icon-time-1-1.png\"){kind=icon}
<\/figure>\n\n\n\n![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/icon-hand-pointing-1-1.png\"){kind=icon}
<\/figure>\n\n\n\nWireframe and Prototype<\/h3>\n\n\n\n
Process<\/h4>\n\n\n\n
Challenges<\/strong><\/summary>
Option 1: Individual major cards<\/h4>\n\n\n\n
![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/image-1-5-11-1-879x1024.png\")
![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/Group-37-1-1.png\")
![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/Card-Mobile-1-1.png\")
<\/figure>Option 2: Interest\/program sections<\/h4>\n\n\n\n
![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/image-1-3-1-835x1024.png\")
<\/figure>![\"\"](\"https:\/\/aflinn.com\/wp-content\/uploads\/2022\/09\/Card-_-Interest-mobile-1-617x1024.png\")
<\/figure>