top of page
LaptopBook Pro.png

Personalized Learning 2  App

Online learning platform to support mentors teach math to students

​

​

NSF_Logo-602x563.png
logo.png
CZ_LOGO.png

Sponsored by

I redesigned the Personalized Learning 2 or PL2 platform, where this app facilitates mentors to tutor students in secondary schools by providing them with credited online resources.

​

My Role

UIUX Designer & Researcher

• Redesigned full user experience & interface

• Conducted user research to develop new features

• Improved usability with user feedback

​

Timeline

May 2019 - February 20202 t

To see the live application: 

http://personalizedlearning2.org/

​

​

Tools Used

Adobe XD

Figma

Adobe Photoshop

Adobe Illustrator

Skills

UX Research & Interviews

UIUX Prototyping

Wireframing

Lean Team Collaboration

Collaborators

Nikki G. Lobczowski,

J. Elizabeth Richey,

Ken Koedinger,

Peter Schaldenbrand,

Ariana Daly

Lesson Planning Tool

Mentors can select what teaching strategies they want to use and add it to that week's lesson plan. 

3.png
Screen Shot 2019-12-15 at 6.03.49 AM.png
LaptopBook Pro.png
Screen Shot 2019-12-15 at 5.50.53 AM.png
Sorting and Filtering Resources

Mentors can choose from sorted strategies to get guidance on  students' learning or to help themselves.

LaptopBook Pro3.png
Screen Shot 2019-12-15 at 6.03.16 AM.png
Screen Shot 2019-12-15 at 6.03.16 AM.png

The top of a student's profile page will always show the progress of the student in visual format. There are more detailed graphs  to show the overall progress trend of students.

More Hierarchy & Visuals
The Challenge
The Problem
Platform lacking accessibility and not user-friendly

The web app was at its beginning stages where it lacked many features that was necessary to help mentors teach students such as a lesson planning feature, and a system to find a resource a teacher is looking for out of the hundreds of resources. The interface of the web was unintuitive to use, for example having inconsistent buttons, and a layout that was hard to read.

Prototyping & Testing
Process
Student Profile Page: Improving on the Lesson plan and Student Progress Features
Screen Shot 2019-06-07 at 10.12.36 AM.pn
Screen Shot 2019-06-19 at 5.55_edited.pn

Previous interface design

The web app was at its beginning stages where it lacked many features that was necessary to help mentors teach students such as a lesson planning feature, and a system to find a resource a teacher is looking for out of the hundreds of resources. The interface of the web was unintuitive to use, for example having inconsistent buttons, and a layout that was hard to read.

Old Interface

My Redesign

Web_1920_–_21.png
Web_1920_–_29.png

Decreasing information load by adding more visuals and larger clusters

Web_1920_–_62.png

Progress summary always at the top of the page

I started sectioning off all the data from the page into "blocks" such as current week, history, and the strategies the mentors can use. Then I experimented with a lesson planning function and including more visual component to the information. 

Current Implemented Profile Page Designs
Screen Shot 2019-12-15 at 7.26.43 AM.png

Current student progress fixed at the top with the option of seeing overall progress

Screen Shot 2019-12-15 at 7.26.51 AM.png

Add resources to your plan with the history log of used resources at the bottom

The final version kept the main section of having the current week's progress always at the top to allow mentors to access necessary information right away. The progress was placed into tables to make it more readable. The goal of that semester and what the student did in the most recent lesson is also at the top for emphasis. There are recommended strategies that are shown how relevant they are to the student's learning status. The mentor can also dismiss the displayed recommendations to show other options.

 

​

Mentor Resource Page: Creating Organization
Screen Shot 2019-07-31 at 9.50.39 AM.png
Screen Shot 2019-06-19 at 5.55.47 PM.png
Screen Shot 2019-06-19 at 5.55_edited.pn
Screen Shot 2019-06-19 at 5.55.52 PM.png

The previous design on accessing mentor resources

Above shows the original process to access a mentor resource. You click on 'View All Strategies' in the student profile page then select a specific category. These categories were titled in vague names that added to the confusion in using the app. Once you click onto a resource you can preview it and open it in a new window or add it to the 'Plan'. If you added it to your 'Plan', it would be highlighted blue. 

​

Overall, the mentor strategies was a large pool of resources with no organization or filtering function. It was difficult for mentors to find what they needed and to understand how to use them. Feedback from current mentors using PL2 said that  that they did not understand the point of the web app because it was lacking clarity and functionality.

Web_1920_–_44.png
Web_1920_–_52.png

The bar reflects how relevant a recommended resource is to a student progress

Leads to a pop up for a sorted storage of resources

The dismiss button allows mentors to pick and choose recommendations

Web_1920_–_43.png
Web_1920_–_42.png

Adding a reflection activity for this resource

When you click on a strategy, the strategy opens as a pop up with a list of resources and functions related to that resource. For example, there are activities for each resource option, you can write your own notes or add your own links/resources.

Current Implemented Profile Page Designs
Web 1920 – 2.png
Web_1920_–_62.png
Web 1920 – 3.png

Updated version of the mentor resources

Condensing the categorization by including them on the same page

Simplified navigation by adding 'activities' to the front of the resource page

The most recent designs decrease the cognitive load for the users significantly. There are less descriptors to read and less areas that users can interact to allow users to focus on the most important features. 

Reflection
Conclusion and Major Takeaways
REU Poster-01.png

Click on image to see larger view

bottom of page