![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654286a097f4715765b2c654_backpack%20cover.png)
Uppsala University students from the Social Science Department were not satisfied with the process of selecting and applying for elective courses.
The courses were sent to students just one month before the application deadline. Students had to navigate a complex nation-wide application portal for course selection.
Additionally, course presentations lacked clarity, leading to student frustration. The challenge was to streamline course selection, enhance efficiency, and ultimately improve student satisfaction.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555d446dc16fcac8194757c_email-design.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa841c2ebf709d95859af_Theory%20(1).png)
Design a new student portal to improve student satisfaction in selecting courses.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555d3e420c295a71718154a_searchalerts.gif)
For this project a user-centered design methodology was followed. The focus was on understanding the whole context and this is why both students and teachers were interviewed as well the differnt type of students, who might have different needs. A system was designed based on our findings and tested and improved based on the tests.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa59d40a8a658911db32b_methodology.png)
One useful way of differentiating between the different explanation needs is based on the types of questions users might want to ask the model.
In the domain of context-aware computing, the following types of questions are defined:
Input, Output, What, Why, Why Not, How, What If, How to, and Certainty
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555d24228cf849cc792b9ee_A1-final-yellow.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555d235bce57bcb3f4a6e18_B-gif-yellow.gif)
Course administrators were interviews in order to understand the current course selection process better and why it was designed this way. Information from students on the other hand was collected with mixed methods - surveys, interviews and focus groups.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa37e2029308a6d11f8e1_Data%20Gathering.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cf168b0539c353059157_social-gif.gif)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cf56991b0c2ee95eb7b7_social-post-adventure1.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cf894a11ec9bb624c2cc_social-post-adventure2.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cf9a11506bcbbe5cdb63_social-post-apply1.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cfd5ed7999bb4a89d645_social-post-apply2.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cfe3f503dc33904f030b_social-post-apply3.png)
The results from the survey showed that students do not feel well informed during the course selection experience and they tend to seek additional resources for decision-making such as talking to seniors and classmates and contacting course teachers.
Moreover, the criteria students considered most important were career goals, relevancy and interest in the subject, while the difficulty of the course and the lecturer were not considered a priority. Three student personas were created based on the differences found among students. Some were ‘maximisers’ worried about not making the best choices about their studies and always going the extra mile, while others were ‘satisficers’ who chose on gut feeling.
Moreover, fee-paying status also distinctly separated student opinions. An inductive thematic analysis was performed on both the student and staff interviews. The most common themes that emerged can be seen in the images below.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa575f6654b9490115df6_Thematic%20Analysis%20Students-1.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa5763f31abb303b07a33_Thematic%20Analysis%20Students.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa576e8e7fdddfdd73eca_Thematic%20Analysis%20uni%20staff.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa57b5d8356f96db9f212_Personas.png)
The MoSCoW method was used to prioritize the extensive list of user requirements derived during the data gathering phase.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65561d51be6ac0eb9ccd1be3_info.png)
Illustrations of Rotterdam hotspots to be used in promotional materials about living in Rotterdam.
Tools:
Illustrator
As the application had to include many different pages and functionalities before designing we decided to organize all the information we had to represent in a Sitemap. This was very valuable for the low-fidelity prototype design, which included all pages of the sitemap.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65561ef1dc16fcac81c9fa89_rotterdamhotspots.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa57f729040d7cd958dad_Requirements.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6554bd0490a4508b98ddef2d_Bontouch%20Case%20-%20Frame%201.jpg)
When the team had a clear idea of the requirements, we had a face-to-face brainstorming session which resulted in many ideas of how to solve the students' problems and many whiteboard sketches. At this stage, we also started thinking about the site map.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa770c2ebf709d957e34d_main%20ideas.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa7d7ecb3359349d79b53_Sketching.png)
Low-fi prototype
As the application had to include many different pages and functionalities before designing we decided to organize all the information we had to represent in a Sitemap. This was very valuable for the low-fidelity prototype design, which included all pages of the sitemap.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa67e5d8356f96dbab854_Screenshot%202023-11-11%20at%2018.06.09.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fab2d7db9aa282ccd400d_lofi.png)
Improvements
4 usability tests were conducted to evaluate the first prototype’s usability and clarity.
Afterwards, the prototype was improved based on the findings. Some of the issues spotted during the usability tests are described below together with their improvements.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65521d71701c9b961c0f4d7f_Screenshot%202023-11-13%20at%2013.58.03.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65521e9acc95bd4a6ed8a7e8_improv%20xsens.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65521d71701c9b961c0f4d7f_Screenshot%202023-11-13%20at%2013.58.03.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65521e9acc95bd4a6ed8a7e8_improv%20xsens.png)
A simple design system was created to ensure consistency and speed up the high-fidelity design process.
You can access the design system from here.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65523b304cf781be335ef130_Screenshot%202023-11-06%20at%2020.20%201%20(1).png)
The high-fidelity design was created in Figma. It showcased all the features of the app. You can interact with the prototype here
Once the web page was live click map and heatmap analysis could be made as all animations were now running smoothly and all interactions worked as expected.
Tobii eye tracker was used in another set of user tests in order to be find out which elements on the page attract the most attention and which are missed and see if we could use this information to optimise the page further in the future. A heatmap was generated based on the results.
Moreover, a clickmap was extracted from Hotjar which showed us where do users clicked the most on the live page.
Usual scenario
Unsual scenario
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/654e59bbbd8b2e43ea0e9afc_Page%2050.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/654e59bbbd8b2e43ea0e9afc_Page%2050.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/654e59c5a752cd0edd3847f0_Page%2051.png)
5 usability tests were conducted with students to evaluate the prototype’s usability and clarity. The full usability report can be seen here.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/654fa7ffe8e7fdddfdd8d482_Usability%20Testing.png)
Improvements were made based on the major issues found during the usability tests. Some are mentioned below.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65523dccf9c49f21ac28ef92_Screenshot%202023-11-13%20at%2016.15.57.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65523dcdabbf6e706724ed7d_Screenshot%202023-11-13%20at%2016.15.44.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65523dcc7eef6d2dcff7f317_Screenshot%202023-11-13%20at%2016.15.28.png)