top of page

WORK OVERVIEW

EVERFI

A technology and data-first approach to impact and education

Blank State Design.png

Background

​

EVERFI is an educational technology company which provides SaaS solutions for their learning management system in the form of self-paced, interactive courses that are used in the K-12 classroom (Homeroom) and for adult financial learning (FCN). Homeroom teaches critical life skills on topics such as financial literacy and mental well-being. These courses are free to teachers and students, funded by sponsors such as the NHL and Meta. FCN materials include self-paced courses on financial topics such as owning you own home and what to expect when starting a small business.

​

When I joined EVERFI, NEXT, part of our FCN, was in need of updates after design and developing priorities were shifted across our other platforms previously. One of the initiatives technical project manager, Gwen Latasa, led was to update the NEXT learner and admin experience to be more engaging and versatile.

As part of this initiative, I researched, designed, or updated the NEXT experience including a learner dashboard, learner dashboard widget components, and our existing card and hero space design.

MVP: NEXT Learner Dashboard

​

​

Challenge

​

Next currently has a concept of a Learner Dashboard, however, that page offers very little to the learner in terms of knowledge and insight into their personal learning journey, and is mostly just a way to see predefined playlists offered by their institution. The lack of personalization makes it easy for the user to remain detached from the learning experience.

Building a true Learner Dashboard with easy access to recommended content, insights, and incentive campaigns that can also help learners keep track of their goals and progress is what our customers are looking for and will keep the Learners on the platform for longer and with repeat visits.

In this first iteration, we are building a new page featuring “widgets” or modular type features that can be hidden or exposed depending on the program’s configurations. The widgets proposed are links to content or playlists and not necessarily entirely new features. We should keep in mind that, whatever is built should be expandable to allow new widgets or improvements of the current widgets.

 

​

​

​

Design Process

​

The Learner Dashboard was a multi-step project asking for new platform features such as a recommended content section and widgets along with rethinking existing features with a new direction such as incentives and our hero space usage. With this in mind, I first explored the building blocks created for the learner dashboard, the widget. Then I created design mock-ups, keeping in mind the need for widgets to be versatile enough to be used on the personalized playlist page, the program's content library, and the new learner dashboard. Our learner dashboard must use pre-existing components, drastically reducing the scope of possible "creative" designs for first iterations, but also allowing for a quick turnaround into production.

 

​

​

​

Success Criteria:

​

  • We’ll see 5% increased user registration and return visits.

  • We will see a 5% increase activity starts with the introduction of the learner dashboard.

​

​

​

​

Future Considerations:

​

  • We’ll see 5% increased user registration and return visits.

  • We will see a 5% increase activity starts with the introduction of the learner dashboard.

CEOS-2.png

NEXT Learner Dashboard MVP

Our initial learner dashboard exploration included using already existing cards and components, flexible widgets, and placement of specific widgets based on importance or business goals.

Incentive Widget

​

​

 

Challenge

​

We want to create a widget that will help Next Learners see all available incentives to them in one location in order to promote any sponsor offerings and have learners stay on the platform for longer. This widget could go on the current Learner Dashboard (playlist page), Landing Page, or the New Learner Dashboard.

 

 

 


Design Process

​

First I explored wireframes for an incentive widget that relies solely on existing components and styles while also making the design less tied to gifting like the current usage of a gifting icon. First, I considered the many cases for incentives used by sponsors such as eligibility, a link to terms and conditions, certification, etc by taking an inventory and researching how current sponsors are using the incentive space. Then, I designed an updated playlist card, incentive hero space of a playlist page, new incentive widget, and mobile experience with this list of use cases. Afterwards, I considered what content should be shown about the incentives such as an image or CTA along with any blanks states. Next, I designed iterations of the widget allowing for a flexible container for multiple incentives. Throughout this process, there were multiple iterations and realignment with the cross-functional team until lastly handing off a detailed spec to the dev team.

​

​

​

​

Deliverables

​

Designs & specs for:

  • Updates to incentive info in playlist hero

  • Updates to playlist card design and visuals - ensuring less tie to "gifting" icon

  • Incentives widget on playlist page

  • Variants: 1, 2, 3 active incentives

  • Variants: Not started, some progress made, already finished

  • Incentives widget on directional future learner dashboard

  • Same variants as above

  • Variants: default, with image, without CTA

  • Any updates to incentive info on playlist cards within playlist recirculation and landing page

 

Specs to include:

  • Desktop and mobile screen sizes

  • Annotation of what data source (e.g. field in the admin incentive creation form) each element uses

  • Annotation of what component and shared styles each element uses

  • Upon completion of the work, designer to capture links to Figma, specs, any additional information here that helps TPM write relevant stories.

Playlist Cards

With Incentive
 

