The one-stop shop
The iD Portal
Parents need one place to manage, schedule, and view the progress of their child’s Pathway at iD Tech. Concurrently, the student needs to be able to view their available courses, past courses, and easily access their courses.
Role: Lead Designer • UX/UI
Cross-functional partners: ENG, PM, Data Analytics, Customer Service, Marketing/Creative
Goals of the project: Improve the UX/UI of My Account for the parent and student so they can efficiently accomplish multiple tasks and on the business end, offer eCommerce personalization.
Project status: The Student Portal is currently in production.
Parents have a difficult time trying to manage multiple students
THE PROBLEM
The current experience lacked the ability to see an overview of each student’s current courses and everything was a bit hidden within containers with a disconnect between which program/course is associated with each student.
At times, a parent might have multiple students enrolled in different programs so trying to manage/modify their schedule was a daunting task.
Overall, My Account needed some better organization and an easier flow going from the parent view to the student view.
Current My Account Page
Obtaining qualitative data through user interviews
DESIGN PROCESS: INITIAL USER INSIGHT
User interviews and receiving direct feedback from users was helpful when making design decisions for the Portal.
Here are some initial, recurring user feedback:
Parents wanted an “At-a-glance’ view of their child’s progress at iD Tech
Parents had a difficult time trying to find the zoom link to their child’s Online Private Lessons
Parents needed a better distinction between which program their student was enrolled in
Students often got lost during an online lesson because they were toggling between 3 screens, and at times, they lost the main lesson zoom window during a lesson
Students needed more incentive to progress within a course/iD Pathway
Current UI has information hidden within expanders making it difficult to access content.
“The ZOOM window gets hidden at times, and it’s hard to find it.”
“I would love to send a reminder to my teenager with their course time.”
“Dark mode would be so sweet!”
“I would like to clearly see my kids’ upcoming lessons and a calendar view might be nice.”
Mapping out user interactions
DESIGN PROCESS: THE FLOW
The parent is responsible for overseeing their child’s camp experience so we needed to make sure the parent has full access to all the pages necessary, while the student was limited to which pages they could interact with.
During an online instruction, the student has to toggle between 3 screens i.e., the ZOOM window, Game Plan (Course lesson), Design App so to solve for one of the student’s pain points, we combined the ZOOM and Game Plan windows into one view.
Wireframes
DESIGN PROCESS: SKETCH IDEAS
UI Design for the Student Portal
DESIGN PROCESS: INITIAL DESIGN COMPS
This was the initial design, which contained a lot of concepts to demonstrate all the features/possibilities to the stakeholders. After a few rounds of iterations and stakeholder feedback, a few of these features were left out intentionally because they didn’t align well with the current business goals. It’s nice to show the stakeholders what some of the possibilities, along with the UI design/animations.
UI Design for the Parent Portal
DESIGN PROCESS: INITIAL DESIGN COMPS
Just some early explorations to show the evolution of the dashboard design. I experimented with organizing the students’ content in rows vs. columns/cards and played around a bit with the visual hierarchy. The leaderboard was an initial idea to create FOMO and help encourage parents/students to enroll in a course.
I suggested surfacing some “Recommended courses” in the calendar view so the user is aware of certain courses that they have not known about that fits into their child’s schedule, as well as benefiting their learning experience at iD Tech. This in turn, benefits the company with more revenue.
DESIGN PROCESS: FINAL DESIGNS TO ALIGN WITH USER GOALS/BUSINESS OBJECTIVES
Shipped Design Solutions
Business/stakeholder goals are always in flux and we needed to stay focused on the immediate priorities for both the user and business.
In order to ship this product in a timely manner, we scaled back and simplified the design of the Parent Portal to have two main tabs: “My Students” and “My Schedule”. In the students view, the active card/student will display the upcoming courses below and the schedule tab will display all of the scheduled courses in a calendar view.
We also dramatically simplified the design of the Student Portal into an “MVP” that contained the minimal set of features to benefit the student.
The main goal was to get the student to their lesson and ensure they are able to join their ZOOM meeting and after class, have the ability to go back and view the course lesson.
Students can also view their achievements and get a quick count of their digital tickets in the top-right header. This is a very important component of incentivized learning because it keeps the students motivated to succeed in class and continue earning more digital tickets.