SANS Institute Landing Page Redesign

UX Case Study

Justine Marie Benoit
UsabilityGeek
3 min readMay 11, 2020

--

Screenshot of the current landing page of SANS.org
Current landing page or SANS.org

SANS Institute is a highly reputable source for information security training worldwide. Millions of professionals and students in the information security field refer to SANS Institute to get information on training, certifications, continuing education, as well as have access to some free resources. As an exercise, I have decided to redesign the landing page of SANS.org.

The purpose of a landing page is to convert people into using your product or service. In the case of SANS.org, its purpose is to lead people in the information security community to use their courses, certifications, and other resources as their primary hub for learning and achieving professional growth

SANS Institute has a lot to offer people in the information security community, but their landing page has too much going on. It displays an overwhelming amount of information and, because there is no clear Call-to-Action, users would not know where to begin their journey.

My goal is to design a clear, concise, and intuitive landing page for an improved user experience, as well as to create a cleaner, more engaging, and responsive user interface.

I began by investigating and assessing the current page’s content, and proceeded with categorizing them according to their main objectives:

  • Header (Navigation)
  • Call-to-Action (Sign-up form)
  • Courses
  • Certifications
  • Events
  • Affiliated Sites
  • Footer (Contact & Social Media)

I then developed a base layout for the new page:

Base layout of the new landing page
Base page layout

Once I had a general map of the page’s content, I then developed the wireframe of the new landing page:

Wireframe
Wireframe

For inspiration, I conducted an image search on “cyber security” and created a mood board:

Mood board
Moodboard

With SANS Institute’s signature blue color from their logo and the above mood board, I was able to create a simple yet compelling user interface:

High-fidelity user interface design
High-fidelity user interface design

We live in a mobile world, so it was also important that I designed a responsive interface. Below is the final design, including an interface on tablet and phone:

Responsive user interface design
Responsive user interface design

The next step is for me to build a prototype using React. (Stay tuned!)

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

Thank you for checking out my case study for SANS Institute’s landing page redesign. Have a great day!

--

--

Justine Marie Benoit
UsabilityGeek

UI/UX Developer from Virginia, USA. Her mission is to improve the lives of others by creating compelling experiences through digital products.