top of page
After (1).png

Skillscope

Leveraging AI Capabilities to Assess Durable Skills

The student login view of the Skillscope dashboard.

​

User Research Overview

​​

Every aspect of the design of the Skillscope project was informed by research. From the ease of use of the product, to the characters and the overall look and feel of the visual design.

​

As the UI designer I worked closely with the UX researcher to implement her findings in an iterative fashion throughout the mid and hi-fi design phases of the project.  

​

Research Conducted:

​

  • Userzoom, unmoderated usability testing of each module.

​

  • User interviews with higher education professionals such as professors, college deans, admissions administrators and career counselors.

​

  • User interviews with college students. 

​

  • Moderated usability testing with college students. 

​​

  • Beta testing with the coded versions. â€‹â€‹â€‹â€‹â€‹

​​​

My Role

​

As the senior UI designer on the Skillscope Higher Ed. project I was responsible for all of the hi-fi designs you see here. I worked with a cross-functional team consisting of UX researchers, AI engineers, assessment designers, learning scientists, a team of developers, a UX designer and a product owner.  

​

The concept behind the Skillscope product is that it can be a tool for college professionals such as professors, admissions and career counselors to gain insights into their student's soft skills. Skillscope is a modular assessment where each module consists of 3 activities and takes roughly 15 minutes to complete. A company could purchase a combination of modules depending on the soft skills they are wanting to assess. Each module assesses roughly three skills and a variety of sub-skills.

Skillscope Timeline.png

Skillscope Designs

The Module Dashboard

Dashboard_Module 1 In Progress.png

The Modules Dashboard

Once the user has gone through the onboarding process they will land on the Modules Dashboard. The primary purpose of the Modules Dashboard is to communicate overall progress, provide the user with a way to select a given module and give the user a way to view personal performance insights.

​​​

The user accesses a module by the selecting the start or continue button on the module tile. When they have completed the module, the CTA "See Skills Report" appears. Selecting the "See Skills Report" hypertext will take them to the insights page where they can view their performance for the module. 

​​

Dashboard_Module 1 Not Started (1).png

Module Intro Screens

3.0a_Module_ Intro 1.png

The Intro Screens

When the user selects start on a module card on the dashboard they will be taken to the Intro screen for that module. Seen here are the module intro screens for the first three modules. The intro screen consists of a card for each of the three activities within the module. The user must unlock each consecutive activity by completing the previous one. â€‹

1440_2.0_Effective_Communication_Intro_Section_One.png
1440_1.0_Module_One_Introduction_03.png

Module 1

Directions V1.png

Module 1, Story Spark

The skills being assessed in Module 1 are creativity, collaboration and perseverance. It consists of three activities. This screen introduces the user to our AI bot Steve who will be directing them through the experience. 

Bot1Turn_1 (1).png

Activity 1 

In this activity the user is playing improv with with the Ai bots. In this screen the bot has started telling a story. The bot suddenly stops and says switch and the user is asked to continue the story from where the bot has left off. 

CharacterResults1a.png

Activity 2

In this activity the user is asked to create a character that they will eventually incorporate into a story for activity 3. 

Bot1Turn_Character1.png

Activity 3

In this activity the user is asked to incorporate that character into a story. The AI bot starts the story and the user is asked to continue the story as their character. 

The Portfolio Overview Dashboard provides an overview of all the user's accounts in their portfolio. 

​

Primary Navigation: To address the issue of the contextual navigation being hidden in the old version of the Investor platform we decided to move it to the primary navigation at the top of the page. The Portfolio, Accounts and Groups navigation categories allow the user to view their performance, balance, risk etc. from each of those three contexts. 

​

Tile/Widget Concept: User testing of our existing Advisor product, which utilizes the tile concept revealed that users love this approach. They reported that it is a simple and intuitive method for grouping information within the dashboard. 

 

Dashboard Configurability: This dashboard, as well as the Accounts and Account Groups Dashboards, are fully configurable by the user. The user has the ability to choose which tiles they want to display on each dashboard and hide the tiles they don't want. A list of their hidden tiles may be accessed by clicking the three dot dropdown in the header bar at the top of the page. 

​

​

​​​

​

​

PickFriend1.png
End_Scene.png

Module 2

1440_1.1a_Intro 3.png

Module 2, Article Accelerator

The skills being assessed in Module 2 are AI literacy, communication and perseverance. It consists of three activities. This screen introduces the user to our AI bot Elena, a newspaper editor, who will lead you through the activity.

2.1a_VideoInterface_Teacher_Focus.png

Activity 1 

This activity consists of a filmed session with Elena where you talk with her about creating an article on climate change for the student newspaper. 

2.2b ChatAI Response 2_New prompt.png

Activity 2.1

In the first step of activity 2 the user uses an AI text generator tool to create text for their article.

2.2d  ImageAI Prompt 2.png

Activity 2.2

In the second step of activity 2 the user uses an AI image generator tool to create an image for their article.

