In 2015, when we decided that we wanted to build a new website for St. Louis Community College, we knew there would be many challenges to achieving such an enormous task. From our experiences building websites at previous employers, we knew a team of two or three wasn’t going to be enough. We were going to need to hire vendors to help facilitate the process.
When taking on the task of re-designing a website, there are several steps to take in order to develop the best website for users. We’re happy to explain the steps we took, and are currently taking, to give our community a new stlcc.edu.
Why do we need a new website?
- There is a greater need to use the website as a marketing tool, showcasing what STLCC has to offer and differentiating it from other schools.
- STLCC’s competition is rapidly increasing with 30+ public, private and proprietary associate degree-granting institutions in the greater St. Louis metro area.
- Enrollment and student retention has gradually decreased
- The College’s strategic plan seeks to unify STLCC.
- STLCC wants to strengthen its identity within the community by building new partnerships, re-branding and marketing the College.
- To boost the perception of STLCC as a first choice in higher education that is affordable, accessible and guides students to degrees and careers.
- The new site should provide inspiration as well as function for all audiences.
- Improve the user experience
- Improve overall functional
Who are our users?
- Prospective students
- Transfer and credit-seeking
- Career-technical education and training
- Current students
- Alumni, donors, community members
NOTE: The above mentioned are not the only audiences; rather, they are the key audiences for the purpose of the public site.
What do our users want?
Our audiences want to:
- Find out if STLCC is a good fit because location and course and degree options are big factors
- Know what differentiates STLCC and how it compares to other schools
- Know how to pay for school, including financial aid and scholarships
- Learn about university transfer options
- Learn if they’ll be able to secure a job after graduating
- Contact someone and/or get help
- Experience what it’s like to be a student at STLCC
- Find what they need in a way that suits them and is efficient
How do we give our users what they want?
1. Excite and engage.
Provide a distinctive online experience that clearly and effectively expresses the quality education, economic value, and core values of an STLCC education.
- The site will shift to become a marketing tool to help recruit students
- The content approach will focus on more storytelling
- The site will rely on more visual content like video and infographics
2. Improve the user experience.
Create an engagement tool for prospective students, their families, guidance counselors and others who influence the college search, as well as alumni and community leaders.
- Develop audience-based user flows and maintain clean navigation
- Include more user-friendly terminology
- Employ strategic cross-referencing to serve up related content
3. Improve functionality.
The new site will generate excitement and be fully responsive, as well as be a functional resource for internal audiences who need the website to be simple to maintain and update.
- New site will be responsive = mobile- and tablet-friendly
- A new, user-friendly content management system (CMS) will allow for a wider pool of content contributors
What do we need to do before we can start building?
Discovery & Research / Strategic Plan Development
- Best practice research including competitive and aspirational website audits
- Stakeholder interviews, focus groups, and population surveys
Content Management System (CMS) Selection
- Evaluated nine CMS products to select a more intuitive platform
- Selected OU Campus due to superior tools for accessibility compliance tools
Time to start building.
With the scope well-defined, we can start digging into the sitemap. The sitemap provides the foundation for any well-designed website. It helps give designers a clear idea of the website’s information architecture and explains the relationships between the various pages and content elements. Building a site without a sitemap is like building a house without a blueprint. And that rarely turns out well.
The next step is to build the wireframe. Wireframes provide a framework for storing the site’s visual design and content elements and can help identify potential challenges and gaps. Although a wireframe doesn’t contain any final design elements, it does act as a guide for how the site will ultimately look.
Information Architecture Planning
- Based on research and defined core user tasks, developed a sitemap
- Built wireframes for core site templates and evaluated with usability testing
Finally, it’s time to create the visual style for the site. This part of the design process will often be shaped by existing branding elements, color choices, and logos. as stipulated by the client. Images are taking on a more significant role in web design now than ever before. Not only do high-quality images give a website a professional look and feel, but they also communicate a message, are mobile-friendly, and help build trust. Visual content is known to increase clicks, engagement, and revenue. But more than that, people want to see images on a website. Images make a page easier to digest, enhance the message in the text, and help convey vital messages at a glance.
- Established look and feel and an online style sheet
- Finalized template visual design
HTML Coding / CMS Implementation
- Established functional specifications for all site features
- Worked with outside vendors to turn designs into HTML files
- Worked with OU Campus team setup STLCC’s new CMS
Content Development / Asset Creation
- Re-writing all content to fit a new, concise and friendly tone
- Conducting content reviews with subject matter experts
- Capturing new still photography and developing a video library
Content Publishing / Testing
- Formatting and publishing all content within new CMS
- Quality assurance testing for content display and browser and device optimization
Other Key Features of the New Site
To make the re-designed version of stlcc.edu mobile-friendly, the new site is built on a responsive framework.
- Responsive websites adjust content presentation based on a user’s screen size
- The responsive framework relies on one website build that includes screen breakpoints
- Other mobile approaches like dedicated mobile sites or adaptive framework require multiple buildouts
- Using a responsive framework will ensure compatibility with new devices/screen sizes that come to market
The new site will leverage three key navigation menus and an open search field.
- Utility menu provides secondary audiences quick access to appropriate content or to secondary users tasks
- The “I want to..” task-based menu was developed to quickly satisfy top user tasks
- A “hamburger menu” will house navigation of core site sections and content
- The search field will remain open to encourage site searches
Meet STLCC Feature
The “Meet STLCC” feature will reside on the homepage and will provide prospective students a window into the world of being an STLCC student or alumni.
- Each student module will link to areas of study the student is associated with
- Quotes answering “What made your STLCC experience unique?” and “What advice would you give a student considering STLCC?” will be displayed
- A mix of age, ethnicity, gender, and area of study will be covered in this feature
Explore Programs Feature
The Explore Programs feature will allow users to search all credit and accelerated job training programs
- Users can search by keyword or by category
- Credit vs. non-credit options (accelerated job training) will be clearly marked and displayed separately
New Website Photography
To date, more than 95 student portraits and stories have been captured for the new site. Additionally, new campus building photography and video b-roll have been produced.
It’s built. Now what?
Testing and Training
Our new site has undergone extensive testing on multiple web browsers and devices. We are sure to still find small errors that need to be fixed, so we will perform ongoing tests throughout the sites’ lifetime. So far we’ve tested to make sure our new responsive visual design is displaying correctly. Before we launch, we will do extensive testing for broken links and redirects. Fortunately, the new content management system has automatic checks for spelling and grammar, ADA compliance, and clean functioning code.
When everything has been thoroughly tested, and we’re happy with the site, it’s time to launch. There may still be some elements that need fixing. Web design is a fluid and ongoing process that requires constant maintenance.
Analyze, Contribute, and Improve
A key thing to remember about the launch stage is that it’s nowhere near the end of the job. The beauty of the web is that it’s never finished. Once the site goes live, we will continually run user testing on new content and features, monitor analytics, and refine our messaging.