Problem Statement

The problem that many students as well staffs on campus is that they are being overloaded with the numerous amount of websites, webapps, mobile apps that the campus/university is using. This creates a problem whereby the users are confused and got lost in trying to access which apps to use. Thus, an idea of solution to be problem has been found in the form of a cross-platform application that compiles and categorizes the application. Not only that, the app provides a brief description and explanation of the app that they are trying to access.

Objectives

Based on the problem found during the user research using methods such as surveys, interviews, and personas, the main objective of this app is to provide an all-in-one app that consists of all the campus/university-related links to have a platform that organizes all these links to be readily accessible.

Design Process

Research

Discovering Phase (Data Gathering)

The data gathering involves collecting all the links that the campus or university uses. This includes websites and apps that range from educational purposes to informational and utilities.

Exploration (Findings)

With the data collected from the discovering phase, we can go through these data. Since we have a lot of websites and apps, we are going to make a table of fields containing headers such as description, how often it is being used, category, and features. This will give us a rough idea of what websites or apps the user is expected to use more frequently to make it more accessible.

Ideate (Finding Solutions)

After we go through the data, we can come up with solutions that will suit best for our users. One possible solution is to have the app behave like a redirect website link such as LinkTree. In this stage, we can create a user flow of the application such that it includes what actions and attributes the user is expected to display. The Wireframe provides us a visual information and the structure of the application and its interaction between every page. A framework based on OOP is being used to separate display (See) and actions (do), to have clear components that will be available to the user.

Inspiration (Competitor Analysis)

By having an inspiration board, we can find common patterns that works best now and design practices that is currently being used in the industry.

Design Phase

Since this will be a cross-platform application, we must optimize its display for every viewport. This includes Desktop, Tablet, and Phone Viewport sizes. This will ensure the responsiveness of the app that the user will appreciate and enjoy using on top of the well-structured and consistent user experience no matter what device is being used. By seamlessly adapting to various screen sizes, this app aims to deliver a versatile and engaging experience, meeting user expectations and encouraging satisfaction at every interaction point.

The app will have a home page design using icons and label text to indicate clearly what website or apps it will open. It is also being categorized based on the category predefined in the exploration phase. This will ease the user in navigating the various links that the app consists of. A favorites section on top indicated by the colored borders and container is used to separated the visual hierarchy that indicates that the section is more important than the others. A search bar is implemented to offer user an option to easily search the website or app that they are trying to access. Once user click on the icon, it will bring them to a page where it displays the screenshot of the apps, description, category, links, and a primary button to redirect them to the website or app.

Final Design and Mockup

Future Works

Since the design of this project has been finalised, the only task to be done is to begin the development process. This application will be a cross-platform to allows easy access and flexibility to all users that will be using this app. Hence, the tech stack that will be undergo to develop this application is Flutter (Dart). This tech stack is chosen because it offers the adaptability of the user interface to be on different type of devices. This will also increase my skill set on the development side of things.

Remarks

This project's design process outlined demonstrates a systematic and user-centric approach to addressing the identified problem of organizing and accessing campus-related links. The research phase, involving data gathering and exploration, provides a comprehensive understanding of user needs and usage patterns. Ideation brings forth a solution with the concept of an app acting as a centralized link hub, similar to LinkTree, ensuring ease of access. The competitor analysis adds valuable insights into industry best practices, contributing to informed design decisions.