![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F8409a316-b63a-4031-af61-2c95f0c6c9af%2Fa1e98e62-bcbf-48b0-903b-a4ed09ed02af%2F33shots_so.png?table=block&id=c6695b53-7448-42da-9a69-bbe952479a6b&cache=v2)
Project Overview
As part of my psychology BA studies and UX major, I participated in the UX design for complex systems course, and StudyHub is my team's project - we decided to improve our prior existing student portal.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3460cf3b-8f3b-4562-8675-6e13df97a0dc%2F631c730794d7ef66590be8fa_1552247898266_1.png?table=block&id=366f4f89-7192-46c8-9787-eecc6a8d3e81&cache=v2)
Yulia Goldenberg, Ph.D.
Lecturer@The Academic College of Tel Aviv-Jaffa.
“Not only was this project great, but the teamwork behind it was excellent! This is an excellent interface. I wish it was widely available.”
Defining The Challenge
The Problem
The college's current student portal is inconvenient and unclear, making it hard for students to access information and assignments.
System Goals
- Integrate existing college systems so the students can perform actions and receive info in a fast and accessible way.
- Improving the user satisfaction survey score.
- Increasing the percentage of system logins.
- Reducing performing actions time.
- Reducing unnecessary communication with technical support.
- Reducing user error percentage in the system.
KPIs
- Reduce lecture information search time to under 1 minute.
- Decrease presentation/document download time to less than 1 minute.
- Minimize submission time for works and exercises to under 1 minute.
- Increase average system satisfaction to above 4 out of 5.
Competitors Analysis
We examined our current competitors, which are similar systems being used in different institutions, and compiled a list of pros and cons:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3aa6dec9-8955-4145-91d2-f475df0ffe05%2FUntitled.png?table=block&id=00575c35-a8d8-47a2-babf-ff28805b5eba&cache=v2)
Pros
- Accessible lectures contact info.
- Calendar with relevant and contextual info.
- Accessible files per class and time.
Cons
- Irrelevant info & actions are located in key system locations.
- Irrelevant info & actions for different types of users- such as students and lecturers.
- Bad use of UI and layout.
User Research
In order to get inspire, explore and choose directions and opportunities, we committed the following qualitative and quantitative methods.
- User feedback - 50 students: Self-reported, open-ended, and close-ended information provided by a sample of users (students) through an online questionnaire.
- Interviews - 5 students : Conducted interviews with potential students to discuss in depth what the participant thinks about the topic in question.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2bc73fe2-a433-404c-a8ab-358ee933bf52%2FUntitled.png?table=block&id=eca916a7-3316-4938-916d-61fb48232c2a&cache=v2)
Task Analysis
Following the user interviews and user feedback, we converted the data into a task analysis format. As a result, we will have the bottom-line prioritization of all of the data items and actions our users will perform on the new platform we will provide.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5243ea2c-b052-49b6-bdde-be7ecbc99e0c%2FUntitled.png?table=block&id=6e67050d-ebc5-468c-bbf4-b89ada00ef09&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa9757f01-b5ac-4c99-81c5-0a69d50eedc4%2FUntitled.png?table=block&id=fc2d4c77-1e1b-4e90-a624-19f61bd66338&cache=v2)
User Requirements
Information
- Dates of assignments
- Daily calendar
- Test and exams dates
- Messages from lecturer
- Tests from previous years
Actions
- Works and exercises submission
- Download & viewing presentations
- Ordering documents & certificates
- Courses registration
- Payment of tuition
Concept 01
Action Flow-Downloading a presentation file of a certain course
![notion image](https://www.notion.so/image/https%3A%2F%2Fuploads-ssl.webflow.com%2F617cef693949268b6536e530%2F632f3692721a286cf0fde02e_UX%2520design%2520for%2520complex%2520systems%2520-%2520Study%2520Hub%25201-min.png?table=block&id=f26e14f8-2589-4148-a2bb-f6ad515ac3c8&cache=v2)
References
College of Management Academic
- Each course displayed presenting vital info.
- Hierarchy of information is logical and intuitive.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F8409a316-b63a-4031-af61-2c95f0c6c9af%2Fed717352-3ed6-4179-9cd1-f8257724eae2%2F632f37316f7c924cab4f4cdf_Screen_Shot_2022-09-24_at_19.58.15.png?table=block&id=5a0fe9b0-5e7c-48fe-9335-ccda5886abde&cache=v2)
Hadassah Academic College
- Courses layout clear and efficient.
- Consistent content throughout courses.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F8409a316-b63a-4031-af61-2c95f0c6c9af%2F39858f16-767c-45f7-91fb-22c7883179fe%2F632f374b6f7c928c4c4f4e94_Screen_Shot_2022-09-24_at_19.58.42.png?table=block&id=2f0d251e-27e8-45df-80bd-0d952d3e1347&cache=v2)
Wireframe
![notion image](https://www.notion.so/image/https%3A%2F%2Fuploads-ssl.webflow.com%2F617cef693949268b6536e530%2F63306618fc80c85a97124c52_Slide%252016_9%2520-%252017-min.png?table=block&id=c9197cc4-8647-451f-8ae3-7a7e8f13891b&cache=v2)
Pros
- Most relevant information is displayed.
- Match between the system and the real world.
- The simple layout is easy to scan and is understandable.
Cons
- The visual layout may be too simple/cute.
- Lack of student's personal information - year, school, grades
Concept 02
Action Flow- Submission of assignments and exercises
![notion image](https://www.notion.so/image/https%3A%2F%2Fuploads-ssl.webflow.com%2F617cef693949268b6536e530%2F632f3b8cff3a7423551f1427_Screen%2520Shot%25202022-09-24%2520at%252020.16.36-min.png?table=block&id=f70b462c-ea30-4cb3-9c37-237b2537b916&cache=v2)
References
- Clean, flat & modern dashboard UI.
- Clear hierarchy, profile area.
- Simple, easy to scan, and understandable layout.
- System search bar, accessible support.
![notion image](https://www.notion.so/image/https%3A%2F%2Fuploads-ssl.webflow.com%2F617cef693949268b6536e530%2F632f3bf36a1371bd6120f314_Screen%2520Shot%25202022-09-24%2520at%252020.18.09-min.png?table=block&id=5cd5943a-5973-42f3-ba96-3f158308e63c&cache=v2)
Wireframe
![notion image](https://www.notion.so/image/https%3A%2F%2Fuploads-ssl.webflow.com%2F617cef693949268b6536e530%2F633066244a0d2f8f8e7967b0_Slide%252016_9%2520-%252018-min.png?table=block&id=f6ed57a9-b0fc-46c3-aef3-24d03d58b5ce&cache=v2)
Pros
- Information dashboard display
- Search bar efficiency
- Outlined important actions (such as registering for new courses)
Cons
- Can cause cognitive overload
- Can cause orientation confusion
- Can take time to adjust
Concepts conclusion
Our classmates and lecturer reviewed both concepts and offered their feedback.
As a result of both concepts, we then designed the final version based on the features and layouts that were most popular with the users. Check out the demo prototype of the final concept :
Main Challangens
Methodological Approaches and Research
- We published a quantitative questionnaire with plenty of specific info for our participants, which may have led to form abandonment. To prevent this, we opted for scaling all user experience questions from 1 to 4 (vs. open-ended questions) to avoid burnout.
- The scaling wasn’t accidental. We decided to analyze our findings through an even scale based on methodological research methods, due to the fact that an odd scale can lead to ambiguous results when participants are filling in the ‘middle’ answer. Put simply, we allowed our participants to choose an answer that leans towards one end.
- On the qualitative research, when we started the competitor’s research so we can understand what student systems are on the market, we didn’t have enough knowledge about the system’s backend, and this gap led us to conduct qualitative research with our campuses online support team, to discover and research ‘Moodle’ system, which led us to the finding that it is used by all of the universities in Israel.
Design and UCD
- When we designed our final concepts, we had to decide how to present the courses that are taking place on the same day within the homepage screen. We thought maybe we could present different pictures for each course to differentiate between them, but after some research, we decided to apply the ‘Aesthetic and minimalist design’ heuristic and have each presented with its title and a unique color gradient.
- An issue that was brought forward at the peer review was the high cognitive load - too many details. We wanted to reduce cognitive load when viewing the homepage, and therefore we allowed users to see which tasks, exams, and other to-do’s they have by adding a small indication number at the title. this principle is based on ‘Visibility of System Status’ - the user knows at a moment glance what else he needs to accomplish, without being overwhelmed by information.
Next Steps
Out-of-scope questions in the current process that require further consideration
- Convert the final design to work on both mobile and tablet devices.
- Create full user fellows for all the actions and screens in the system.
- Define further KPIs for more features.
- A-B testing for main screens and features.
- Create a system for a lecturer profile.
- Present and collect feedback from more stakeholders.
Thanks to my wonderful team, I learned a lot working with you: Omer Aviram, Nimrod Sagisman, Noya Ariel Dana Sergeev.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fbde7945c-78f2-4563-bd3d-4c1b36c73a5e%2FUntitled.png?table=block&id=fe4766fd-724a-42c7-bb46-f2dee02ec8c7&cache=v2)