Website Redesign

by Melanie Lindahl

Introduction

The new dean of Texas Law asked our team to redesign our tired, old website which had been in place for eight years. With an incredibly tight deadline, we only had 11 months to complete the entire project.

We knew our web content was siloed in an office-based information architecture. We set out to build a new website for our users and their needs while still achieving the business goals of the law school.

Identifying our User Groups

From the start, the dean asked for the main areas of the website to be geared toward prospective students. Therefore, applicants and admits became our primary users while current students became our secondary group. Faculty and staff were also user groups, but, ultimately, the needs of prospective and current students were the top priority.

Working Groups

In order to be more efficient at gathering requirements and promoting cross-office discussion, we put together several working groups to achieve the following goals:

• Break down existing, siloed, office-based site structure to better organize the information architecture for the user.
• Discover requirements for both users and offices.
• Identify questions about user behavior we needed to answer during our research.

We developed one working group for each of our user groups:

• Prospective students
• Current students
• Faculty
• Employees

One session for a working group didn’t produce a lot of tangible results, which could have been due to the brainstorming activity being too abstract. Regardless, we came out of that session with a path forward.

Post Up exercises

To gather a lot of ideas from different offices at the law school, we decided to do Post Up exercises where our working group members would post sticky notes for each idea, thought, or action their users had/did. We chose an online sticky note application called Miro for creating digital sticky boards, which also had great features like task timers and sharing options.

Before we began the exercise, we asked the members:

• who their audience was and if it had any sub groups,
• time of year their content was generally reviewed by their audience,
• and who their primary audience was.

The exercise

We asked the group to spend a certain amount of time posting cards in each of the five boards we had provided. We had an additional Misc board in case the placement of a card wasn’t certain.

Our boards:

• Things our users feel
• Things our users say
• Things our users do
• Things our users want or need
• Questions we have about our users

When posting a card, members were asked to assign it two tags:

• How many people the card generally applied to, letting our team know how widespread the card was
• Time of year the card generally occurred

Affinity Diagrams

After the post-up activity, we talked about each card. As we went through the board, we found themes among the cards and began creating affinity diagrams within each board.

Post up activity and affinity diagramming exercise

Takeaways

From these working group activities, we developed questions we had about our users. From those questions, we created survey questions.

Initial Surveys

Equipped with questions from the working groups, we created user surveys to gather more research about their needs. We surveyed our applicants, current students, and employees.

Prospective students

In this survey, we asked about:

• why they want to come to law school,
• their ideal law school and aspects about law school that would dissuade them from applying,
• their top tasks and emotions they’ve experienced during the admissions process,
• any difficulties they’ve encountered finding information on our website,
• the portability of our degree,
• a time when they felt like they belonged,
• and if they would like to participate in future research and testing for this project.

Main insights from prospective students

• Anxiety and nervousness were common emotions, followed by excitement.
  • Our site can try to alleviate negative emotions as much as it can.
• Applicants’ ideal law school is collegial and welcoming. We found that applicants worry about a cut-throat approach to law school.
• Similar interests help applicants feel like they belong. Our website can show our affinity groups, student organizations, and stories about student life.
• Employment outcomes had the most impact on our applicants’ decisions to apply to a law school. Therefore, our new website needs to show how a degree from Texas Law can take them anywhere and carries weight with employers.

Survey results from applicants illustrating which actions had the most impact on their decisions to apply to a law school

Current first-year students survey

We also sent the applicant survey to our current 1L students. Overall, the results were mostly the same as the applicants, but we did identify one key area: In-person visits to campus, including Admitted Students Day in the spring, were very important when deciding to commit to Texas Law.

Other survey data

Our admissions office had several surveys they normally send out each year.

• Enrollment Survey: Survey of admits who committed and enrolled at Texas Law
• Withdrawal Survey: Survey of admits who chose to go elsewhere
• Common Acceptance Survey: Survey data of the schools our admits also applied to and chose to attend.

Insights from other survey data

• The cost of law school was the number one concern for attending Texas Law, followed by employment outcomes.
• For those who chose not to attend here, the scholarship amount we offered wasn’t as much as where they ended up attending.
• Campus visits to our campus encouraged admits to attend school here.

Current Students

In this survey, we asked about:

• emotions they’ve felt being a student here,
• their top tasks as a law student and if any tasks could be completed online,
• how they like to receive information,
• how their are prompted to take action on tasks,
• information that was difficult to find or understand on our website,
• their student life,
• and if they would like to participate further in our research and testing.

Main insights from current students

