PROJECT: Firecracker (Formerly Gunner Training)
ROLE:
Principal UX and Visual Designer and Innovation Strategist
KEY SKILLS / DELIVERABLES:
• Big-Picture Product Features Ideation
• Logo / Brand + Identity Design
• UX / UI Visual Design for Adaptive Learning App
• Information Architecture
• Lead Gen Graphic Design and Copywriting
DESIGN APPS USED:
• Photoshop (detailed UI web designs and lead gen graphics)
• Adobe Illustrator (UX wireframing and Logo Illustrations)
PROJECT OVERVIEW / CONTEXT:
Firecracker is a medical training software startup founded by a team of Harvard Medical School residents in 2009. When the founders of Firecracker (then known as Gunner Training) contacted me to work with their startup, they had a vision for revolutionizing the healthcare system with better-trained physicians, but they had no product yet. They aspired to enable medical students to ace their extremely difficult medical board exam known as USMLE (Step 1) which required a vast and deep knowledge of many medical topics. They envisioned an adaptive learning product that would leverage the then cutting-edge concepts of "spaced learning" to help students retain the content better to optimize their performance on medical exams to enter better med programs. They imagined that this could later also serve to help physicians continuously learn and retain medical details throughout their careers as well.
NOTABLE FEATURES + ACCOMPLISHMENTS:
This online adaptive learning application prepares medical students for the USMLE Step 1 Medical Board Exams through its comprehensive medical content written primarily by Harvard-trained physicians on all the topics that students are required to recall for their medical boards. Firecracker's proprietary subscription-based app provides students with interactive flashcards and a personalized study plan with review schedules to revisit topics that each particular student user would find challenging in practice exams. Firecracker's platform enabled students to self-assess their recollection of the material and see data visualization of their progress on the various topics over time. According to Firecracker's data, they find that students answer 10 million questions a month on their platform which in turn, helps to improve their algorithm, so the results are used to constantly improve the user-experience.
Firecracker was successful enough to be acquired by Wolters Kluwer Health in 2018. At the time of its acquisition, 20% of all medical students were already using their pioneering adaptive learning platform.
Represented here are several user-interfaces that I conceptualized and designed for this medical training software firm founded by a team of Harvard Med-trained physicians.
PROCESS
Building a Brand
Identity Design: Gunner Training Logo and Business Card Design
Identity Design: Gunner Training Logo and Business Card Design
In the process of building the brand for a startup, I proposed we first design the logo to set the brand personality with its associated color palette and aesthetic feel. I proposed design concepts for logos that featured custom illustrations for their brandmark in several rounds of work.
The logo designs presented on the bottom-right page are the finalists for logo concepts that I created for the client. The client chose the larger logo presented on top. I designed the logo for "Gunner Training" featuring a custom illustration of a physician with its body shaped as the letter "g" that paralleled the typeface of the logotext. I illustrated the "g" to look like a medical stethoscope that is often associated with medical physicians and the body of the "g" gunner is shaped like the letter "g" in the same typeface form to match the rest of the logotext. The "g" gunner individual is seated next to a laptop to allude to Gunner Training / Firecracker's digital adaptive learning app. I chose the cool silvery-baby blue to represent the feel of the stethoscope and also rational sciences and the deep tangerine orange to complement the orange with a more vibrant, dynamic feel. The deep charcoal greys anchored the other colors.
My initial logo designs — some of which I hand-illustrated the "g" in "gunner training" to look like a little person at a computer and its head and body shaped like a stethoscope. In other concepts, I illustrated a student at the desk shaped to look like the original typeface for that logotext.
UX / UI Product Design
Creating a Proof-of-Concept EdTech for Student Membership Subscription and Angel Funding
Creating a Proof-of-Concept EdTech for Student Membership Subscription and Angel Funding
Following the delivery of my identity designs, I conceptualized wireframes exploring proposed key features and the user experience for Gunner Training's adaptive learning edTech concept. Tapping into my psychobio studies while at Wellesley College, I proposed ideas for product features and content structure. I recruited my technology partner and full-stack software developer Alex Chou who was a bio major and pre-med while at Harvard to work on building out my designs and to serve as our backend consultant. He helped review my proposals from a technology implementation perspective. Alex later joined Gunner Training on their development team.
Once the initial wireframes were approved, I created detailed visual GUI designs for this app that were inspired by the popular colorful, translucent candy-like iMac G3 designs and Hong Kong color palette of their toys. I thought that the rounded colorful feel would parallel the round, friendly-looking aesthetic of my logo design and present an inviting, youthful feel to the brand that would uplift stressed students with a more welcoming yet functional design. I refined the designs per client feedback and customer feedback.
Featured below on the left are earlier initial design concepts I proposed earlier and potential ways of displaying data analytics results for this medical data analytics application.
