LifeSkills was a series of browser-based courses aimed at undergraduate and post-grad students. Its 33 lessons covered financial literacy, student loan management, student skills, and career development. The product was offered free-of-charge to colleges and universities by Strada Education Network, a non-profit organization formerly named USA Funds.
In 2013, Strada chose to completely revamp LifeSkills. The company had an internal eLearning team consisting of a manager, three instructional designers, and myself. As the team's sole visual designer, coder, and animator, I had my hands full.
A short video featuring examples of the interactive and motion graphics within LifeSkills.
Key Contributions:
+ Art direction for all lessons
+ UI/UX for interactive educational media throughout lessons
+ Graphic design, animation, and coding for all lessons*
+ Collaborated with the eLearning team to develop a formal graphics request system
+ Boosted production by creating a "Graphics Library" of interactive, motion, and static graphic styles
+ Collaborated with instructional designers to ensure media communicated core concepts accurately
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/930eb9ac-d8da-4075-8b8e-282fa9ac364b_rw_1200.png?h=96aedec3d667ff7f1d7b9c4acd2ee7da)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/d8b5de4f-6106-42c8-8235-6987f7794dcf_rw_1200.png?h=844cb8efa978e6a4a40d96b0e4a148c9)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/81a9750e-5d99-4118-9d89-97b1ce411e9a_rw_1200.png?h=ac05aa4549c60e97cfdb790372dd5fcc)
Many activities helped users learn to budget their time and money.
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/b2bcefe0-f5bb-4b60-b2f4-8af239159ccf_rw_1200.png?h=4316ec09d16e9cbefd0b75e7d8ec7298)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/7a1c0323-3f42-4193-ad29-d3ffe3a09cbc_rw_1200.png?h=d47bb3c13bb9aa5c2f149a696ded1c4f)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/e43682ad-2683-4b9e-96fa-165ac12e8027_rw_1200.png?h=465128e288cc807fd354c6074651e383)
Others were designed to make abstract concepts concrete.
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/b7a7fe02-b0f8-4531-b0cf-4d859ad13c09_rw_1200.png?h=79e6a8d13ead65cc55d7da0932862cd2)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/eee8d156-eb88-4561-aa5c-8769b8adc598_rw_1200.png?h=405377bc8e5f9a96ee6eaeb4ec5dbeff)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/ae6fe279-431e-4601-8041-020296fe6d9a_rw_1200.png?h=f66a9b21069b0435da498cfa9d505ebd)
I created several graphic styles to break help break the text-heavy lessons into smaller bits of information.
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/a96dda6c-e724-4e2e-b776-1c86d17c7dc8_rw_1200.png?h=750e0766f5bca5fdc8a76a6407cfa714)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/cec9ff0e-01d4-486a-b13a-394ef3e1f9ab_rw_1200.png?h=4e1fb7d7f80f38bb4923513da9457f38)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/7404aeb4-1f8d-4d61-8979-a07ffed0cf45_rw_1200.png?h=c9bf2721ca81e126047a77b6b687e739)
There were a few chances to get more creative with the presentation of information.
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/1a8d7b67-a750-4d1f-a494-0bd822d9c9b8_rw_1200.png?h=c3eea4a5a2302464e7a01adc6162f5f9)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/68ddfc3f-2acb-4f3f-8f64-9bf4521a180d_rw_1200.png?h=bdedfe78505b21ac16fc9bc1f4b4456c)
![](https://cdn.myportfolio.com/9841bbba-b793-4925-a3e9-b2c0f77ed02b/0fd6cdac-7876-4497-8adf-98fc3b8e6f00_rw_1200.png?h=56390c5804ee398201bed1a2244e197f)
Static graphics also appeared on text pages in the form of graphs and callouts.
* I did not design the lesson template.