As part of the IBM Customer Transformation & Enterprise Strategy initiative, the Smarter Design Through Invention (SDTI) 2-part course aims to transform designers, engineers, and consultants into patent holders who utilize Inventive-Design methodology to innovate solution designs. It focuses on guiding learners through the patent process and refining their innovative ideas and inventions.
The image (left) displays the splash page containing links to both courses.
IBM Gatsby Theme Carbon Design System
This project was produced using XD and developed in the IBM Gatsby Theme Carbon Design System environment.
Crafted around user research, IBM Carbon was designed to work seamlessly, encompassing pre-built components and accessibility features and IBM Design language principles, guaranteeing uniform and cohesive user experiences.
Visual Design and UX/UI Development
Utilizing the IBM Carbon Components template for Adobe XD, I translated the storyboard into a sequence of wireframes for each lesson. This process allowed me to replicate precise site configurations and component styling while determining proper placements for visual and UI elements.
The Home page
Learners are to complete SDTI Parts 1 and 2 courses consecutively. Both courses feature a consistent style and structure, each comprising 6 modules for a total of 12. Pictured left are the home pages for SDTI Part 1 (left) and Part 2.
Gamification Components
In an effort to drive learning engagement, our client wanted to integrate a gaming elements. As part of our solution:
I refined the stakeholder's concept customizing it into an immersive visual gaming environment. Collaborating with the developer, I designed the game's user interface and components, ensuring the stakeholder's vision was brought to life from concept through to completion.
Select the videos to view demonstration of gaming components.
Use Case Storytelling Scenario
Enhancing the learning experience with engaging storytelling is another key design feature of this course. Storytelling scenarios are strategically placed throughout the course to provide learners with contextual insights into the practical application of the patent design process. Initially conceived as a series of videos featuring IBM volunteer actors and actresses, due to COVID restrictions, I proposed a more efficient solution of conveying the narrative through imagery within carousel components.
Using vector character sets, I personally crafted and customized the illustrations, shaping each character to align with the scenes and storyline of the narrative.
Visual Graphics
For this project, I modified, edited, and managed a total of 7 video files, and 43 photos. Additionally, I customized and produced a total of 195 visually engaging graphics aligned with the IBM Design Language branding standards.
The graphics pictured are samples of my original creations produced in Adobe Illustrator.
Text Input Component and Save Feature
Every invention must have a written documentation explaining what the invention is, it's design, how it's made, how it functions, and the purpose that it serves. As part of the step-by-step learning process of this course, the text input component enables learners to document their responses to questions aimed at fostering the development of their ideas and also fulfilling the requirements for patentability. Once completed the learner can save their responses.
PDF Document Download
At the end of each lesson, learners have to option to download a PDF file of their saved responses. This course is structured to ensure that by its completion, learners will be able to use their saved documentation collected in their responses as part of their patent submissions.
Lessons Learned
An invaluable lesson gained from this project is the realization that while the Carbon Design System platform wasn't inherently tailored for educational applications, our team adeptly navigated its constraints with innovative thinking. Pushing the platform to its limits, we crafted a deliverable that not only met its intended purpose but also proved compelling and highly beneficial to the learner in unforeseen ways.
