Responsive Web Portal

Heartland Work Center

Creating a collaborative environment for college faculty

Heartland Community College needed a re-design for their Work Center — a project management system for faculty and staff members of the college. This Work Center served as a collaborative environment for creating personalized self-service workspaces for projects, teams, and committees.

ROLE
UI Designer

CLIENT
Heartland Community College

AGENCY
PixelMill

YEAR
2017

Overview

The current interface did not provide a concise, organized structure to differentiate all workspaces. There was limited hierarchy in defining specific projects and information was difficult for users to find. This structure was decreasing opportunities for employee collaboration and communication within the workspace. The client wanted a fully re-designed interface with an updated user experience to be developed for Office 365.

The initial phase of this project started with discussing the client’s wants, needs, and goals of the re-design. It was defined that they wanted to sustain the current purpose of the Work Center, but in order for their users to utilize it more efficiently, it needed an improved user experience and a re-designed user interface that reflects their culture and brand.

BEFORE:

AFTER:

PHASE ONE

Research & Discovery

As a lead designer of the UI/UX team, my role in the discovery phase was to execute a research strategy that would assist with fully understanding their users in order to formulate an efficient solution. I worked with my team in conducting a thorough site analysis of their current interface. During this analysis, we discovered how the current interface works, analyzed the current problems, and looked for areas of improvement. To further understand the users, we conducted user interviews with stakeholders, project members, and project collaborators. As a result of the interviews, we discovered additional pain points and suggested solutions for the Work Center re-design.

Our findings from the site analysis and user interviews were documented in a business requirement document along with recommended use cases that provided an outline of user goals and how the users will achieve their goals in the re-designed Work Center. Some examples of our use cases include:

Use Case #1:
As a site owner, I want to be able to manage a site by setting milestones, assigning tasks to team members, and tracking status updates on tasks or projects.
Recommendation:
To create a seamless site management system that gives site owners the ability to set milestones, assign tasks, and track status updates by setting up a flowchart that displays status updates.
Use Case #2:
As a site owner, I want to be able to set permission levels in order to easily determine which sites are private or public.
Recommendation:
To improve the security of sites by providing the ability to set permission levels for sites that are editable, viewable, or fully private. The identification of permission levels will give specific access levels for each site.
Use Case #3:
As a user, I want to be able to quickly search, view, and access necessary information such as documents, meeting notes, task lists, and deadlines in order to work sufficiently on my tasks or projects.
Recommendation:
The search functionality should include an improved filtering system that will assist the user with closely matching what they are searching for. In addition, a bookmarking feature with the ability to save commonly visited sites is recommended for an easy and quick navigation tool.
Use Case #4:
As a user, I want to be able to view all content related to me by having the ability to view all sites that I am a part of and view all tasks assigned to me.
Recommendation:
To create a prominent, easy to access roll up list on the homepage that displays the sites and tasks specifically related to the user. This will give users the ability to view their sites, projects, and tasks easily when they enter the Work Center which stands for increased productivity.

PHASE TWO

User Stories

Following the discovery phase, we gathered the information that we found and used it as a guide to formulate possible UI/UX solutions through wireframes. The process involved multiple iterations and feedback from the client in order to create the best solution possible for Heartland’s users. Wireframes were further illustrated with user stories that described the user actions for each element.

PHASE THREE

Visual Design

Creating a style guide

Once we had the wireframes in a good place, it was time to introduce the visual design elements. The overall look and feel was ideated through a mood board, which visually presented the defined project keywords — collaborative, supportive, focused, and personalized.

The design system was created with assistance of the client’s current brand and style guidelines, as well as inspiration from their public site. We took these elements and evolved them into a visual design system that was applicable for the Work Center.