Portl

Portl is a conceptual university course planner and navigation app designed to address the fragmented nature of student tools. It consolidates platforms like Moodle, Sisu, and campus maps into a cohesive user experience. As a group project for our User Interface Design course, my team and I developed Figma prototypes aimed at enhancing the university experience for students while prioritizing usability, accessibility, and functionality.

Timeline

Oct 2024-Jan 2025

Type

Conceptual App

Project Type

UI/UX Design

Role

Lead UX/UI Designer

Problem Statement

University students face challenges navigating their campus and managing academic tasks across multiple platforms. Many new students feel overwhelmed by fragmented tools, leading to missed assignment deadlines, frustration, and reduced engagement. This project sought to create a seamless and user-friendly solution to simplify and enhance the university experience.

Market Analysis

Analyzing competitors like Moodle, Sisu, Tuudo and Google Calendar helped refine our scope and identify opportunities to improve functionality and usability.

User Research

We began the design process by identifying the challenges students face in managing their university life. Through qualitative interviews, analyzed using thematic analysis in ATLAS.ti software, we uncovered recurring frustrations. These included difficulty navigating campus, feeling overwhelmed by the need to check multiple platforms like Moodle and Sisu, and frequently missing deadlines due to ineffective notification systems. New students, in particular, struggled to locate classrooms and access key facilities, compounding their stress. These insights highlighted a clear need for a solution that streamlines tools, improves navigation, and simplifies the overall university experience.

Research Findings
User Persona
Thematic Analysis

Information Architecture

Our information architecture was shaped by the insights from user research and the ideas generated during the ideation phase. We focused on creating a logical structure that grouped essential features into intuitive sections, aiming to minimize cognitive load and ensure seamless navigation.

Wireframing

Wireframes were a critical step in shaping the app’s structure, user flows, and core features while helping us spot issues early. Each team member independently designed a version of the home screen, bringing diverse perspectives that we combined into a cohesive layout. The remaining screens were divided among the team, with regular feedback sessions ensuring iterative improvements. This process streamlined our workflow and built a solid foundation for prototyping.

Branding & Design System

Portl’s logo was crafted to reflect the app’s mission of simplifying academic life through education, navigation, and connectivity. Its circular form symbolizes a “portal,” representing the gateway to streamlined student experiences. After 34 iterations, we achieved a balance of simplicity and meaning that resonated with the app’s purpose of connection and support.

Building on this foundation, we developed a comprehensive design system to ensure consistency and accessibility across the app. This included carefully selected typography, a calming color palette, and reusable UI components designed to enhance usability and create a cohesive visual identity.

Visual Design

Portl’s visual design emphasizes both functionality and accessibility. We adopted a clean, cohesive aesthetic paired with a calming purple palette to create a sense of clarity and ease for students. Intuitive layouts and consistent UI elements supported smooth navigation, while the AR-enhanced feature added a forward-looking layer of real-time guidance for classrooms, cafeterias, and other campus spaces. The overall design aimed to balance visual appeal with practical usability, ensuring that students could engage with the app in a way that felt natural and supportive of their academic routines.

Usability Testing

We validated our design through usability testing and semi-structured interviews with 9 university students (ages 22–28), representing active users of Moodle, Sisu, and Google Calendar. Using a high-fidelity Figma prototype in Maze, participants completed seven real-world tasks—such as checking schedules, navigating the campus map, and managing coursework—while thinking aloud, followed by short interviews.

Key Findings
-Most tasks were completed quickly with minimal errors.
-One task (messaging a course examiner) had only a 55% success rate, exposing navigation and labeling issues.
-Students described Portl as “useful” and “time-saving,” especially for new users.

Outcomes & Reflections

Portl proved that a student-centered design approach can simplify academic life by unifying schedules, navigation, and coursework into one intuitive app. Usability testing highlighted strengths while also revealing areas for refinement, such as clearer task flows, realistic content, and improved communication features. Moving forward, we aim to implement these outcomes to enhance the next iteration of the design.
This project was also a collaborative achievement, and it was a pleasure working alongside my teammates Abdullah Wasi, Adan Shehzad, and Kashaf Tariq, whose ideas and dedication shaped Portl into a strong proof-of-concept.

sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect
sparkle
Let's connect