Website Content Redesign Project

Strategic Marketing and Communications and Enrollment Management are heading the website content redesign process. After considering several companies, the University decided to hire OHO Interactive, a fully-distributed digital agency specializing in higher education. They have 65+ team members in 20+ states nationwide and offer full in-house strategy, design, development and project management. OHO specializes in working with universities. 

There will be an entire website redesign which will include content, design and functionality improvements in order to better serve potential and current students. 

The sfsu.edu website is SF State’s most visible public brand asset and should center the prospective student user journey first and foremost: providing necessary information, illustrating the student experience, and making the process from exploration to application and enrollment seamless. It should make audience pathways for secondary and tertiary users clear, disentangling internally and externally focused content. 

The website redesign project is scoped to take place over three years. We are currently in the second year of the project and expect to launch the new website in the fall/winter of 2025. 

• Roles & Responsibilities 
• Project Goals & Defining Success  
• Scope Review  
• Budget & Approvals  
• Risks  
• Next Steps & Timeline 

This is the proposed structure which is more organized, moving content for specific audiences to their respective sites (flagship, alumni and giving sites).

The Strategy Roadmap occurs during this phase. What is a strategy roadmap? The strategy roadmap is the guiding vision and plan for the project. It summarizes and synthesizes the information gathered from our discovery activities, offers analysis and context, and illustrates how we should shape this project to reach our goals and objectives. This is informed by: 

• Goals and priorities identified in the kickoff meeting 
• Needs uncovered in our stakeholder interviews (and user research, if applicable) 
• Gaps and opportunities identified during our audits  
• General best practices for our industry  

OHO held several discovery sessions with different groups.  What is a discovery session? OHO asking detailed questions to key groups to get a better idea of how our sites currently work, how they function and what aspects are missing. Another word for discovery would be research.

• Who participated in these discovery sessions? 
  • Web Steering Committee 
  • Current undergraduate students 
  • Current graduate students 
  • Marketing & Communications 
  • IT/Academic Technology 
  • Admissions & Financial Aid 
  • Student Life/Student Services 
  • Career/Leadership Development 
  • Alumni & Development 
  • Senior University Leadership 
  • HSI/MSI Stakeholders 
  • Faculty 
  • Deans 
     
• What did the discovery sessions uncover? 
  • The primary audience and function of SF State’s website is to meet the needs of prospective students. Orienting the site around these users (and secondarily, their influencers, such as parents and counselors) is critical in meeting SF State’s enrollment goals
  • The site also serves to direct a secondary audience of current students to key information for their needs
  • Audience and utility navigation also directs tertiary audiences such as faculty & staff, alumni and others to relevant content, including content housed on an Intranet 

This is our current structure for our websites.

What is a sitemap? The sitemap is a diagram that represents how a website’s pages are organized (main navigation and submenus). It communicates where information lives as a function of prioritizing user and business goals. The sitemap will define which templates/wireframes will make up the new site. The sitemap should also be intuitive to outside users. This often means refocusing the site away from being organized by an organization’s institutional structure and internally-focused nomenclature. 

The OHO user experience (UX) designer on our project combined sources of information to create the sitemap to include: 

• Project Goals: project goals came from the Strategy Roadmap as well as specific goals our team set out at the beginning of the project
• User Needs: user needs came from research previously conducted, discovery activities OHO engaged in, and OHO's deep knowledge of user needs. Research included user surveys, interviews and focus groups. Discovery activities included content/UX/competitor audits and stakeholder interviews
• Information Architecture Best Practices: OHO adjusted the site structure for a more intuitive experience for our users. This included changes in page titles, reduction and reorganization of pages, and differences in the ways pages are grouped in order to account for user mental models
• Client Resourcing: OHO wants to build a site that we are able to manage with the staff and resources available to us. For example, OHO won’t recommend pages that require a lot of new content if that is not something we are able to create

What is a wireframe? Think of a wireframe as the “blueprints” of the website, which serve to convey the page structure, content placement, functionality and navigation for the scoped templates. They intentionally exclude imagery, brand fonts and colors so that the architectural building blocks can be addressed first. They are the skeleton of a page or the building blocks of different types of components used to organize the content on a page. We currently use pattern labs on our websites, which is a list of components that we use to choose how to build our webpages. The wireframe shows what our new components will be to best organize and display our content.

The OHO UX designer on our project combined sources of information to create these wireframes to include:

• Project Goals: project goals came from the Strategy Roadmap as well as specific goals our team set out at the beginning of the project
• User Needs: user needs came from research previously conducted. This research included content audits, stakeholder interviews, and OHO’s deep knowledge of user needs from past projects  
• User Experience Best Practices: OHO’s collective experience designing complex sites informs their approach to creating innovative and intuitive wireframes. The components, templates and navigational patterns they design are rooted in industry best-practices and customized to fit our unique project goals
• Client Resourcing: OHO wants to build a site that we are able to manage with the staff and resources available to us. For example, if a client has indicated that they have limited photography and no plans to do photo shoots, OHO wouldn’t present wireframes that heavily emphasized quality brand photography 

The wireframes will drive the entirety of the rest of the project, including: 

• Visual Design: wireframes indicate the hierarchy of content as well as the type of content that must be designed 
• Back End Development & Content Entry: wireframes indicate specific ways content will be built and managed for back-end development and content entry

Annotation Documentation: Annotations are the website’s “user manual”: the documentation for how a website will be built and how it will function. The annotations take all of the wireframe’s templates, components and navigation and explain how the content will be entered, managed and shared throughout the CMS.

During the UX process, the developer has provided oversight for the sitemap and wireframes. During Annotations the UX designer, developer and QA analyst on the project work together to record the expected build and functionality from the point of view of a website editor. 

What do the annotations impact?

• Back End Development & Content Entry
  • The annotations indicate and finalize the specific ways content will be built and managed
• Visual Design
  • The annotations indicate the functionality, components and page templates that will be designed. However, during visual design, functionality may change slightly; for example, a small layout change or the addition/removal of a button. If this happens, the annotations will be kept updated by a member of the OHO project team.

Governance Documentation: A thoughtful web governance process mitigates chronic website issues through cultural change and improved processes. Maintaining consistency, quality and cohesive brand identity on the web will require coupling the redesign with a plan for web governance. OHO’s governance discovery and comprehensive plan will include: 

• Situational analysis, including alignment with parallel initiatives such as the Technology Governance plan 
• Defined governance model and authoritative content 
• Defined and recommended publishing roles, responsibilities and workflow 
• Training, documentation and content quality assurance 
• Content operations recommendations 
• Internal community building model & approach 

There will be training, documentation and regular quality assurance for our new website.
The web roles will be defined as:

• Web Content Specialist/Digital Copywriter (aka Content Expert)
  *There should be one person appointed for every organization
• Web Content Editor
  *There should be one person appointed for every organization
• Web Content Publisher

The content strategy will guide the development of copy and visual content for the project. Like the strategy roadmap, it summarizes and synthesizes the information gathered from the discovery activities and offers analysis and context specifically framed towards website content and how best to use it to represent the project’s objectives. This can help answer questions like: 

• How should we activate our brand messaging architecture? 
• What is our voice and tone? And how can we maintain consistency and appropriateness across all areas of the website? 
• How should we approach our sites' news and stories? 

Content Audit Findings: The quality of content throughout the San Francisco State University website and its subdomain sites varies vastly. This inconsistency, along with disjointedness in navigation, does not create an optimal user experience and does not lend itself well to ease of navigation for our users. This may lead to missed opportunities of potential students applying or completing other important calls-to-actions. Some overarching takeaways: 

• Lack of standardization in copy and visual content
• There is no uniformity in layout or navigation to any subset of sites (departments, schools, student life, etc.) 
• Absence of breadcrumbs which should be on the site to help users understand the relationship between the page they are currently on, and higher level pages. They help ease user anxiety by providing them an easier way to navigate through the site
• Liability issues as it relates to not adhering to ADA compliance through different elements placed on the site 

Content Strategy Recommendations:  

• Define, highlight and celebrate the SF State community, bringing personality to the institution online 
• Connect SF State’s academic programs to alumni career outcomes so prospective students (and current students switching majors) can find the right path 
• Demonstrate SF State’s ethos of care by contextualizing affordability, access, resources and supports 
• Center the user, from site architecture to content development 
• Introduce website governance centered in establishing digital leadership, collaboration in service of site users and ongoing site health and maintenance 

SMC will be building out a content matrix in the Fall of 2024. This content matrix will help us identify the following:

• content experts/writers
• web editors
• keywords for SEO
• metadata for SEO
• content that needs rewritten
• content that can be internal to our faculty, staff and students
• accessible content (attachments)

SMC and OHO will begin reaching out for content revisions in the Spring of 2025.