Opportunity Network Portal Design

Overview

Redesigned student portal website for Opportunity Network, a New York City based, non-profit organization that improves college matching and career development for low income students.

Scope

Website Design

Team

Chelsea Michaelis
Leo Sumulong
Tenzin Yangkyi

my Role

Researcher
UX Strategist
UI Designer

Background

Opportunity Network levels the playing field for historically underrepresented students by providing access to college, career opportunities, and professional networks. OppNet emphasizes career preparation to lead students to progress and graduate from college and achieve long-term success.

Brief

Opportunity Network had recently launched their College Success Student Portal (CSSP), a new platform meant to serve as a space for College Fellows to maintain access to resources offered by OppNet, and with the goal of enhancing various touchpoints with students throughout the year. At the time, the existing platform was considered to be incomplete because the site only included courses. Our team was tasked with strategically designing and incorporating new features, as well as optimizing the portal's user experience for students.

Research

User
Interviews

Heuristic
Analysis

Usability
Testing

Comparative
Analysis

Synthesis

The first step we took was to familiarize ourselves with the existing, partially completed portal. We followed up by performing usability testing and heuristic analysis.

Next, we sat down with the client to explore various touchpoints that take place between the students and OppNet staff. We then surveyed their communication methods and the resources that should be made available to students. We also interviewed OppNet students with the goal of learning about their relevant values, current school habits as it related to technology and overall experience with OppNet.

Additonally, we reviewed comparable platforms for education, courses, and assignments, including those that our interviewees frequently used.

Here's what we learned:

TOOLS

Students often used digital tools for school, such as Khan Academy, Canvas, Google Classroom, and Blackboard.

DESKTOP

Although students often had these apps for school on their phone, they preferred using desktop for school related tasks.

COMMUNICATION

Students valued easy contact and communication with Opportunity Network staff and other OppNet fellows. They place a high priority on the ability to network with OppNet alumni working in their fields of study.

EMAIL

Although email was the students' preferred method of communication, they found the frequent back and forth emailing with OppNet staff, regarding assignments and scheduling, to be excessive. Additionally, students often received OppNet emails unrelated to them. For example, they often received mass reminder updates for assignments they already completed.

tracking

Students felt they were unable to easily track OppNet assignments, announcements, and events. Overall, students found OppNet's current system of emails containing mass amounts of content to be taxing. This resulted in students worrying that they may have missed an assignment.

In school, students liked knowing the amount of time left before a task is due, as well as its completion status. Additionally, students preferred to keep track of tasks via to-do lists, their digital calendar, and reminders.

resources

The client wanted the portal to be the go-to for all relevant resources.

Students also mentioned they found OppNet's resources to be scattered and difficult to find. They expressed interest in richer career prep resources.

Personas

We developed two personas based on our research. Sophia, an OppNet college freshman, is the primary persona, while Devin, an OppNet college senior, is the secondary persona.

SOPHIA

College Freshman

"Going to college is really important for me. I'm the first in my family."

Bio

Sophia is 18 years old and from the Bronx. She is first generation in her family to go to college. She's currently a freshman at NYU studying Computer Science.

BEHAVIORS & HABITS

Sophia stays organized with online to-do lists. She tries to meet as many people as possible through school to make friends. She frequently uses email, Google Classroom, and Canvas for school.

Pain Points

Missing task deadlines because she didn’t know something was due

Feels she cannot go to her parents for college and career related resources and advice

Needs

Easy communication with OppNet staff for frequent questions and scheduling

Stay organized with tasks. The ability to quickly, easily view upcoming task, when they are due, and their status of completion. Needs to receive reminders about task deadlines

The ability to easily connect with other OppNet students to build her community

DEVIN

College Senior

"It's nice having everything I need to do for school all in one place."

Bio

Devin is 21 years old and from Brooklyn. Devin is a first generation college student. He is currently a senior at University of Pennsylvania and studying Management.

BEHAVIORS & HABITS

Devin goes to alumni networking events hosted by his college. He participates in the OppNet Mentorship program. Devin relies on multiple platforms for school to stay organized, including email, Blackboard, Google Classroom, and Google Calendar.

Pain Points

Email blast overload with irrelevant information

Time management juggling between school, professional and personal life.

Needs

Digitized reference for assignments in central location

Build a strong professional network to draw upon beyond college

Begin post-college career planning and find internship for his last semester relevant to his major and interests

Problem Refined

OppNet college students felt there was a lack of deep content on the portal and wanted further information beyond what the courses currently provided. Students primarily communicated with OppNet via email, including exchanging resources, assignments, announcements and events, as well as completing required touchpoint throughout the year. For OppNet, email alone proved to be an inefficient means of organization for students.

