Site development is underway!

The discovery, planning, and art direction phases of the website redesign project are complete, and the development phase is officially underway! A lot is going on behind the scenes as iFactory begins tasks of building out the website within the Drupal environment.

Below is a tentative development schedule for the rest of the project. A launch date of January or February 2017 is still expected.

web_development.png

Wrapping up Design Phase

We are close to wrapping up the Design Phase of the website redesign and will soon be moving to the Development Phase. At this point, we’re just making minor changes to the look and feel, and it’ll be finished up by the middle of June.

The Development Phase will take the look and feel and translate it into front-end web design and back-end production to make various databases work with the webpages. Also at this time, we’ll need to start gathering and editing content for the pages.

To take a quick look at the look and feel of the site, click on the thumbnails to open a larger view (FYI – nothing is “clickable” – these are image files).

Screen Shot 2016-05-26 at 2.37.48 PM
Homepage – Large Screen
Screen Shot 2016-05-26 at 2.37.55 PM
Homepage – Medium Screen
Screen Shot 2016-05-26 at 2.38.03 PM
Homepage – Small Screen

You can also take a look at what a typical page will look like; click on the thumbnails to view the larger image.

Screen Shot 2016-05-26 at 2.38.23 PM
Typical Page – Large Screen
Screen Shot 2016-05-26 at 2.38.29 PM
Typical Page – Medium Screen
Screen Shot 2016-05-26 at 2.38.37 PM
Typical Page – Small Screen

If you want to drill-down on the above pages and explore some of the additional pages, including “Being a Student,” “Program/Course Search,” and “Apply & Aid” pages, you are welcome to login to the College’s account to take a look at what’s been done:

http://atlantis.ifactory.com/clients/sctcc/design/lf1/#

Login: sctcc
Password: stcloud2015

Recap of Town Hall and Initial Design Concepts Reveal

Yesterday we had a very exciting and productive day at SCTCC with Courtney and Kimberly from iFactory! We met with a couple of focus groups and then had two well-attended town hall sessions in the afternoon. Everyone in attendance got a chance to see Round 1 of the “Look & Feel” conceptual designs (shown below). We appreciate the feedback and questions from students, faculty, staff, and guests who participated. There were a lot of useful suggestions and ideas that we are eager to incorporate into the design of the website.

Unfortunately we were not able to live-stream the town hall sessions, but if you were unable to attend, we’ve provided a link to the presentation below:

SCTCC Website Redesign Town Hall Presentation [.PDF]

Initial Design Concepts

Below are the initial design concepts that were presented to the groups at the town hall sessions. If you would like to explore each, use this link and the login information:

http://atlantis.ifactory.com/clients/sctcc/design/lf1/#

Login: sctcc
Password: stcloud2015

Screen Shot 2016-04-13 at 4.27.51 PM

Please provide any feedback, suggestions, ideas, or questions you have about these designs or any part of the project in the comments section of this blog! Again, we greatly appreciate your participation and involvement in the process.

Dan

SCTCC Website Redesign Town Hall | Tuesday, April 12

One of St. Cloud Technical & Community College’s marketing priorities is the redesign of the institution’s website, sctcc.edu.

The college has engaged a web marketing firm to help lead the redesign project. The firm, iFactory, based in Boston, has been selected to partner with SCTCC on this important project. Members of the SCTCC Marketing and IT departments have been working closely with iFactory on this project since November 2015.

ifactory-logo

To continue the process, members of the iFactory-SCTCC project team will be on campus to meet with stakeholders on Tuesday, April 12.

Students, faculty, staff, and members of the community are invited to meet the iFactory team and share with them thoughts about the College website and its redesign. There will be a presentation as well as time for questions from town hall participants. You will even get a sneak peek at what the new website may look like and how it will work! Your feedback is very valuable. Two afternoon sessions have been scheduled. The same presentation will be given at both.

Tuesday, April 12
1:00-3:00 PM or 3:00-4:30 PM
Northway (Main) Building
Room 1-309

This is an open session. You are welcome to join whenever you are available during this time.

For more information about the background and status of the project, visit the SCTCC Website Redesign blog. If you have questions, please contact Dan Hornseth at dhornseth@sctcc.edu.

sctcc_website_town_hall

Art Direction

The purpose of Art Direction is to explore a range of visual styles in preparation for high fidelity mockups. Last week, we worked with iFactory to gather all visual inputs, confirming rules for their usage, and experimenting with combinations of design.

  • Logo
  • Color
  • Typography
  • Photography
  • Graphic art
  • Comparator sites

At this stage, we’re concerned only with aesthetic flavor, while wireframing is addressing the functional structure of the webpages. Below are the initial design ideas presented to us by the designers at iFactory. We will be providing extensive feedback on this and establishing a solid look and feel for the site which will be presented at a campus-wide presentation on Tuesday, April 12!

