Portal Hero Image.png

Portal

Improving the university experience through a connected student platform

 

Portal

Improving the university experience through a connected student platform

Fall 2016 - May 2017
The University of Waterloo

Role

Product Designer: UI/UX, wireframes, user research, design strategy

Team

Andrew McAlorum - Manager, Web Development & Support
Pavol Chvala - Lead Developer
Alex Struk - Web Application Developer
Joe Radman - Web Application Developer
YiFei Zhao - Web Application Developer
Laura Stickel - Student Engagement Coordinator

Overview

In September, I joined The University of Waterloo Portal team as their first designer to build a student companion app. During the design process, I discovered we needed to move beyond creating widgets to deliver information to students and took a step back to define a new product strategy. My goal is to design a system that unifies the countless resources on campus so students can stay organized and fully utilize information they never knew existed.

Discovery Phase

I began by learning about what the Portal team had already built and understanding their vision for the product. I also had many conversations with students on campus to understand what they wanted in a university companion app. I then sat down and examined the current information architecture of Portal. 

To move on from this phase, I presented a redesign proposal with key findings and introduced incorporating the university’s mantra of Work, Study, Play as building blocks to guide future development. I also shared the idea of using a calendar to aggregate various components of a student’s life. This was a starting point for us to re-evaluate how we were building Portal as a team.

Initial Information Architecture of Portal

Initial Information Architecture of Portal

 

Building an ecosystem

Card sorting was a useful activity that helped the team understand we needed to change the structure of Portal. There were overlaps in terms of what individual widgets could do and we discovered that widgets were most powerful when they were connected to one another. We began thinking about Portal as an ecosystem and became more intentional about building widgets so that they were linked to one another.

To-Do

Instead of having a separate to-do widget, it's now integrated with calendar. Students can effectively create a to-do item and schedule it at the same time.

Events Widget

Students can now directly add an event into their calendar. Within the calendar we also recommend activities for students to do. 

 

Employer Info Sessions 

Through conversations with students I found that Employer Info Sessions was one of the most popular widgets. Redesigning Employer Info Sessions was a good starting point and revealed UI elements in Portal that needed to be considered.

Pre-existing Employer Info Sessions widget

Pre-existing Employer Info Sessions widget

Fourth iteration of the widget

Fourth iteration of the widget

I created many different screens and widget iterations which lead to important design decisions around navigation, the search bar, completely redesigning the filter section and replacing the use of a star icon with a more intuitive register button. 

Final widget designs

Final widget designs

 

Calendar 

So many calendar apps already exist so why was it necessary for us to build another one? I found that while there were existing calendar apps, most people don't use them because it requires people to manually input information. The most used calendars are embedded into our existing workflow. At the workplace most of us have a system for booking meetings which takes place within the same software linked to our calendar. Meetings are automatically inputed into our calendars and our schedules are populated for us. 

Portal already has the ability to populate a student's class schedule which is a great starting point from which students can schedule their time. By understanding that the calendar is meant to help students stay organized we can begin integrating more features that centralize a student's activities for them. For example, registering for an Employer Info Session, a campus event or a yoga class within Portal will automatically appear in a student's calendar.  

 

Understanding Users

Building user personas helped our team understand who we were building for with concrete examples of real student needs and goals. I designed a set of user-interview questions and worked with Laura to conduct and record user research. We've currently completed 5 student user personas and hope to continue interviewing diverse students to discover more similarities and differences.

Key Insights from User Personas: 

  1. Students want a quick and easy way to stay informed about what's happening on campus
  2. Everyone has a unique method for organization (usually an agenda/planner) - most people struggle with organization
  3. Most students have challenges with balancing school and other aspects of their life
 

Building a visual design system

I am in the progress of defining a visual identity for Portal through building a visual design system. The system continues to grow as I design new widgets and UI elements. Taking steps towards creating a visual system reminds me to evaluate each design choice I make as part of a holistic design decision. This has also helped change the conversation at meetings and we've become more intentional about building consistent components as a team.

Next Steps

I am continuing to design and develop new features that align with our evolving strategy while researching and testing our product with students. I’m constantly finding new ways to help my team adopt and implement a more user-centered approach to how we build. Through my time at Portal, I realized I needed to shift the focus of my work to user research and introducing a new product development process to support the designs I was creating. Understanding the layers of information and pre-existing systems continue to be the key to building a new information system.