How might we improve OppNet communication, tracking, and educational experience for students in a manner that is personally relevant to them?

Design

Information
Architecture

Ideation

Wireframe

Usability Testing

Iteration

Prototype

Prioritization

With Sophia, Devin, and our research findings in mind, we set out to redesign the portal. We knew we needed to design this portal to be a personalized experience that serves as a centralized hub housing all relevant OppNet resources, while optimizing touchpoints, tasks, and communication.

Since students prefer using their laptops for school related tasks, we chose to begin by building for desktop. In creating our designs, we considered the layout, features, and functionality of similar digital platforms, including Khan Academy, Canvas, Google Classroom, and Blackboard. As a team, we ideated and prioritized features, followed by sketching out our screens.

Information Architecture

OppNet's existing portal solely contained a Courses section. We took stock of all staff/student touchpoints and relevant resources available, then organized them into four major categories that make up the global navigation - Dashboard, Courses, Internship, and Community.

navigation

Dashboard

Courses

Internships

Community

REDESIGNED site map

Task Scenarios & Ideation

We designed for seven tasks, while considering the most relevant personas for each. We later tested each of these tasks in usability testing with students.

SOPHIA

1. Sophia logs onto OppNet's portal to check her task status. She discovers her RSVP to the Winter Conference is past due. She cannot attend this year, therefore she RSVP's "not attending".

2. Once completed, she sees an upcoming task on her calendar and wants to confirm that she will be receiving reminders closer to the task due date.

3. She will need to complete online courses in lieu of attending the conference. She check the status of her course completion.

4. Sophia is trying to expand her in-college network. She wants to apply to be a mentee through OppNet, as well as reach out to OppNet students that attend her college.

DEVIN

5. Devin's final semester is rapidly approaching. In order to receive course credit, he needs to find a internship opportunity related to his Management major.

6. Once he finds an internship opportunity he's interested in through OppNet's portal, he needs to find a resume template to start the application process.

7. In order to increase his chances of landing an internship, Devin wants to network with working professionals. He looks to OppNet to find alumni he can reach out to, whom also studied Management.

I started designing for these tasks by brainstorming and sketching out my ideas on paper, then moved to Sketch for mid-fidelity wireframes, two rounds of testing and iterations, and a hi-fidelity prototype.

High-Fidelity Screens

Dashboard Section

We saw an opportunity for improved communication efficiency on both the staff and student end. Rather than rely on email for tasks, we brought them into the portal in the form of a personalized task to-do list. Here a logged-in student could view their upcoming tasks, completion status, and due dates. This all lives on a home page dashboard, which also populates the latest announcements and events.

Settings Page

If an assignment has yet to be completed, students receive email reminders by default 24 hours before an assignment is due. These setting can be controlled under their profile.

Courses Section

Here students can access courses offered by Opportunity Network. We revamped the existing course page UI and functionality based on testing of the previous site.

When students logged into the previous portal, they were presented with courses categorized by college year, conference, and category theme. In usability testing, users felt unsure of where they were in terms of hierarchy and were unclear on what steps to take. Continuing with the theme of personalization, we decided to nix the college years (since we already know the student's college level through their profile details) and only present them with the most recent conference videos and lesson categories. On the previous portal, students found the category themes to be a bit long and ambiguous, therefore we tightened up the wording, making them more concise.

In usability testing of the original site, students liked the color categorization, but our feedback and heuristics found there were some potential readability issues. We decided to incorporate the color coding into an updated UI design, which enhanced readability using color coordinated cards and tabs.

In original portal testing, users also tended to miss or spend a great deal of time searching for the completion status for each lesson. We designed a more prominent progress bar, letting them know exactly how deep they are into a lesson.

Internships Section

Where students can seek out internship opportunities through OppNet partners, as well as access materials on preparing for the interview process and recommended external resources.

Community Section

Previously, students did not have an easily accessible database of fellows and alumni at their disposal, therefore we decided to include a searchable, sortable list of these contacts. This includes relevant details such as contact information, university attend(ed) and area of study.

We also provided a section where students could learn about and apply to become a mentor or mentee.

Redesign Feedback

Students greatly appreciated the organization of resources. They found the new Courses sections much less confusing. Students appreciated the ease of contacting other students and alumni based on their schools and areas of study. The highlight reaction across the board was the overwhelming thrill with the task status and completion section.

"This is so much simpler than having to go back through my email"
"I'm really impressed because makes it easier to find everything.
I think it's amazing!"

Prototype

KAREN CHRISTOPH © 2018