Landing Page
 

Without Incentive
 

Playlist Page
 

Original playlist cards

Goal: Continue visual continuity across platform (from incentives used on playlist card, further image support alignment.

​

Original playlist cards contained non-standard components, incentives on the top left, uses branding colors for the incentive message, uses a "gifting" icon, and differing fonts for the landing and playlist page.

​

Landing Page
 

Spacing & Styling
 

No Image/ Mobile
 

Playlist Page
 

Long Description Text
 

Updated playlist cards

The updated playlist card includes use of the standard library component card for quick turnaround in production. Instead of using brand colors for incentive text, we used our dark grey/ standard color to ensure high level contrast for reading accessibility. We instead introduced a more standard icon which includes branding colors for more customizability. We moved the incentive messaging to the bottom left or the card for more textual balance.

​

Incentive Widget
 

Goal: Showcase incentives available to the user on future learner dashboard. This must include variants if there are 1,2, or 3 active incentives, if the learner has not started, made some progress, or already finished the playlist for the incentive.

​

Incentive Card (V1)
 

Incentive Card V1.png
Horizontal Incentive Widget.png

Horizontal Widget Cards for 1,2, 3, or More Active Incentives
 

Vertical Widget Cards for 1,2, 3, or More Active Incentives
 

Incentive Widget Vertical.png

Hero Space
 

Goal: Continue visual continuity across platform (from incentives section in hero space) and align hero space with all components.

​

The original hero space includes an image space available above the incentive message. This makes the hero space grow vertically but includes a large amount of negative space to the left. The hero space currently grows with the incentive message but does not always align well with playlist title and any additional information.

​

Original Hero Space

Without Incentive
 

Playlist Hero Current State.png

With Incentive
No Image
 

Playlist Hero Current State.png

With Incentive & Image
 

Playlist Hero Current State.png

Playlist Hero Spacing and Styling
 

Playlist Hero Spacing and Styling.png
Hero Spacing.png
HP w I wo I completed.png



With Incentive & Image Before Completion
 

HP w I w I.png



Without Incentive & With Image
 

HP wo I w I.png



Without Incentive & Image Completed
 

HP w I w I checking completion.png



Without Incentive & Image Completed
 

HP w I w I completed.png


Without Incentive & Image
 

HP w_o I no I.png



With Incentive & Without Image Before Completion
 

HP w I wo Im.png



With Incentive & Without Image Checking Completion
 

HP w I wo I checking completion.png



With Incentive & Without Image Completed
 

Mobile Hero Space
 

Goal: Continue visual continuity across platform (from incentives section in hero space) and align hero space with all components.

​

The original hero space includes an image space available above the incentive message. This makes the hero space grow vertically but includes a large amount of negative space to the left. The hero space currently grows with the incentive message but does not always align well with playlist title and any additional information.

​

mobile hero spec.png

Checking Completion
 

Mobile Hero w I n Im Checking Completion.png

Completed
 

Mobile Hero w I wo Im Completed.png
Mobile Hero w I w Im checking completion.png
mobile hero w I w Im completed.png


With Incentive

Initial State
 

w I no Im.png



With Incentive & Image

w I w I.png

Recommendation Widget

​

Summary:

We want to test whether adding recommended content to the Next learner dashboard will keep them with us on the platform longer, thus better meeting sponsor expectations and goals.

 

Design Process

Recommended content is a fully new feature for our platform and thus, I first completed a competitive analysis, understanding how recommended content is currently shown on other platforms. With this in mind, I explored both the logic and wireframes for recommended content that best aligns with our content and business goals while reyling solely on existing components and styles. Afterwards, I designed iterations of the widget allowing for a flexible container for multiple incentives that would follow similar component and styles to other widgets for a future learner dashboard. Throughout this process, there were multiple iterations and realignment with the cross-functional team until lastly handing off a detailed spec to the dev team.

​

Recommended Widget Logic

  • Should be flexible and adapt to different screen widths

  • Shows up to 3 content items at a time

  • Includes language to inform learner of what they are looking at. We can expect the following states:

    • When learner has not started any content to generate recommendations

      • Recommendations will be random

    • When learner has started some content

      • Recommendations will include content items that have not been completed with same topic/subtopic as last completed content item

    • If there are not enough recommended content items, random ones will fill in the empty spots

    • When learner has completed all content with the last topic/subtopic

      • Recommendations will be random

    • When learner has finished all content

      • Empty State - no content left to recommend

​

Recommended Card (V1)
 

Recommendation V1.png
Recommended Horizontal.png

Horizontal Widget Cards for 1,2, 3 Recommendations or Blank State
 

Recommended Vertical.png

Vertical Widget Cards for 1,2, 3 Recommendations or Blank State
 

bottom of page