Masterfully is an online learning tool based on a successful self-study system developed by McMillan Study Guides for the US Air Force NCOs studying for promotion fitness exams, skill tests, and training upgrades. The company started in 1988 when it introduced its 3-step system in a boxed set of flashcards and quickly gained popularity among airmen because of its approval rate. Over the years, the system evolved from books, audiobooks to e-learning.

The challenge: Masterfully needed a website to release McMillan’s learning system to the civilian market under “Mastery Plus.” We were asked to create the information architecture, user experience, and visual design, informing the users about the product’s features, illustrating what types of industries can have an advantage using the product, providing a clear pathway to users requesting a demo, and telling the story of how it helped so many airmen achieve their promotions, making a case for the platform’s effectiveness.

The solution: We divided the project into two phases; the first was dedicated to auditing and analyzing Masterfully’s positioning, content, objectives, and user needs. We then prioritized and organized the information collected and solutions proposed in wireframe documents. Once the first phase was approved, we moved to the design using the atomic design methodology, which defines the building blocks of the interface and then groups them to develop the website pages. The system included buttons, inputs, links, checkboxes, typography styles for display, headings, body text, and block quotes. We added colors, gradients, icons, and grids in light and dark versions. Our component-based system streamlined our process and helped us produce page layouts faster in a cohesive way. We then tested the interface in desktop and mobile prototypes. The visual design supported and elevated Masterfully’s branding credibility by effectively messaging about its advantages, proven record, mission, and background.