Case Study
Lightbulb Press
Lightbulb Press is a highly regarded creator and publisher of objective educational financial content. Their widely recognized signature style combines everyday, straightforward language with imaginative, informative, and often humorous graphics.
In addition to their perennially popular guides, Lightbulb creates websites and content, financial literacy and investor education program materials, and financial marketing communications.
Contribution
Wireframes, Prototyping, Visual Design, Front-end coding
Role
Web Design & Consultant
Tools
Sketch, HTML, CSS & Javascript
Team
Consultant and Mavis Wright of Lightbulb Press
Overview
My first web design role from 1999 through 2007 was with Lightbulb Press and when I was approached this year by Mavis Wright at Lightbulb, I was excited about working with her again on a digital project for their client, the American College of Physicians.
The project involved designing a mini-site containing Lightbulb content including a debt repayment calculator which would be integrated into their site at acponline.org, as well as licensing Lightbulb's Dictionary of Financial Terms.
The Challenge
The content was to be designed to fit in with the client's website for a seamless experience that was not Lightbulb branded. Personally, this made my work a lot easier to simply replicate their aesthetic from their provided brand guidelines.
We would be licensing the debt repayment calculator from a third party who allowed CSS customizations to the calculator and was already optimized for all devices. The real challenge would be converting the Lightbulb Press Dictionary of Financial Terms.
The real challenge for me would be technical, since the Dictionary of Financial Terms was very outdated. The design, HTML and CSS had not been updated since my tenure at Lightbulb Press many years ago and it was built in ASP.NET, which acponline.org did not support, and would have to be rebuilt from scratch using Javascript.
June 2022 - July 2022
The Plan
Since Mavis and I had worked together in the past, we quickly got our business cadence back and jumped right into work. While she created the content, I started rebuilding the Dictionary of Financial Terms with the Lightbulb Press branding. It had initially been designed as a white label product, so it would be easy to fit in the ACP branding once rebuilt.
Once the content was completed I sketched it out in wireframes so Mavis and the client would know what to expect before into design. I wanted to include this step since it had been so long since Mavis and I had worked on a digital product, which differs from the usual print product where this step is not required.
week 1 - 3
Kickoff meeting with LBP and ACP (client) to determine technical specifications and scope of expected deliverable. Dictionary of Financial Terms design updates and coding
week 4 - 5
Create wireframes and visual design for the mini-site and debt repayment calculator
week 5 - 6
Coding the mini-site, customizing the debt repayment calculator
week 7
Finalize and deliver product to my client, Lightbulb Press
Getting to work
The Dictionary of Financial Terms was built around 2001 to be licensed on a website, delivered as a fixed size popup using system fonts and graphics with text, as was normal 20 years ago. It had a fixed width and height using iframes and tables, and was not responsive: on mobile it was not readable and would break when increasing the view on a browser.
I created mockups for Mavis to visually show the updates I planned to do on the Dictionary, which included replacing the text in graphics with actual live text, introducing Google fonts and increasing the width to 100%.
Once approved, I altered the HTML and CSS to make it responsive and created a JSON document with the actual terms and definitions used in the dictionary. Then I had to write the Javascript to make the search read the JSON data and update when users browse the dictionary.
The content for the Budgeting & saving mini-site was designed to be interactive and test the user's knowledge by presenting a question and offering the user options with elaborate responses with encouraging icons. Since the prize at the end is knowledge, we designed the quiz so that users could read all the responses to the questions.
Dictionary of Financial Terms (before). I should have taken screenshots before I updated it
Dictionary of Financial Terms (after) desktop, mobile and ACP version on tablet
Budgeting & Saving mini-site wireframes
Visuals
ACP provided an extensive brand guidelines document which was extremely helpful in designing the mini-site to be seamless visually using their brand's typography and color palette and following their website's page templates. We used icons and general (stock) photography for images.
For the debt repayment calculator we added icons for a little bit of fun.
Budgeting & Saving mini-site page and debt repayment calculator
Development
I coded the mini-site using the Bootstrap framework without the navigation and footer in order for the client to easily integrate into their site as per the client's request. The development took less than a week including the customization of the debt repayment calculator and was delivered to the client via ZIP archive.