Our Challenge
The UVic MyPage is the home page given to all students attending UVic. MyPage is a site where one can access personal information pertaining to UVic such as timetables, tuition, and tax forms.
Unfortunately, the UVic MyPage is also a cluttered mess. There is too much extraneous information, and there is no organizational flow. It can often be frustrating locating small pieces of information on the site. With that in mind, we saw the potential to make a simplified and structured UVic student home page. We wanted the home page to be a place where one could find information easily and efficiently.
User Research
To help guide our design process our team observed users in a controlled environment to collect qualitative data on how UVic students interact with the current UVic web services, in particular, MyPage and Student Services. After some brief background questions we asked the students to perform a number of common tasks using the UVic web services.
Our user research yielded some interesting trends,
- Calling In
-
If unable to find the information they needed in their web services, many users fell back to calling the department in question.
- Timetable
Most users can find their timetable but wish it was easier to interact with.
- Proof of Enrollment
-
Many users think that their administrative transcript it the closest thing to a proof of enrolment available from the web services.
- OneCard
-
Almost all users resort to the search functionality to find their OneCard information.
Our Solution
We hoped to improve the navigability and the usability of the UVic web services through consistent branding, user centered design and thoughtful information hierarchies.
Our Personas and Scenarios
We developed two personas to help guide our design. The two personas we chose were a junior student, Daniel, who had just started at UVic and a senior student, Amy, who was in her third year.
Daniel Lévesque
Junior Student
Daniel is a smart, caring, but cautious man from Houston, Texas. He caries forth his southern hospitality to everyone he meets, making him an easy man to get along with. In high school he was involved with the students' council, took info tech courses, and spent most of his time doing woodwork.
Amy Bailey
Senior Student
Amy is an artistic 23 year old girl from Fredricton, New Brunswick. After graduating from high school she spent a year travelling. She fell in love with the many stories of people she met. Inspired by this, Amy set out to capture her perspective and tell stories through film.
From these personas we developed two user stories (scenarios) to be representative of common tasks that a UVic student might need to perform. We describe them below in the context of the current UVic web services to help highlight current issues.
Daniel finds his first class
It's Tuesday, Daniel has just started his first semester of classes at UVic. He needs to get to his first class, MATH 100. He finds the course on his timetable but doesn't know what DTB is. He finds out it's the David Turpin Building from the website but then someone says to "just go to SSM" and he gets confused. Not sure where his class is Daniel ends up in the David Strong Building and sits through a full hour and twenty minutes of ECON 103c.
Amy applies for Scholarships
Amy, like many other university students is starting to run out of money by her 3rd year of university. She decides to apply for a few scholarships. After spending a few hours on one of the applications, the form says to attach a copy of her "Official Transcript" and "Summary of Tuition Fees". Amy spends the rest of her night attempting to find these documents on the UVIC myPage website. Unfortunately, due to the confusing layout of the website she is unsuccessful, and unable to submit the application.
From these scenarios we derived two core use cases,
- Retrieving Information
-
Frequently UVic students require information about their, finances, grades or schedule from their web services. This use case is exemplified by both user stories.
- Submitting Information
-
UVic students also need submit information either to notify to University of something or to update personal information. This use case is shown in Amy’s user story.
Ideation and Whiteboarding
To brainstorm, our team projected the existing UVic mypage onto a whiteboard to throw around ideas of how to reorganize the existing content.
As ideas were thrown around, everyone helped by drawing out various interface they could imagine. Together, we decided on how to style the interface which helped us build our low fidelity mockups.
Singling out each feature, we decided how to categorize and lay them out.
Prototype Evolution
We solidified our whiteboard ideas into low fidelity mockups using Balsamiq. Below we can see the user flow for Amy's user story,
Amy starts by opening the UVic Website (uvic.ca) and clicks myPage.
Amy signs in using her Netlink ID and password.
Amy is redirected to her myPage which provides contextual information about her courses. Amy selects Records.
Seeing the transcripts button, Amy selects Transcripts.
Amy sees both her Unofficial Transcript and the order form for official transcripts.
Amy needs her transcripts delivered as soon as possible, so she chooses couriered and express.
Amy adds the delivery address for the scholarship committee.
Amy sees that the delivery will cost $47.00 (way too much) and switches to Regular Mail with Fax service.
Amy's satisfied with her choices and clicks Place Order.
Amy reads the summary then moves on to her tuition fees by clicking on the Finances tab.
Amy clicks Print.
Amy chooses All Semesters.
Amy prints her account summary to PDF using Chrome.
We used the built in linking tools in Balsamiq to create a fairly usable interface for initial user testing. Feedback was generally positive, one issue of note was the print button on the finances page not clearly showing that you could choose between the current semesters and all semesters. If the issue persisted we panned on possible moving the dropdown out of the button (next to it) to make it clear that options are available.
In the end only small changes were made to the high fidelity prototype with the majority of reactions being greatly increased ease of use.
To provide the most realistic prototype while still allowing flexibility, we decided to build our high fidelity prototype as a static website with mock data. In the frame below your can try following Amy's scenario on the high fidelity prototype (full version).
Validating our Design
To validate our design, we did another cycle of user testing with both previous and new participants. By following the same set of questions, we could see how both new participants found the interface, and previous participants did compared to their first round. Doing so, we gathered qualitative data which verified our hypothesis, that our interface better provided online UVic services that we found ourselves and others needing.
Moving Forward
Although we are very happy with the improvements we were able to make to the design of the UVic web services lots of work still remains.
Much of the work our team did was focused on layouts, organisation and information hierarchies, in the future it would be nice to spend some time working on the aesthetics and branding for the MyPage. Improved branding would help identify the UVic web services as a core part of the UVic infrastructure and help students know where they should go to find information about themselves as a student at UVic.
Although we managed to amalgamate and incorporate much of the functionality of the UVic web services email and coursespaces could do to be integrated more tightly into MyUVic.
Looking Back
Working on this project we learned a lot about design, information organisation and web development. In hindsight the choice to make the high fidelity prototype as a static website turned out to be a bigger time sink than expected. That being said the results are very good (if somewhat incomplete) offering a user experience very similar to what it would be on the live application.