top of page
Monash College
Monash College is a leader in transition education. For over 20 years it has prepared the next generation of global professionals, equipping them to capably succeed at university and in their careers. Monash College in Australia is owned by Monash University, Australia's largest international university.
Redesign Portal - A Prototype
Brief - Objective
Redesigning the Intranet for the students of Monash college which is a single user interface that centralizes access to content, data and key tasks.
The goal was to recreate a structured, well designed, intuitive responsive design prototype for mobile and desktop. The prototype needed to be completed in in four weeks time.
Project phase 1- Produce a proposal for design enhancements. Include suggestions or improvements across desktop and mobile in your document.
Project phase 2- Build a prototype.
Design process and Guidelines
Research and Analysis
Contextual inquiry: We visited the client premises (Monash College) and spent time in observing the users (students) in their natural environment as they complete their everyday tasks and explain what they are doing and why. This helped me to learn what is important to users and how they interacted with the portal.
User groups/Focus groups Interview: This is one kind of structured interview where we chose 5 participants who helped us gather more information regarding their expectations from the product.
I distributed two sticky notes to each participant and asked them to write down any two pain points or difficulty they came across while interacting with the portal. This helped me to gather important information which became the focus areas and the key to build a more user friendly and useful product.
Such similar interviews were conducted with 4 different groups to obtain more accuracy in the results.
The user's pain points extracted from this research are as below:
Problems identified and root-causes analysed in the As-Is solution
-
Students were finding it harder to look for information due to ambiguous/vague information structures and inconsistent navigation.
-
The user interaction experience with the interface was not satisfactory as the overall portal design was not aesthetically appealing. Users are more tolerant of minor usability issues when they find an interface visually appealing. This aesthetic-usability effect can mask UI problems if the user interacts with elements that look good.
-
The users were made to click multiple times to access basic information as the information was not well organised into distinct areas with clear themes. At many times they did not know which page they were in and what they needed to do.
-
They could not find immediate solution for an urgent inquiry, such as paying fees or course enrolment.
-
They were not happy with the mobile experience.
Conceptualisation & Wireframing
Prior to creating a wireframe, I was constantly involved in participatory design sessions that helped me to identify the key areas and implementations required to deliver a better user experience as below
Iconography and Aesthetic Usability
Aesthetic designs are perceived as easier to use than less-aesthetic designs. The effect has been observed in several experiments, and has significant implications regarding the acceptance, use, and performance of a design.
Icons are best at adding value when they are well recognized and improve the visual design and usability of a UI.
Testing recognizability and aesthetic appeal
Two versions of the icons were created based on color contrast and a preference test was quickly done to measure user opinion around what the icon means, and how it 'feels’ to them.
High Fidelity Prototype
To extract the maximum out of user testing I was asked to design the high fidelity clickable prototype as below. The client was leaning towards implementing the familiar structure of the LinkedIn user interface.
User testing and validations
The concept design was tested by the target users. Gathering and analyzing verbal and non-verbal feedback from the user helped in creating a better user experience.
Live Chat Implementation
Live chat helped students in the real time to sort out any technical problem. Many other instant queries were answered leaving the students with a delightful user experience.
Layout for the Mobile Environment
Design Considerations for the Mobile Web
Minimize the levels of navigation involved
Offer short-key access to different features
Ensure labelling is clear and concise for navigation
Minimizing inputs in forms
Allowing permanent sign in
Reducing the numbers of embedded images to a minimum (speeding up load times)
Project Outcome
The final prototype was appreciated by the client. He was very pleased to see the execution in such a short period of time. His statement "I never expected this quality output in such a short amount of time." made me feel like another achievement in my UX journey.
bottom of page