🚧 Under Construction 🚧
Tec de Monterrey's New Graduation Requirements Tracking Web App
Project Overview
Tec de Monterrey is recognized as the top private university in Mexico and one of the best in Latin America.
As part of efforts to enhance the user experience for students at all levels (high school, university, and post-graduate), it was essential to design a webapp that allows students to track their graduation requirements and access information related to graduation.
Given the ambitious nature of the project and tight deadlines, the decision was made to first develop a workaround, gather insights, and then work on subsequent releases. This approach involved launching the system for some student levels while continuously improving features based on user feedback.
The Problem
The main issue was that students lacked a clear way to track their graduation requirements. Depending on their level and program, they had to meet certain requirements by specific deadlines, but without a system to track their progress, many students ended up needing an extra semester to complete requirements they were unaware of.
While students could visit one of the 30+ campuses in Mexico to inquire about their progress, the constantly changing criteria made it difficult to get consistent information.
As a result, there was a clear need for a centralized platform where students could easily access all the information related to their graduation requirements, tailored to their level and program.
Team Collaboration
-
Project Manager
-
SMEs
-
Product Manager
-
Team Leaders
-
Architecture engineers (Tec's side)
-
Tec de Monterrey hired a tech company just for development with a team of 10 engineers.
My Role
As the sole Design Consultant with no additional design resources, I had the opportunity to act as both a consultant and designer throughout the project. I contributed to the development of the design strategy for both the initial workaround and subsequent releases.
My responsibilities included:
-
Design Strategy: Led the creation of the design strategy, ensuring it aligned with the goals of both the first release and future updates.
-
Stakeholder Collaboration: Worked closely with multiple internal stakeholders, conducting interviews and gathering insights to fully understand user needs, requirements and software architecture limitations.
-
Designed user interfaces, validated designs with users, and iterated based on feedback to ensure usability and alignment with project goals.
-
Created detailed user stories to guide development, ensuring seamless communication between design, team leaders and engineering teams.
-
Managed Visual QA to maintain design consistency throughout development and ensure the final product met the design specifications.
-
Worked alongside the change management team to define and execute a smooth launch strategy, addressing potential user concerns and ensuring adoption.
-
Established key metrics to track user engagement, performance and satisfaction, enabling continuous improvement and maintenance of the system each semester.
Tools and Software
-
Figma
-
Miro
-
Jira
-
Looker Studio
-
Teams
Design Process
1. Research and Discovery
To fully understand the problem, we began by laying the groundwork through a comprehensive research phase. This included analyzing how students were currently tracking and learning about their graduation requirements, and identifying the process, technologies and software involved.
We created an AS-IS service blueprint to map out the existing process and uncover key pain points.
We also conducted interviews with Subject Matter Experts (SMEs), including leaders at Tec de Monterrey, software architects, and students from various levels and campuses. This research helped us define the "dream process"—the ideal service blueprint for the system. We focused on designing a streamlined version of the service, aiming to create minimal viable and lovable products through an initial workaround.
Additionally, understanding the budget and team structure was critical.
2. Planning, Developing the Workaround, and Gathering Insights
Once we had defined the project scope, we created a detailed timeline with deliverables, budget, and resource allocation for both the workaround and the first full release. Given the tight timeline, we focused intensely on delivering the first workaround, which was completed in six months, while simultaneously working on a more structured release focusing on university students.
Recognizing that the system needed to be editable, we prioritized adding admin panels for both projects to allow for easy updates.
Since we lacked the time and budget to build something from scratch, the workaround was incorporated into an existing app that students already used to track other aspects of their academic life. This solution provided a central place for university students to view their graduation requirements, progress, and other essential information without excessive clicks.
The workaround served as a valuable learning tool, helping us understand how students interacted with the information and navigated the site. We set up satisfaction surveys to track the system’s performance and received feedback over the course of one year, during which two university generations used the system.
Key features for students included:
-
Selecting their graduation period (students could choose their graduation semester based on credits)
-
Confirming personal data for title printing
-
Viewing each graduation requirement with status
-
Seeing the last update of each requirement
-
Accessing links to important graduation-related information
-
Receiving confirmation and congratulations once all requirements were met
Key features for admins included:
-
Manually updating graduation requirements via Excel, as no integrations were in place at the time.
-
Adjusting text for specific sections.
-
Selecting the congratulatory message, distinguishing between students who received the excellence award based on their average.
-
Downloading data for personal information validation and confirmation.
-
Downloading data for the selected graduation period.
This initial release allowed us to refine the design and plan for the next phase.
3. Refining the Concept and Preparing for the Next Phase
The six-month workaround provided valuable insights, allowing us to refine user stories for the more complex version of the system that was in progress.
Due to the intricate software architecture and the need for new APIs, we focused on gathering requirements, designing the concept, and validating it with students and key SMEs. At the same time, we worked on an RFP to find the right tech partner to help us build the solution from scratch.
My primary objective during this phase was to support the product manager and team leaders in aligning on the best solution. I worked on creating an easy-to-use, component-based design that could adapt to different screen sizes, while reducing unnecessary navigation and providing key information on a single screen, an approach we learned was crucial from the workaround.
We developed a detailed plan for design and development, dividing tasks into sprints with clear deliverables for both users and admins.
At the time, Tec de Monterrey was working on a broader design system for all their apps, so we created a UI Kit specifically for this project. The components were expected to change once the final design system was launched.
Our development efforts focused on creating a student portal and enhancing the admin side with key reporting information. We replicated the essential functionality from the workaround but made the design more visually appealing and integrated it with APIs to eliminate the need for manual data entry via Excel.
Throughout the process, I validated the screens multiple times before development and created clear user stories to ensure smooth collaboration with the development team.
4. Launching Strategy and Admin Dashboard Development
As we neared the launch of the final student's version, we focused on developing a change management strategy to communicate the new system and the new process to students and ensure that all support specialists were informed.
We created a digital and on-campus launch plan and provided training to the necessary staff so they could assist students with graduation requirements.
While advancing with the launch, we also worked on developing the admin dashboard. This dashboard included specialized features such as:
-
Creating roles and permissions
-
Editing text
-
Sending notifications to students
-
Adjusting student status
-
Visualizing exactly what each student could see from their portal
These features were designed to give admins full control over the system while ensuring an efficient user experience.
5. Iterative Development and Customization
This project was highly agile, with a focus on continuous improvement, launching new features and refining existing ones sprint by sprint. The change management strategy ensured that both the admin system and the student platform were well-understood by all stakeholders.
As the project progressed, we launched customized portals for different programs, each with its own set of requirements.
The student portals were personalized for various levels, including:
-
High School: Bilingual, International
-
University: One degree, Two degrees, Medical students
-
Post-graduate: Masters, Postgraduate, Doctorate
Both the admin and student portals were launched and continuously refined. This ambitious project spanned two years, with the initial workaround phased out once the new portals were fully implemented.
Key Learnings
Working as a design consultant and creating the entire design strategy while managing multiple stakeholders was a challenging experience, especially considering budget, timeline, and architecture limitations. However, it was one of the most rewarding projects for my professional growth, as I was involved from discovery through to launch and iteration.
One of my key learnings was that, due to the fast-paced nature of the project, we often fell behind with the QA team, requiring adjustments later in the process. These delays weren’t accounted for in the initial planning, so we had to revise the original plan. Additionally, when going live, some features didn’t work as expected in QA and the final versions, forcing us to deprioritize certain tasks in each sprint to allocate time for bug fixes. My biggest takeaway from this experience was the importance of considering these factors when working with a development team.
As designers, we don’t often get the opportunity to experience the entire process, but in my role as a consultant and bridge between Tec de Monterrey and the development team, I was able to refine not only my leadership and design skills but also my negotiation, project management, prioritization, research, and user story writing. I learned a great deal from all the stakeholders involved and was fortunate to contribute to the launch strategy and defining key metrics.
This experience taught me that research and progress tracking are crucial for iteration, helping to create a lovable, functional product.
Demo
1st of 3 Iterations of the Workaround
Student's Portal