WORK OVERVIEW: DESIGN & SPEC
EVERFI
A technology and data-first approach to impact and education
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.
Design and Specs
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.
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.
Full State
Blank State
Mixed State
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
Original
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.
With Incentive
Landing Page
Without Incentive
Playlist Page
Delta
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.
Landing Page
Spacing & Styling
No Image/ Mobile
Playlist Page
Long Description Text
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)
Horizontal Widget Cards for 1,2, 3, or More Active Incentives
Vertical Widget Cards for 1,2, or 3 Active Incentives
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
Without Incentive
With Incentive
No Image
With Incentive & Image
Delta
Playlist Hero Spacing and Styling
Without Incentive & Image
With Incentive & Without Image Before Completion
With Incentive & Withou Image Checking Completion
With Incentive & Without Image Completed
With Incentive & Image Before Completion
Without Incentive & With Image
Without Incentive & Image Completed
Without Incentive & 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.
With Incentive
Initial State
With Incentive & Image
Checking Completion
Completed
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)
Horizontal Widget Cards for 1,2, 3 Recommendations or Blank State
Vertical Widget Cards for 1,2, 3 Recommendations or Blank State
