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

Lead 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

I joined The University of Waterloo Portal team as their first designer to build a student companion app. During my time there, 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 was 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 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 proposed 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. I 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, the new design integrates the feature within the calendar. Students can effectively create a to-do item and schedule it at the same time.

Events Widget

Students can 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? Through research I found that while there were existing calendar apps, most people didn't use them because it required them to manually input information. The most used calendars were the ones that were already embedded into our existing workflows. 

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

 

User Personas

I focused next on creating user personas to help my 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. 

Key Insights:

  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
 

visual design system

As I was designing the experience for the app, the need to create a visual design system happened organically. With a stronger emphasis on creating a visual design system, this helped change the conversation at meetings towards building more consistent components.

KEY LEARNINGS

Through my time at Portal, I learned the importance of user research and understanding the stakeholders and systems that are involved in a single product. Working on this app changed my approach towards product design. I realized most of the time, when people want to build apps, what they are really trying to do is put together information that had previously been siloed in order to form new connections and deliver a service that had never existed. I hope to continue designing for enterprise and discovering models that can help us build better services for people's everyday lives.