College Enrollment

Responsive web design

A non-profit organization sought a brand new website aimed at simplifying and improving the college application experience for aspiring and returning students.

Background

The College Enrollment website contained an overwhelming amount of information across numerous categories which made it not only difficult to navigate but also unwieldy to maintain. Rather than attempt to reorganize their content, they opted for a complete overhaul.

The Problem

The organization was finding itself spending an increasing amount of time working 1-on-1 with students who were unable to find information and/or answers relevant to them on the website.

Design Opportunity

A new, leaner website that in addition to informing also encouraged online and in-person engagement.

The Process

Stakeholder Interview

The project lead and I met with the College Enrollment outreach director to better understand the needs of the organization and its prospective students. She walked us through their different offerings and explained that they relied on multiple third-party services to assist potential students.

 Key takeaways:

  • A need existed for more closely integrating third-party services 
  • Site users were from a broad range of backgrounds: high school students, returning military, GED graduates, etc.
  • Workers at the organization were frequently finding themselves answering the same questions on phone calls
User Personas

Based on our conversations, we learned that while College Enrollment served a variety of prospective students, their needs had a lot overlap. With that information in mind, I created a primary persona that resembled the majority users to the site and a secondary persona that represented a smaller portion of the audience but included important distinctions.

Site Map

Our next course of action was to audit the content that had existed on the previous website. Sections for Programs and Membership had been broken up into several sub-pages that often repeated information. The biggest thing we were able to do to increase clarity on the website was to collapse these sections into one. Programs would now include more information on not just what the programs were, but also who they were intended for. The Membership page was reimagined to strictly provide guidance on the registration process.

Other significant changes included:

  • addition of a FAQ page to make answers available to the most commonly asked questions
  • addition of a Blog to feature original content — including practical advice on several areas of student life, and highlighting how to best take advantage of campus life
  • revamped Events page to allow users to filter and display only the events relevant to them
Wireframes
High-fidelity mocks

I began creating a visual style that prioritized accessibility. Special attention was paid to color contrast ratios, typographic scale, and clear and easy-to-locate buttons. The visual style was applied to desktop mockups and prototyped for testing. Five users were tasked with the following:

  • find answer to specific question regarding College Enrollment programs
  • conducting a search for online events
  • read an article on studying tips for students

The users were successfully able to complete all tasks under the time allotted. The same visual style was then implemented across mobile.

Interview icons made by www.flaticon.com

My Role

  • UX/UI Design, Prototyping, Stakeholder interviews, Logo design

Team

  • Lina Trifon, Project Lead

Duration

  • 2 months

Tools

  • Sketch
  • Invision
  • Google Docs