• Typical emotions for current students ranged from anxiety and stress to excitement. It nearly mirrored the emotions of applicants, only slightly more balanced between positive and negative.
• Top tasks for current students included:
  • Work done on Canvas
  • Registration preparation
  • Employment opportunity research
• Students wanted to receive less email, but they were also prompted by emails to take action on important things.
  • A weekly digital newsletter might be a happy compromise to provide students information but not inundate them with one-off emails.
  • An all-inclusive calendar containing not only event information but also deadlines might be helpful as well.

Top task survey for current students

Employees

We asked employees:

• the level of community they wanted here at Texas Law
• and which business processes were confusing or lacking information.

Main insights from employees

• Employees seek community here.
• Accounting and HR processes are complicated, and employees need more instructions and information.

Applicant Interviews

We had quite a few applicants who were willing to participate more in our research. We set up one-on-one interviews with them and discussed:

• their reasons for wanting to go to law school and outcomes they’re hoping for,
• sources of information they used when researching schools,
• challenges and obstacles they’ve encountered,
• and how they interacted with our website so far.

Card sort

To identify the content that applicants needed most, each person we interviewed sorted 15-20 cards.

Card sort activity in which an applicant placed content areas in their order of importance

Afterward, we asked them to sort cards listing potential main menu items.

Card sort activity in which an applicant placed main menu items in their order of importance

Developing Personas

After talking more with our admissions office about our applicants and the times of year applicants and admits generally reviewed our website looking for answers, coupled with our data from surveys and interviews, we developed three personas:

• Applicant: Texas resident
• Admit: Texas resident
• Admit: non-Texas resident

Each persona contained the following areas:

• Basic information
• Goals
• Emotions
• Motivations
• Frustrations
• A personal statement
• Content and messaging that would encourage them to apply or commit to Texas Law

We used these personas during our identification of user goals, creation of journey maps, solutions ideation, structuring of content, and main menu decisions.

Composing Journey Maps

Knowing a lot about our applicants and admits, we took our personas, the actions they took, the emotions they experienced, and developed journey maps for each persona.

We used quotes from our enrollment and withdrawal surveys and placed them with the relevant actions in the journey maps to convey real thoughts our personas would have during their journeys throughout their admissions processes.

Even More Research

We kept finding more things to research!

• Google Analytics data to identify extremely low-trafficked pages that could be removed
• Scroll depth data and analysis to see how far down our users typically scroll on longer pages
• Search terms and keywords to help identify our messaging standards
• Peer reviews to determine what competing law schools were doing
• Higher education white papers to learn of any interesting areas to explore
• A content owner survey asking how our website could help them

Brainstorming Sessions

To turn our research into ideas for the new website, we began a series of internal discussions to understand how we could represent ideas on the site. Topics included:

Identifying ways to show the career outcomes of Texas Law

Circling Back to Working Groups

Once we had a lot of research and knowledge about our users and what our website needed to do for them, we met with our Prospective Student and Current Student working groups again to brainstorm ways to meet the goals of our users and law school.

Using Miro again, we did another post up activity. This time, we had identified areas to form ideas around.

Exercises to help expand on and group content ideas for our main user groups

User Stories and Storyboarding

After identifying a few scenarios to explore, we created user stories through storyboarding to help us understand current problems with our content and how we can improve it for our user tasks.

Working through a task, we discovered a lot of confusing information on our website.

User storyboard to help us work through a current student task

Transitioning to the Information Architecture Phase

From the brainstorming activities and discussions with our working groups, we were ready to begin outlining our main pages of the website. With prospective students as our primary user group and current students as our secondary, we needed to figure out how the necessary content could be grouped and separated.

Prospective students

Current students

Paths regardless of entry point

Also, how would these pages connect to each other? We know from our analytics that search was our primary entry point, so we couldn’t develop a linear user path from any one page. We had to ensure any page they entered on would provide them opportunities to dive into other content.

Diagramming exercise to determine the interconnectivity of page content

Overlapping content

How would the content between prospective and current students overlap? How to link to content effectively from a prospective student page to a current student page so we don’t create redundant and duplicative content?

Diagramming exercise to discover shared content

Emerging site structure

After a lot of diagraming, discussions and page outlines, we began to see the information architecture come to life, even if it was in its infancy and not fully formed or even correct yet.

Beginning stages of the new information architecture

Main Menu

Always a hard task, we tackled the main menu items, design, and testing.

Deciding on main menu items

Knowing we needed menu items for prospective students, current students, and faculty information, we needed to know what else had to be on the main menu. Knowing these types of menus can become bloated, we took a thoughtful approach to ensure users could get to all the areas of the website with ease. However, this didn’t mean everything should be on the main menu. Having natural pathways was needed.

