University Mobile App Concept: A UX Case Study
Introducing an App that Facilitates Community, Communication, and Academic Progression
Project Overview
The university setting can often be viewed as a community, yet the channels of communication among faculty, students, and student organizations are often inconsistently conveyed via e-mail, learning platforms, and social media. Without a centralized method for university-related communications, important information such as class cancellations, room changes, and club events risks not being viewed by the target audience on time.
The proposed concept outlines a generic template that incorporates many university functions while being modular enough to allow for various customizations based on a aspects that a university or its student population may deem important. Under this premise, the purpose of this app would be to facilitate communication among all levels within the university and foster educational progress.
Process
Empathize: Pulling from my 9 years of experience within the university system, I constructed a generic persona based on interactions I’ve had with students concerning aspects of the university experience that they woud’ve liked to see improved. Ideally, having user data would’ve been more ideal, but due to limited resources, a more formal set of data points was unavailable.
Information Architecture: Once I identified the core needs of a hypothetical student, I mapped out how the general flow of the app would be like. One of my alma maters, Rutgers University, has their own app, which I used for base inspiration in combination with other concepts found on sites like Dribbble and Behance.
Wireframe: Using basic wireframes, I set out to visualize and organize the general structures of the app.
Interaction/Prototyping: Once the wireframe for the major components were completed, I rigged the wireframe artboards up with different interaction settings and began prototyping. If any issues rose up during this process, I would repeat the Wireframe process to resolve any issues.
Final Render: Once the interactions and overall structure of the app were done, my final task was to make it aesthetically presentable.
Information Architecture
For the information architecture (IA), I organized sections based on a parent/child relationship. Home, Messages, Classes, Community, and Profile each serve as a thematic “parent” section, doubling as an identifier for users looking to navigate towards a specific type of content. This model was constructed with modularity in mind, as child elements can be added or subtracted based on the needs of the university and its students.
Wireframes
To set the foundation for the main structure of the app, I created wireframes to organize content for the main parent elements as well as some of child elements.
From the beginning, I had a few features in mind that I wanted to integrate with the app for accessibility and engagement purposes.
Social media login: A common feature in most apps that eases and speeds up the login process compared to manually entering a username and password.
Schedule Carousel: Prominently featured at the top of the Home page, this section would serve as a constant reminder of upcoming classes and events. This would update according to time and any changes made from related sources (e.g. a room change for a class would be reflected).
Learning Platform Integration: Learning platforms like Moodle and Sakai have been a go-to for universities for a while now, but they’re rarely accessible outside of a desktop environment. The “Class” and “Class Hub” pages follow a similar structure to those learning platforms in a mobile format, which makes it more accessible to view and submit assignments.
Community: The “Community” section as a whole was established as a way for members of the university to post ads or reach out to one another. This is particularly geared for groups like researchers looking for participants, clubs looking for members, and events seeking volunteers. While many colleges still utilize fliers, those fliers tend to go unnoticed or aren’t equally distributed across campus; by having a “Community” section, any calls-to-action are all in one place.
Profile: For students, accessing their personal records isn’t always easy. Having a mobile version of their academic records gives them a much more accessible way to track their progress and display their achievements. More importantly, student profiles had to be viewable in two states: personal and public. There are times when students wouldn’t want certain pieces of information shared with others, therefore users should be able to make sections of information viewable. By default, all sections outside of a name and picture would be hidden from public view.
Achievements: Achievements have been used in games as a way to keep players engaged with the arbitrary reward of bragging rights. The same system could be applied to academia as a way to gamify student progress; whether universities would like to provide further rewards for students would be up to the universities, but psychologically, a reward as small as a small badge tend to work better than larger, more expensive rewards.
Initial Render/Prototype
Once the wireframes were complete, I started working on creating initial prototypes, which included creating a visual identity and wiring each artboard for an interaction. During these renders, I made one revision to the initial login stage.
Login: As most universities automatically assign students a university address, I felt that having students register for the app would just add an unnecessary step. Thinking of more back-end functionality, the university e-mail would be automatically associated with an account on this app concept. Social media logins would only be accessible once the user has logged in once with their university e-mail and associated their account with a support social media platform.
While the initial render was relatively clean, I felt like both the header and navigation bars needed to be distinguished from the main content. While there were some level of shadows placed to give some sense of depth, the sudden cutoff of content against the header and navigation bars was a bit jarring.
Final Render
The final render primarily changed the differentiation between navigational elements (header and navigation bar) and the rest of the main content. This was achieved by using a dark gradient theme that has been applied throughout the app. The major changes that occured after extensive testing primarily concerned the Messages section.
The main “Messages” section was given a sub-navigation bar that included a section for messages, contacts, and requests. I believed it was important for users to be able to vet the kinds of people that could see their content and send them messages. Universities have been notoriously terrible at handling issues like stalking and unsolicited/inappropriate messages, therefore having a way for users to accept who they’d like to communicate with helps to mitigate that situation.
A background gradient was also added for messages that contained attachments, therefore users would be better able to differentiate between a regular text message and a message with a downloadable file. Furthermore, as this app was designed for mobile, both voice and video calling functions were added to take advantage of the smartphone hardware.
Conclusions
This exercise serves as the first major portfolio project that I conducted independently. While I do believe that there are some elements that could be improved upon, especially as I’ve gained more experience in the months since I completed this project, I believe it still fulfills its core purpose: to foster a sense of community and encourage academic progression.
