This project was done by a 4 member team while I was in the first term of my master program. I contribution lies in user interviews and wireframes
Our team is responsible for redesigning the Golestan website, an Iranian university portal where students check their academic records, access and request academic transcripts, and enroll in university courses. The current site is out-of-date and hard to navigate, creating a bad user experience. We gained many insights from our user interviews that we will be keeping in mind as we move into the prototyping process.
The main insight from our 8 interviews was that students found their academic portals cluttered and confusing to navigate. While the tasks they were looking to perform on the site were relatively simple (e.g., looking up a grade, finding a course schedule, or printing out a transcript), they had to click many links to reach their end task. The steps to achieve that end goal had to be memorized because the navigation was unintuitive and illogical. There were also many links on the main page that students never used, which made finding what they wanted even more visually challenging.
Our primary goal in this re-design is to visually simplify the Golestan portal so that students can easily navigate the website to find their academic and course information. While we are not removing any of the actual data available, we are re-organizing the data so that users felt in control of their experience. Since every student’s needs may be slightly different, we wanted to create a main page that could be customizable, allowing them to save time when visiting the site by reducing the number of clicks necessary to get the information that is most relevant to them.
Our biggest challenge is that the portal contains so much information. While we want to keep the website simple, minimalistic, and easy to navigate, we cannot reduce the amount of data that needs to be shared on the portal in a situation like this, clear organization is critical to creating a practical experience for the user.
As a starting point, we broke down the website into five main categories: Course Information, Academic Information, Financial Information, Communications, and Student Life. From here, we strategically re-organized the navigational menu to contain the proper pages and appropriate submenus.
We also thought carefully about what was most important for students on the landing page and how it could be a customizable experience. We added a top menu that included a student profile, notifications, and email. We determined that the default Overview page could have interchangeable ‘widgets’ so that the user could choose the most relevant information for them the first thing they see after log-in.
Finally, we decided our user journey would be from logging in to printing out their unofficial transcript, and we planned our wireframes to take us through that part of the website (see blue steps in the outline below).
Based on our structural outline, we moved forward with our wireframing. We used Balsamiq to create our UI - trying a few different options to get a structural look that felt right for the portal.
Considerations
In this stage, we tried to visualize the whole website’s structure including layout and navigation. We focused on how to make it easy for students to navigate through different content. Because wireframing was a quick way to get out our ideas, and because we didn’t need to think too hard about visual aesthetics, it served as an effective tool to communicate with each other. The layout and menus of these rough wireframes are not exactly the same as the final UI but show our initial thought about designing the user experience.