Portfolio #4 — Master in HCI Website
Bringing new students to our master
OBJECTIVE
“How can we attract future Master Students for the course in Human Computer Interaction?”
This was the question that our professor posed to us, with the task of creating and presenting a mid-fidelity prototype which would answer to this question. After defining the requirements of our website, we focused on the functionality and on the design aspects of the website. The result is a website concept, which is aimed at fulfilling student requirements (getting information about courses, living in Trento, etc.) and at the same time celebrating user-centered design as a field. The fully interactive prototype can be viewed here.
Our prototype came second in the final class challenge!
APPROACH
Following the direction of our User-Centered Design professor, we went from an initial analysis of requirements to iterations on our mid-fidelity prototype. Wanting to always have our users in mind, we took advantage of surveys and user testing.
MY ROLE
In this project, I was involved equally as my classmates in all of the project phases. My tasks included: project presentation — persona and wireframe creation — user research — prototyping — user testing.
MY TEAM MEMBERS
Prithula Hossain — Samuel Giacomelli
DURATION
February 2017 — June 2017
THE PROBLEM
The website of our University is often criticised for poor usability and efficacy. For this reason, our professor asked us to create a new website which would best attract prospective students.
THE PROCESS
As indicated by our professor, the steps of our project were:
- Quality metrics evaluation: in this phase, we decided that we wanted our artifact to be attractive, informative, effective, multicultural, accessible and auto-celebrative. For this reason, we decided to create a website so that any prospective student with an internet connection could be able to access it.
- Requirements: listing down all the elements that our website needed to have helped us define its different sections and content.
- PACT Analysis: this excercise helped us further define our target users, the activities they would perform on the website, the context in which they would operate and the technologies needed to create the artifact.
- Storyboard plan: to help us better understand the users, we created two personas with two different paths. This helped us realise which requirements should be prioritised. We then created some first basic wireframes of the website pages.
- Design critique: during a session with our classmates, we decided to ditch 2 ideas we had for our website (a chatbot guide and a 360° video of the campus) and started iterating on our wireframes.
- Survey: we ran a survey on our target users; this way, we understood better the key information they needed displayed and discovered that they did not wish for a feature we wanted to add, a video of a student’s daily life on campus.
THE PROTOTYPE
Using Adobe Experience Design, we went through several iterations of our website, until we reached a version that we wanted to test with our users. The website has a scrollable first page with key information about the course, and provides several other information (e.g. courses, departments, job offers, alumni). Moreover, the style of the homepage, with paper-style components, aims at recalling and celebrating the design process. The final interactive version can be seen here.
USER TESTING
After the prototype was ready, we tested it with 5 students at out department. They had to complete 9 short tasks, during which we kept track of the time for completion and asked them to think out loud while interacting with the prototype.
The testing was very useful, in particular because it made us realise that the “discover” button in the home page did not look clickable as we thought and therefore hid some of the information about the course. Moreover, if we were to go forward with the project, we would enhance it with storytelling and enhanced UI animations and visuals to improve the overall experience of the user.
