Ramiro Puentes

Project Overview

The goal of this project was to enhance the user experience by improving design, accessibility, and readability while introducing a 'save progress' feature that allows students to seamlessly continue their work. The redesign focused on creating a more intuitive and visually clear interface that adheres to WCAG accessibility standards, ensuring an inclusive and user-friendly experience for all students

In this project, I led the redesign of a State Center Community College District's online orientation platform aimed at enhancing user experience for incoming students. My primary responsibilities included conducting user research, developing wireframes, and implementing the front-end design. One significant challenge was ensuring accessibility compliance, which I addressed by integrating WCAG guidelines into the design process. The project utilized tools such as Adobe XD for design and .Net for development. As a result, the platform saw a 25% increase in user engagement, and I gained valuable experience in accessible design practices.

In addition to developing the Orientation web application, I also designed all graphics and images for the site, ensuring a cohesive visual identity that aligns with the user experience and accessibility goals.

Tech Stack	.NET Core, SQL Server, JavaScript, Bootstrap
Project Type	Full-stack web app
Role	Lead Developer, UX Designer
Completion Date	Nov 2024

Related Project

This project is closely connected to the Orientation Admin Dashboard. While the Orientation project provides students with a structured onboarding experience, the Orientation Admin Dashboard enables IT staff to manage and update the quiz efficiently.

View Orientation Admin Dashboard Project

Key Features

Modernized & User-Friendly Design: Clean, structured UI with intuitive navigation and a mobile-responsive layout.
Enhanced Accessibility (WCAG Compliant): Improved color contrast, keyboard navigability, ARIA labels, and screen reader support.
Improved Readability: Larger fonts, better spacing, simplified layouts, and optional dark mode for optimal viewing.
Save & Resume Progress: Allows students to continue where they left off, reducing frustration and improving usability.
Performance & Optimization: Fast-loading pages, smooth user experience, and optimized backend logic.
Secure & Scalable Architecture: Secure authentication and a scalable design for future feature expansions.
Multilingual Support: Users can choose from multiple languages to enhance accessibility for diverse backgrounds.
Administrative Interface: A dedicated admin panel that enables IT Personnel to easily update and maintain orientation content, ensuring information accuracy and timelines.
Custom Graphics & UI Design: Created all visual assets, including illustrations, icons, and banners, ensuring a polished and engaging user interface.

Project Gallery

Challenges & Solutions

Challenge: Coordinating with staff across multiple campuses posed challenges in maintaining focus and achieving consensus. Frequent discussions were necessary to align on priorities, with the understanding that additional changes could be incorporated in subsequent releases post-launch.

Solution:To address these challenges, we implemented structured communication strategies and established clear protocols for decision-making. This approach ensured that all team members remained focused on the project's objectives, facilitating timely consensus and allowing for the seamless integration of future enhancements after the initial launch.

By clearly delineating the challenges faced and the solutions implemented, your portfolio will effectively showcase your problem-solving skills and ability to manage complex projects involving diverse teams.

Lessons Learned & Future Improvements

Learned advanced SQL query optimization and caching strategies.
Improved ability to design for high-traffic environments.
Future improvement: Implement real-time updates using WebSockets.