Redesigning the user interface of CHRIST University student application
Since my second year in college, I have been thinking about redesigning the University application made for students. Because of other academic-related priorities, I couldn’t focus on it. During this pandemic with ample free time, I decided to bring this redesigning project to life. Before diving deep, I’d like to make it clear that this design is not an official one, neither it is backed by the university. I have been learning in-depth about UI/UX, and this project is an attempt to improve my knowledge, understand the design process better and to apply my UI/UX knowledge in recreating a design of a fully-fledged application.
What follows is my redesigning process for CHRIST University Student App.
CHRIST University application is a go-to app for students to check their attendance, timetable, absence details and to access marks card at the end of each semester. The app is only accessible to students of CHRIST University and is available in Google Play store and iOS App Store as well. Following are some screenshots of the existing application.
The app has 50K+ downloads in the Google Play store and has a simple architecture, but it only has 1.7-star ratings. Based on my observations, conversations with users, researches and evaluation based on heuristics and other UI/UX terminologies, I have found out that users are facing following hindrances.
- The app does not function properly in iOS devices
- The home page is empty, and it increases the time to access other pages
- Frequent crashes
- Difficulty in understanding the absentee’s list ( Subject Code )
- PC features not available in the mobile app
After defining the problem, Next step was to prioritize and to set focus. Following is the user persona we created for this app.
Users and Audience
Goals and Motivation
- Priority should be attendance and timetable pages
- Integrate PC features in the mobile app
- Design a layout that’s simple and time convenient
- Make use of home page
Sketch & Wireframing
User flow Diagram
User flows are blueprints or a series of action about how a user interacts with the application and how the system functions. It is essential to understand the most comfortable way in which a user can accomplish an intended task. This 👇 helps you in understanding the basic layout.
Colors & Typography
For this project, I have retained almost all the existing colors to facilitate association to brand aesthetics. Mineshaft colors were used for primary and subheading, for the background I used Wild Sand, which is a slight variant of the color white. Primary colors were Malibu and a gradient of Boston and Congress Blue. I decided to retain the university brand color blue as it is widely used by many corporate firms and indicates trust, dependability and honesty.
I used Roboto Typeface throughout the app. Roboto is a simple, versatile and modern typeface developed in-house at Google, and it offers high legibility on screen.
In the final design, I decided to make use of the home page by adding a carousel showing details regarding University events and two other sections for attendance and timetable. The carousel would be beneficial for marketing University events and department events, and it would also help students to know what’s going on. The initial study had found out that the primary goal of users(students) is to check attendance and timetable. Therefore, directly under the carousel section, I have added two segments for this purpose. It would also reduce the time required to navigate.
In Profile Page, I added a brief user bio with their academic performance and a design to download course pack and subject-related details right from the smartphone app.
Scope and Improvements
Due to pandemic and subsequent lockdown, data collection methods were limited. I couldn’t conduct face to face interviews and field trips which would have helped me with better data and design. Also, the sample size was small. However, there’s an excellent scope to improve the UI by adding visually appealing elements and features.
Designed in Adobe XD. User Flows created in flowmapp.com
Thanks so much to Merlin Johnson, Fino K Thomas, Manu Mathew and Abhiram AR for supporting me throughout this project. Your suggestions meant so much and made the design better — also, a huge thanks to everyone who has taken time out of their day to read this project. I’d love to hear feedback and advice from you to better myself.