Necessary main menu items

• Admissions/Prospective Students
• Current Students
• Our Faculty
• About Us
• Later, we added Alumni as a main menu item, which gave alumni a pathway to their content but also showed our commitment to them.

Naming issues

The naming of the Admissions/Prospective Students menu item needed further thought. Admissions is the most common word used in higher ed, but what if you were already admitted? We had additional content just for admitted students to help with their decision to commit to Texas Law. Also, the phrase “prospective student” doesn’t always register with applicants and admits. We wondered if “future students” would resonate more.

Therefore, we did A/B testing … more on that below.

We then took our research and top tasks from our users and developed the links inside the dropdown menus for each top-level menu item.

Design

After doing more peer reviews and usability research, we decided to open the dropdown menu for each main menu item on hover and click to close it. However, once we built the prototype, it was jarring to have a mega menu dropdown open accidentally and then have to take an action to close it.

Therefore, we decided to display a dropdown arrow on hover that required you to click to open the dropdown. To close the dropdown, you could click anywhere outside of the main menu or the active main menu item itself.

Main menu functions on desktop

Testing the main menu

During our Admitted Students Day event, we found admitted students who were waiting for a tour to begin. With a fully-functioning prototype, we asked them to do five tasks.

Admissions vs Future Students

• Future Students was preferred. Admits said it felt more wholistic about applying and coming to school here.
• Admissions felt more like just the application process.

We implemented Future Students.

Testing with Current Students

We also testing the main menu with current students to ensure it provided pathways for their tasks.

• For tasks that were directly linked from the main menu dropdown, like going to the course schedule, the main menu was incredibly easy for them to use.
• Some students couldn’t find their way to their student dashboard or Canvas. These links were actually in the top right corner where a Profile area was placed. From these testing results, we decided to put links to the Dashboard and Canvas directly on the Current Students dropdown.

Testing showed two main links for current students needed to be in multiple places.

Secondary Menus

Secondary menus are tricky. Do you put them on one side of the screen and sacrifice your full-screen design capabilities? Do you put it at the top, like some of our peers, where your available space becomes confined, thus pushing down content or forcing you to hide the menu behind an accordion?

The design

We researched the UX of various aspects of displaying and using menus, such as where to locate a secondary menu, borders, accordion-style menus, the placement on smaller screens, and even more peer reviews.

Ultimately, we decided to:

• place it on the left side of the screen to reduce right-rail blindness,
• contain it inside a dropdown panel on smaller screens,
• allow menu items to be nested one-level deep,
• and provide ways to add different kinds of content to a sidebar menu, such as sub headings.

On mobile, we also added the word Menu after the menu title to help users better identify the secondary menu.

Homepage Content

Experiencing a lot of scrolling on peer homepages, and now knowing our scroll depth stats, we decided to keep our new homepage focused and to the point. After all, we want prospective students completing tasks and getting to great content rather than scrolling for a while.

Content for our homepage

• Hero image with a call-to-action and tagline
• Prospective student content directly below the hero space
• Featured news and stories marketed toward prospective students
• Faculty spotlight feature with some sort of interactive component

Feedback Framework

Before most meetings with our dean (top client), we provided any topic areas and designs beforehand along with a set of questions to keep the focus on the site requirements and needs rather than any visceral reactions to the design.

User Testing

Our original expectations for iterative testing throughout the design phase were completely pushed out of the timeline due to issues beyond our control. Therefore, we decided to finish building the site in order to test it a month before our launch. This provided us with just barely enough time to fix any issues that arose during testing.

This is why you do UX from the start

There were minimal issues found during testing.

Actually, testing went remarkably well. Admits could find the information they needed while current students could complete their common tasks. We found some content-based issues, but really, only one issue arose.

The one real issue that came up

When trying to balance a beautiful full-width webpage while having a sidebar menu to guide users to sectional content, we created a floating menu that was collapsed but still usable.

The floating menu was actually pretty challenging to design well. We didn’t get it right, and user testing let us know.

Originally, we decided to place it above the page title so the menu didn’t come across as a page menu. We also tried different designs but many were too noticeable and distracted you from the page title and content.

Most users were missing the floating menu entirely during testing because of the placement and the subtle design.

A/B testing the floating secondary menu (before and after two fixes)

While our changes solved the problem of finding the menu, we learned that nothing beat the good old visible sidebar menu (the default sidebar menu). We are now looking into a new way of having a visible sidebar menu with some full-width elements on the page.