top of page

Stanford Law School Website

Stanford Law School |  February 2013-October 2018

Design: visual, user experience, user interaction

I am part of a small team that oversees the main Stanford Law School website. Some of my responsibilities include improving user experience, developing a content strategy and producing web graphics for the law school. I have worked on countless projects at Stanford addressing the different needs of clients from the law school community. Highlighted below are couple of the  projects I worked on. 

Course Catalog and Course Template

The course catalog is one of the most complicated sections of the law school website.  It curates over 3 years worth of course offerings and it's a place where students look up courses and learn about them, its requirements and current, past and future offerings. We received feedback that the course catalog search was difficult to use and I was tasked to redesign it along with the individual course detail page template to improve the usability. To identify the problem, interviewed users and stakeholders and watched users interact with the site to understand their experience with those pages specifically. The usability issues we gathered from the sessions can be broken up into two main groups: find-ability and missing content.

To fix the find-ability issues, I evaluated the course catalog search and the course detail template and identified areas that needed fixing. I researched common search and filter patterns that are common in more complex sites and other school sites that are overlooked in our original design. Some of the areas to improve were simple ui fixes and others required a bit more coding. I then started to wireframe a new search experience, followed by redesigning a new course detail template to address the ux problems identified. After the changes were implemented, we tested it out with our users and reviewed them with our stakeholders.  

The entire project was broken into different stages. The end result was that we now have a redesigned search page and course template that achieve these goals:

  • users are able to find courses more easily

  • users use the filters to narrow down their search

  • the main content on the individual course details page is brought up and the number of scrolls reduced

  • description for past courses and for future courses are available

  • learning outcomes that are required by the new ABA (American Bar Association) standards are available and specified in each course.

Here are screenshots of the issues we identified with the course catalog search page and a wireframe of the new search and filter design.

Below are screenshots of the redesigned course catalog and course detail template in desktop, tablet and mobile view.

News Template

The news and announcements section of the website is where updates about the law school and faculty's work and research are published. The original template design had some usability issues that needed to be improved so I was tasked with redesigning it.  I started the process by interviewing stakeholders and users, which gave me a better understanding of their experience with the template and also helped identify and prioritize the content that are needed on news and announcement page.

The usability issues in the template were:

  • the main story was set below the first fold, which required users to scroll at least once to locate the story while the top of the page displayed secondary content such as program/center, faculty, and subject that are related to the story.

  • the width of the text box for the main story spans across the horizontal real estate of the screen entirely, which made it harder for readers to focus and follow the long lines of text across the screen.

  • it didn't have a dedicated spot for subheading, which is important for news outlet to provide a short sentence summarizing the article.

  • contact information for the media team was also missing

After talking to users, I researched news layouts from other schools and departments to see how they handled their content on press page. I also examined our site's design patterns to see how I can modify the existing layout to address these usability issues while staying in tune with the site's style. I then started wire framing a new layout for the template. I adopted a two-column (one wide and one skinny) layout for desktops to optimize readability for primary content and to create a visual hierarchy so that secondary content can rest in the sidebar. The redesigned template made the main story much more visible by placing it as the first item underneath the page header (a consistent style on the law school site) and the secondary content was also de-emphasized by moving it to the side column.  The width of the primary  content text box was reduced to around 700px, an optimal size for reading. A style for subheading was also added to the template to make it easier for readers to read the quick one liner. And since stories released on the news and announcement template are products of the media team, their contact information became part of them template in a box below all the secondary content.​

 

Below are screenshots of the redesigned news and announcement template in its responsive state.

bottom of page