MySCAD Student Portal design
MySCAD Student Portal Redesign is a completed, multi-perspective approach to a UI design practice.
MySCAD is an internal portal for SCAD students and staff to handle online tasks such as, paying tuition, viewing grade, submitting essays and making appointments with advisors.
The portal (as of early 2014, when this challenge was presented to me) had two outstanding complaints:
1. Overwhelming information:
Students have complained about information not being categorized in an understandable order, thus making navigation unnecessarily difficult.
2. No visual hierarchy on the site's design to help prioritize information.
I myself agreed with the complaints and decided to start a research focusing on user interviews and verifying the problem.
By doing so, I expected the outcome would provide quantitative data to support my design approach.
This is an individual project that was completed owned and created by me as a course project directed by Prof. Michael Felix. I owned and built the end-to-end experience playing multiple roles.
- UX Researcher of contextual research, user interview and analysis
- Designer and art director who is responsible of wireframes, prototypes, UI design and visual language
- Project manager & owner that tracks progress, manages timeline and reported back to the professor.
| The Process
Since the portal is a complex yet function-based platform which links a various types of online services, I decided to start from finding out pain points from the users, and then analyze the reason to generate insights, then evaluate my possible options and solutions.
| Card-Sorting - the IA approach
I went through the portal and wrote every link out and color-coded them according to the original category they were under.
Then I used the card-sorting approach, a typical methodology typically adopted by Information Architects. I did several rounds of card-sorting, trying with different ways of categorizing to find out certain pattern.
| User Research and Interview
I interviewed users of various levels of familiarity of the system, to gauge if the system is a), easy to be learned through advanced experience; b) what baffles users the most, both to experienced users and new users.
With that in mind, I interviewed 3 students, one is a senior, one is a junior, one is a first-year graduate student.
Having taking out the jargons and by using simplified, universally-understandable copies, I was able to re-categorize all the functions from fragmented, scattered individual links into five new first-tier categories:
"Academic Resources", "Career Resources", "Financial Service", "Administrative Service" and "Library". Then I used flat, pastel colors to label the categories into 3 types: Resources, Service, and Library, which is a stand-alone third-party system that operates on a separate platform.
In the hindsight
Back in 2014 when flat design just became popular, there were nostalgics in the design community about realistic styling. I can't say that my style choice wasn't impacted by the trend. But it has proved to be one of the most efficient design approaches in terms of presenting information with hierarchy, readability and clarity, while still maintains visually appealing.
This redesign with improved copy, color-coding, system infrastructure and visual interface was welcomed and liked by fellow students and professors in later usability tests.
Please enjoy some final deliverables here