TRIZ - Informational Tool
Carnegie Mellon University, Pittsburgh, USA
Programming Usable Interfaces
Individual Project
Nov - Dec 2017 (4 weeks)
SKILLS
HTML | CSS | Javascript
Illustrator | InVision
TRIZ is a responsive ‘informational tool’ website. It is based on the engineering tool called TRIZ which is a problem-solving method based on logic and data that accelerates the creative problem solving using 40 inventive principles. This website intends to focus on these 40 principles as well as list the 39 design parameters and offer links to contradiction diagrams and further resources to assist in developing innovative solutions further. Current tools for TRIZ consist of mediocre websites and information hubs which are not appealing and are very text heavy.
PROTOTYPING
I conducted a quick round of low fidelity prototyping to find the best suited layout for the tool. Initially, I was going to design the website over a series of separate screens, and try to incorporate a TRIZ contradiction tool to be more interactive and situated on the main homepage. Some initial user trials proved that users wanted to immediately interact with the tool, to find information and explore parameters further so I switched the layout to be a scrolling page, utilizing pop-up modal boxes and .js interaction.
The design was then brought into illustrator and constructed for both a web and mobile platform. Color and branding were applied with imagery and styling cues figured out as the design progressed, and prototyped in Invision, below.
Click here for external link
HTML/CSS/JS PROGRAMMING
Employing a one-page scroll website, I included various animations and background function to create a fully interactive, engaging experience with multiple interaction click points and reference notes. Vector animations were created with ‘Vivus instant’, a .svg animator tool utilizing some JavaScript functionality. Focusing on the 40 principles, as you hover over a principle, some css coding changes the pointer to a mouse click and enlarges the font, giving affordances and cues for the user to click and investigate further, at which time a Bootstrap-Modal pops up on screen and explains the principle more in depth. There are two JavaScript tools utilized here: AOS.js (animate on scroll) and Paralax.js. I also designed the visual aspect of these pieces to move in a flow, working with the patent picture in the background it allows the user to get slightly lost as they explore through the principles and options further adding to the experience.
The website has been designed to be fully responsive and all elements adjust to suit a broad range of screen resolutions from desktop to mobile. This was done using the Bootstrap toolkit and utilizing further JavaScript coding to switch between class elements once a screen resolution fell below 540 pixels in width. A menu bar at the top allows users to quickly move to anchored points further down the screen and this menu remains at the top of the screen at all times switching to a burger menu once the mobile site is initiated.
What is TRIZ?
TRIZ is a problem solving methodology based on logic, data and research, not intuition. It draws on the past knowledge and ingenuity of many thousands of engineers to accelerate the project team's ability to solve problems creatively. As such, TRIZ brings repeatability, predictability, and reliability to the problem-solving process with its structured and algorithmic approach. It is defined by 40 Inventive Principles, working off the contradiction of 39 TRIZ Parameters, which form the basis of all invention.
CHALLENGES
I took extra effort to make sure I was keeping track with classes, IDs and the structuring of div elements. I made sure that each would relate fluidly into the .css file and tried to categorize each section as I built it so it could be found easily when updating.
As I set about building the website first, then applying the functionality, I found that when I went to include the JavaScript tooling, it was quite messy and hard to de-bug, so I gathered the files I was thinking of using and set them up in a separate ‘tester’ file. In here I did most of the de-bugging and copied them directly into the main files, adjusting where necessary. I found this method very successful. Getting the JavaScript to function properly, whenever a new piece was added to the main.js file would sometimes disrupt previous functionality, and this always proved to be tricky to overcome.
Initially, I spent a while trying to figure out why the .js functionality wasn’t working and moved the linked files around within my <head> tags as well as switching between CDN and downloaded saved files. This was solved by including the script within the HTML <body> section.
The 40 principles section was probably the hardest task, and so should it have been as this was the main attraction. I love vectors and I love .svg, so instead of using .png or .jpg, I wanted to create illustrative elements with the .svg tools offered within HTML. This was a huge task and took up probably the largest singular chunk of my time, as I was applying the (somewhat simple) line graphic 40 times, I had to figure out how to position them on the screen in the correct place and adjust the x and y pixel points accordingly. I applied the dots at the end of each line by using a <marker>.
So now everything was up to date, I had to make it responsive. This caused a lot of grief trying to get the vectors to work properly (I still think the shrinking of the 40 Principles needs to be improved) and also keep all the text in line a make sure the bootstrap elements were acting properly. I queried and played but was still unhappy with the huge text and crazy margins once the screen would shrink, eventually deciding to create 2 states and add further functionality to my JavaScript file. This allowed me to create a new class which had smaller headers and acute margins. Though this also meant a lot of work going back through all the code and changing elements and values around here and there.