EverFi Engage

Engage allows financial institutions to deliver in-person financial education to their customers and the community via guided workshop events at their branches. The product consists of 13 digital learning modules covering personal finance & money management, small business operations, and home ownership.

See it in action ☞

Details

Role
UI/UX Designer
Collaborators

Frank Stewart / UI & UX
Ann Schoew / Illustration

When
2017-2018

Engage workshops are geared toward low- to moderate-income adults, families, and small business owners. In order to help these users feel at ease with weighty topics, the visual design relied on soft colors and springy animation, and content was written with a casual tone.

Using a Design System

Upon joining the project, I had the team migrate existing designs to Sketch, so that we could use it to build a design system that would let us rapidly execute and iterate. That change in process led to the creation of a template library containing 40+ unique pages in mobile, tablet, and desktop sizes.

Reusable components created in Sketch.
Check out the full template library here☞

Interaction Design

I used a host of tools to prototype different interactions, including Invision, Flinto, Framer, as well as HTML/CSS so that we could ship code directly to developers.

A sampling of these are below.
To see them in action, check out the live development link here ☞

Workshop facilitators can access their script at any time by tapping a persistent tab on the left edge.
Carousel component with some light animation to focus users' attention.
Using animation to maintain continuity between components.
Turning a list into an appealing interactive.