sctcc_art-direction-v1-37

Site Map

The site map is one of the more exciting deliverables as we really started seeing the website coming together in a visual way. Below is a draft of the site map, which represents the organizational structure of webpages on the site and the navigational hierarchy of those pages. The site map is a fluid document, meaning it will change and update over time, and only goes three levels deep.

St Cloud Site Map - v4

Wireframes and Display Types

We’re currently working on the wireframes and display types. The purpose of wireframes is to create schematics of important pages on the site in order to determine structure, important content, and how it should be treated.

What Wireframes Do:

  • build off of the site map to define the structure of your site
  • create conventions (called display types) for handling content within pages for a consistent experience throughout your site
  • define layouts for pages in your site that have particularly unique content needs, and start sketching out special features and interactions as well as define some content strategy and consistent messaging for subsequent pages to build off of
  • define navigation schema
  • start defining interactions to build off of in visual design

What Wireframes Don’t Do:

  • define fonts, exact sizes, color palettes, or other design elements
  • act as a be-all end-all; they are a scaffolding and a key checkpoint to make sure we have the right things, in the right order, in the right hierarchy

Additional Info:
While the Site Map determines where the content lives on the site, the Wireframes determine what information needs to be “bubbled up” on key pages and the appropriate cross-linking to other relevant content. The wireframes is where we figure out the user’s experience with the site.

We will use the Content Outlines, which determine the critical content to address user’s needs, to help shape the order and relevant display types for each page.

Display Types
Purpose: to create content modules that can be used throughout the site to display important and relevant information.

Description: Display types and wireframes are done together. Typically, they include things like news and events spotlights, people spotlights, video modules, social media, etc. They are content blocks that can be used throughout the site to enhance the experience and help display relevant and important information.

Content Outlines

The following deliverables have been presented, reviewed, and approved: user personas, persona matrix, and site map. We are in the Information Architecture phase of the project.

Next up is Content Outlines, which is a component of content strategy.

Goal of the Content Outlines

To determine what content will appear on key site pages, how that content will be presented, and how that content relates to the user tasks and business objectives defined in the User Personas and Persona Content Matrix.

What It Looks Like

The Content Outlines are text-only page outlines of priority impressions, recommended content, and actions.

Content outlines are more about messaging rather than page functionality. A content outline works best for a page that inspires users and encourages them to explore your site.

Our chosen content outlines:

  1. Home Page
  2. Degrees & Programs
  3. Apply & Aid
  4. Community & Training
  5. Being a Student

After the pages have been determined, we fill in the following information in a text-only, outline form:

  • Impression – The reaction or feeling we want to inspire in users.
  • Takeaways – The proof points we suggest to back up the impression. These takeaways often summarize suggested impressions in the Persona Content Matrix.
  • Content/Visuals – Tangible recommendations for actual information (images, video, copy) that creates the takeaway and impression.
  • UX Ideas – An additional category for any out-of-the-box ideas that could be kept in your back pocket for later.
  • Action – What we want the user to do after visiting the page.

These sketches will help us prioritize content, figure out what we need, and line up resources ahead of time.

The Persona Matrix

This week we’ll be working on what iFactory is calling the Persona Matrix. We have run the content inventory and the user personas have been reviewed and approved. We are in the Information Architecture phase of the project. Persona Matrix is a component of content strategy. Below is some background on this deliverable.

Goals & Expectations

The Persona Matrix is the first deliverable in the content strategy part of the project. What the Persona Matrix does is identify the main chunks of content needed for each user task of each user persona. By identifying these content chunks we establish the most important information for the site.

The Persona Matrix is made up of the following elements, as it pertains to each user task / business objective for each user:

  • Persona’s Takeaway (content chunk #1) – This is the implied mindset from the persona; what we want them to think (a first impression)
  • Content/Tangible (content chunk #2) – This is the actual proof points we want to use to get the takeaway across, what will reinforce the mindset.
  • Specific Ideas/Visuals (content chunk #3) – This is how the content can be presented visually (suggestion/s).

The Persona Matrix is created in a grid structure, so you can correlate each of the content chunks with its associated user task / business objective. It is our first step into determining the necessary content to answer the user’s needs and ultimately what should be presented on the site. From this deliverable we will create the Site Map, to explore the mental models and pathways users will be taking through the site and where this content is most appropriately located.

User Personas

The User Persona is a deliverable that identifies and defines realistic personas of four primary users of the SCTCC website. Each persona includes key characteristics, challenges, user tasks, and business objectives. These personas will help direct future parts of the project.

Below are the 4 user personas established by iFactory and SCTCC. Additional personas (such as Current Student and SCTCC Employee) were out of the project scope, but may be created separately at a later date.