This is a redesigning story of our faculty app, the Art Design & Media(ADM) Unity. Building an app that promotes a stronger sense of community amongst the students, improve the efficiency of students’ work schedule and create functions to cater to student’s daily needs.
Challenges
· The interface should be clear and simplistic while fitting lots of features
· Users should be motivated to use the app every day
· Users should be able to find the needed school related information easily
· The current ADM is a very simple app of limited features and information. It is not content-wise and useful for ADM students. There is no incentive for them to download. Therefore, our team basically start from scratch.
User Needs
- Easy access to administrative information, matriculation, and updates on course content information
- Updates of Student Council events. Opportunities for students to have fun and integrate into ADM easier
- Reminder of events or workshops regarding your course
- Shared forum for student life advice, bonding between different year
- Function that helps students to better time management and facilitate group work
- Works as a one-stop portal. Easy to use and links to student lives
Planning
We decided to focus working on 3 categories for constructing the app: Personalised Timetable, Forum and Academic information.
Personalised Timetable: To allow ADM students to better manage their registered modules and personal events (group meetings, projects, etc…) Enable them to better work out timings for meet-ups and discussions through a shared calendar. Have a private and shared calendar so that very personal events can be kept to oneself.
Forum: Provide opportunity for students to integrate into the faculty by creating a sense of belonging to the ADM Family. As a platform for solving questions and seeking help and allows students to share their work easily. Possible features: forum in different categories; option to create their own group; Pin, share and comment function under post. Pin the post/comment to bookmark useful content.
Academic information: To make finding information for school academics or events a lot more efficient. Ensure convenience and user friendliness of actions to take after viewing content. Possible features: Add events or assignment deadlines to timetable; In built OSS
Principles for leading our design
1.Simplicity: Simplicity allows the audience to focus on the essential message of the design and increases efficiency on message delivery. The minimalistic approach designs support faster loading time and are more compatible to mobile devices.
2.Findable: Findable academic information gives ease to students. 80% of ADM students experienced frustration when trying to find information in the official university website, especially freshies.
3.Desirable: 99% of the ADM survey respondents said they had never heard of or downloaded the current ADM app.
Execution: Wireframes
Forum: I worked specially on Forum for constructing wireframe.
Putting all the important items at the top. More functions are listed at the dotted symbol, inspired by Google account. Users can also customise where to put the boxes by press and hold and drag to the desired position.
Hypothesis: Now we don’t really have the chance to share our ideas, process or work frequently, Community in this app is a forum for students to ask questions or share their ideas and possibly increase the interaction of students. Students can explain their ideas by posting and comment below posts.
Different display versions- Image & text or Text Only: Users can to choose which they want to browse. In the text only version, only text will be displayed so the user can focus on question and discussion. Image & text is a platform for students to share their work and ask for opinions, encourage students to share more so they can learn from each other.
Functions: I remove the function of like and dislike to construct a better and healthy social environment so less negativity in school community.
- Share
- Search
- Groups: User can choose which group to browse. Also, to create new group.
- Pin: Inspired by Pinterest, which allows pinning online pictures easily. Art students have a high dependance on Pinterest for researchingThis function could let students find inspirations and save good works from schoolmates.
- Posting: Keeping the posting procedure simple to encourage more usage. Users can choose which group they want to post in by selecting the discussion board. They can also add tag so it is easier to be searched.
Personalised Timetable
Academic Information
Reflection
I learnt a lot from the process of constructing a wireframe. This is the first time for me designing interface for an app. Interface design seems to be easy as designers are working with shapes and layout. Yet, in fact it is not. There’s a lot things to consider in order to construct a good layout for fitting all the information and functions while considering how to keep a great user experience.
Feedback for wireframes
We presented our ideas to ADM peers and interface design classmates and received some feedback.
- 3 different styles and categories: Styles are not consistent and linked
- Community: too many boxes for categorising, the pin function is nice
- Personalised Timetable: Style can be simplified, less lines and words
- Academic Information: Can include more features for home page
Iteration & Refinement- Final
Aim: To provide an application for ADM students that has useful content to enhance efficiency within student life in school.
Improvement made: Combined the 3 prototypes made in Assignment 2; Focused on academic matters, personalised timetable, and student forum; Personalised it to the student; Created stronger visual branding with colors, fonts and elements
Academic matters & Student life:
Student Services
CCTV
-
-
- Equipment booking: A link out to the main website for booking
- Direct OSS attachment to app: ability to post on the go, and view friends’ works with ease.
- CCTV: Live feedback of student crowd in different public areas to find vacant spaces more efficiently
-
Events & Workshops:
Events
-
-
- A condensed view of 2 upcoming events on the homepage, and the full list of events will be shown on the event page, with hyperlinks to each individual event. Image can be clicked on to be expanded.
-
Administration Matters:
Course Information
Degree Audit
-
-
- Course Information: A revamped overview of academic courses is created, with a more specific set for individual courses registered, and an overview of all courses available. Each course outline has the more important information bolded and placed at the side for easy identification.
- Degree Audit: A more condensed and straightforward view of the degree audit is created, with the number of AUs that are needed to be completed to be boxed up and coloured for easy identification as well
-
Student forum — Community
-
-
- A tab bar is added specifically to Community for user to navigate easily
- Ability to post, comment and pin
-
-
-
- A condensed view of Community. Posts will be shown in Community and categorised by their type and tags. Tags are easier for user to create when publishing posts than Groups. Again, image can be clicked on to be expanded.
-
Personalised Timetable
Public Calendar
Private Calendar
The main appearance of both private and public calendar features a monthly, weekly and daily format.
Public Calendar: Drop down menu to select friends’ schedules. Shows the days and time friends are not free.
Takeaways
This project is a learning journey of designing user interface. We kept a consistent style by meeting and doing work together. I realised the importance of collaboration and discussion. Although most of the design project is individual, it is inevitable to work in group to make something big. As a visual communication and interactive media student, I deeply feel that the UI/UX is the key of the future design industry. I applied to the interface design course in university in order to further explore it and hopefully pursuing a career in UI/UX in the future.
Thank you for reading! Please comment below if you have feedback on our design!
Special thanks to our teammates, Sylvia Low and Amanda Lee for collaborating such a wonderful interface design for our faculty app!