2.2e Blurb Builder Interface_Fact_Check_Open.png

Activity 2.3 

In the third step of activity 2 the user uses an editor to bring the image and text together and create a title for their article. 

2.2f Completed Article.png

Activity 2.3 

In the final step of activity 2 the user sees their completed article. 

2.3a Sasha Review Interface - Sasha Focus (1).png

Activity 3

In activity 3, the user has a video chat with Sasha, our AI bot, where they debrief the experience of creating an article for the newspaper. 

Module 3 

1440_1.1a_Effective_Communication_Puzzle_Intro 2.png

Module 3, Interning with Ian 

The skills being assessed in Module 3 are perseverance, collaboration and communication. It consists of three activities. This screen introduces the user to the activity.

1440_1.1b_Effective_Communication_Puzzle_Directions_02.png

Activity 1 

In activity 1 the user is asked to solve this logic puzzle within four minutes. This consists of arranging all the numbers so that each row adds up to15.

1440_1.1d_Effective_Communication_Puzzle_Directions_02.png
1440_1.2a_Effective_Communication_Puzzle_Directions_02.png

Activity 2 

In activity 2 the user chats with Ian, one of our AI bots, to problem solve a solution to the puzzle and discuss the strategy they used to solve it.

1440_1.3a_OnlineClass-FullClass-wVideo.png

Activity 3 

In activity 3 the user enters a video session. They are filmed talking to a virtual classroom. The class discussion is led by the professor Mr. Fields and the students discuss an upcoming internship. The user's communication skills are assessed in this activity.  

Module 4

Play Selected.png

Module 4, Urban Upcycling

The skills being assessed in Module 4 are critical thinking, collaboration and civic responsibility. It consists of three activities. In this screen the user receives a message from the mayor and is invited to participate in a community upcycling project where they are asked to transform an empty lot in the neighborhood. 

6 Items Selected.png

Activity 1

Users are given a series of items along the bottom of the screen and asked to select them to create something new that would help transform the empty lot. Selected items are added to the workspace. Items can be added or removed and groups of items are labeled and can be saved as ideas or removed.

HiFi Wireframe 71.png

Activity 2

Once the user has created a number of ideas they are asked to select their favorite and chat with other volunteers about their ideas. During the brainstorming session with the community members images are generated for each of the ideas. Users are asked to compromise and blend ideas into a single vision for the lot.  

HiFi Wireframe 72.png

Activity 3

Once a final idea is created the user participates in a recording session where they are interviewed by a local reporter, along with the mayor and their partner, to discuss how they arrived at a their solution.   

Global Insights Pages

Teacher_Dashboard.png

Global Insights, Homepage 

This series of screens shows the student performance data that is accessible to the higher ed. professional. 

 

This is the insights homepage. From this page the professor can view the following: 

​

  • At the top of the page the series of cards shows each module they've assigned, the number of students who've completed the module, a link to a list of all the students and a link to a description of the module. 

​

  • In the Skills Scoring section they can view a sortable list of each of the skills assessed and the performance breakdown of the group on that skill. Selecting a specific skill provides the professor with a definition of the skill.  

Student_List.png

Global Insights, Student List

Selecting View Students from one of the module cards on the insights homepage, as seen above, opens the Student List page. 

​

From this page the professor can see which students have completed the module and if they feel the student's score is invalid for some reason, or the student wishes to retake the module, they can reset the score here. 

About_the Module_Modal.png

Global Insights, About the Module

Selecting About the Module from one of the module cards on the insights homepage opens the About The Module modal.  

​

This modal provides general information about the module such as time to complete, the skills addressed, as will as an overview of each of the activities in the module.

Class_Insights_Report.png

Global Insights, Insight Report 

Selecting View Insights from the insights homepage opens the Student Insights Report. 

​

From this page the professor can see individual student performance on each of the skills assessed. This is an average score based on their performance on a skill across all the modules. ​​

Student_Drilldown_Tab_4 Modules.png

Global Insights, Student Skills Report 

The Student Skills Report can be accessed by both the teacher and the student.

 

Selecting a student's name from the Global Insights Report allows the teacher to view the Student's Skills Report. The Skills Report provides the most detailed performance information for a student on both the primary as well as sub-skills. 

​

The student may accesses the Skills Report from their dashboard once they've completed the module.  

HED_Student_Skills_Overview.png

Global Insights, Student View

There is a card that sits at the top of the student's dashboard that is titled Progress. Selecting View Insights on this card opens the student's Global Insights page. This page provides information about performance on a particular module for each primary skill.  

​

Selecting the module name at the top of a column opens the student's Skills Report for that module.

Account Creation, Log-in Screens

Login (3).png

Sign-in & Sign-up

An entire onboarding flow for both the student and higher education professional was created for this project. Just to give a general sense for the design of the onboarding flow I've included the sign-in and sign-up screens here. 

Verify Account_Sign Up Scroll.png
bottom of page