Project Plan
Client: The California Community Colleges Chancellor's Office
Date: September 2018
Duration: 12 Months
Role: UI/UX Designer
Tools: Sketch, InVision, Zeplin
About the Client
At the heart of California's education system lies the California Community Colleges System (CCC). With 114 community colleges under its umbrella, the CCC is the largest system of higher education globally, serving over 2.1 million students every year. The CCC Chancellor's Office, located in Sacramento, oversees the system's operations, including distributing state funding and offering leadership and technical support to the colleges.One of the most vital divisions within the CCC Chancellor's Office is the Academic Affairs department. Academic Affairs provides guidance to curriculum chairs and staff who oversee instructional operations at the colleges. The Workforce and Economic Development Division is another key division within Academic Affairs. This division helps manage grants to community colleges, provides technical assistance, and runs various special programs. They also work to coordinate job and career opportunities for community college graduates, advancing California's economic growth and global competitiveness.
Key Perceptions
- Empowers students to better understand their choices.
- Provides an improved experience over the printed, list only view of the course catalog.
- Addresses academic needs while being approachable and encouraging.
- Encourages interaction and exploration.
- Creates a sense of excitement and possibility for students.
Design Brief
Program Mapper is a visualization tool that improves the student experience of program, certificate, and degree exploration at community colleges in California. The tool presents complex academic content, such as program and course order, prerequisites, transfer, and part-time attendance in a consistent visual language. It acts as a seamless extension of CCC college brands and experiences, offering students a clear hierarchy, simple language, and a structure that encourages interaction and exploration. The aim is to prepare students for their academic experience by setting expectations around workload and average timeline for completion.
Objectives
Problem Statement
California Community College Chancellor's office needs a tool to navigate course catalogs and support student curriculum plans to increase on-time graduation. Students are affected by the problem of not having a visual interactive guide to easily consume programs. Without a solution, the organization faces lower graduation rates and a decline in enrollment.
1. Course Visualization
Simplify pathway exploration by presenting an accurate visualization of courses and prerequisites required to complete a program.
2. Completion Path
Present students with common completion pathways for a given program.
3. Graduation
Improve student on-time graduation rates by offering a clear picture of workload per semester and highlighting progression milestones.
4. Transferability
Ensure coursework meets transfer requirements by filtering electives to anticipated four-year institutions.
5. Enter and Exit Points
Present pathways that include multiple entries and exit points to meet varying student goals and needs each year.
6. Accessibility
Ensure the design is inclusive and meets WCAG 2.0 AA requirements at launch.
Definition
Defining the project was the next critical step in the design process, it set the foundation for the entire project and established clear goals, objectives, and constraints.
Personas
To better understand the needs and pain points of the users for this project, I created two user personas - one for students and another for college administrators and faculty - along with corresponding solutions for their identified pain points.
User Flow
I created a user flow diagram that visually represents how the different screens and features of the Program Mapper tool are connected. This enables a student to easily navigate the tool and explore courses, programs, and prerequisites in a seamless manner. With this user flow, a student can quickly access the information they need, discover new courses and programs, and make informed decisions about their academic path.
Wireframes
Based on user insights, I created intuitive wireframes for Program Mapper, incorporating all necessary features and functionality. The wireframes depict clear connections between pages and components, facilitating easy exploration of courses and programs for both students and administrators.
As part of this process, I created specific wireframes for the map of the academic program that visually displayed the full program to students. This allowed for easy exploration and comprehension of the program's requirements and structure, providing students with a clear understanding of their academic journey.
Design Exploration
During the design exploration phase of this project, I delved into a wide range of layout options, experimented with various color schemes, and tested different pathway card designs. This exploration allowed me to try out different ideas and helped me to hone in on the most effective solutions for creating an engaging and user-friendly experience for the users.
Final Design
As the lead UI designer, I thoroughly enjoyed the process of bringing Program Mapper from UX design to UI design. Applying styles and visual elements was the most exciting part of the project for me. I experimented with different color palettes and typography to create a cohesive visual language that reflects the identity of CCC colleges. It was a challenge to balance the aesthetics with the need for accessibility and usability, but I learned a lot from it. The final design was a result of multiple iterations and feedback from stakeholders, and I'm proud of what was accomplished.
We created specific page designs for academic fields like Health Sciences, incorporating relevant program information and related program degrees. Additionally, we designed and implemented a search function that allows students to search for degrees, certificates, and courses across all academic fields. The results provide comprehensive and relevant information to help students make informed decisions about their academic journey.
I created visual maps for degree programs that gave students a clear and concise overview of the courses they would take and the sections they were in. These visual maps were designed to be instantly engaging and easily navigable, using colors and icons to help quickly understand the program structure and requirements.
Program Map
To enhance the user experience, I designed specific features that were crucial. These features include drag-and-drop functionality that allows students to plan their journey, expanding course details that provide descriptions and prerequisites and a list view that makes it easy to see what courses are required for each term.
When creating the feature of selecting a course within a list, I prioritized presenting the information in a clear and concise manner while keeping the user interface visually appealing. I ensured that the course information was easy to read and understand, including the course title, description, prerequisites, and any other relevant information.
Style Guide
For the Program Mapper site I created a style guide. I began by selecting foundational elements such as colors, typography, and icons that would define the overall look and feel of the site. The color palette was chosen to provide a sense of professionalism and clarity, while the typography was selected to ensure readability and legibility on different devices. I also selected icons that were easily recognizable and could be used consistently across the site.
In addition to the foundations, I designed components including buttons, tabs, and pathway cards. The components were designed with accessibility and attention to detail in mind, to ensure that all users could easily navigate the site. For example, pathway cards were designed with a consistent layout and clear labeling that supported the user's journey in exploring and planning.
Results & Reflections
The Program Mapper site was a tremendous success and was well-received by both students and college administrators/faculty. The site's intuitive user interface and visual map of the program provided an easy way for students to plan their academic journey, and the search function allowed them to explore different courses and programs easily. The design was focused on accessibility and attention to detail, ensuring that every component was clear and easy to use.
Reflecting on the project, additional time and budgeting could have provided the opportunity to conduct additional user testing and gather more feedback to further improve the design. I would have valued exploring the possibility of incorporating more interactive features, such as a chatbot, to make the site engaging for new users. Overall, the Program Mapper site proved to be an effective tool for CCC and was regarded as a successful addition to their student’s resources. I am excited to see its continued success in helping students navigate their academic journey.
