Image of the project across several iphones

About the Project

“Talk Tech To Me” was a lighting bolt of an idea that zapped my brain one afternoon after wadding though a ton of slack messages and emails about various projects. It struck me that a lot of what people, myself included, were writing was jargon aimed at positioning themselves in an important position in the project. That is when I had a change of heart and wanted to be more direct in my interactions with my coworkers. I also thought what a hoot it would be to make a jargon bot mad-lib generator that I could just unleash on Twitter.


Project Specifics and Restrictions

diagram of traffic

Since it is a silly side project, the requirements were simple. Make it fun, Scale the idea to actually get it made, and make sure that I learn something. Making it fun was easy, but scaling the idea down to parts that I could tackle was a little harder. I really had to force myself to not get too hung up on the details, I needed a website to generate the madlibs and serve as a landing page for visitors, Webspace for the app, and some visuals to connect the twitter account to the landing page. I tried to keep everything as simple as I could so I could really focus on the third requirement, learning. I wanted to learn more about APIs and JavaScript. I decided that I would create a javascript program that could run on the webpage first since that was the heart of the project, and then I would stumble my way through taking that script and making a node.js “app” that would run in the background.


Inspiration

Talk tech to Me inspiration

I owe the visual inspiration to a artist named mosher show. I was drawn to his bright colors and curvy fun lines. I especially liked how the characters have a personality and seem to be talking even when there is no words painted in. Motivation for the project came from just looking around at the design and dev blog posts. I noticed how many of them use a sort of vague jargon as click bait to get you to read the article. It seemed like a simple idea that some of these titles could be turned into a mad-lib and used over and over again.


Visuals

project logo and usage

With the mosher show inspiration in mind I came up with the phone logo that is the base of the visuals on the page and twitter profile. The visuals for this project came fast and easy as I sort of let go of the repeatable structure and system design that I usually try to create. This project could be one off, fun, and whimsical. I tried to push that in the colors, details in the cracked screen, and typography. This was by far the most relaxing part of the project, just making something that no one else had to like but me. I followed a normal design process with sketches, and then refinement in the computer. Ultimately much of the flowing inspirational lines were removed and a compact playful mark was created.

Using the creative momentum from the mark, I skipped the wireframe step, and went right into page design. Usually this would most certainly mean that there would be problems later on. But in this case, the page was so small that it was easy to roll the responsive layout and design into one quick step.


Development

This is where the real learning began. I have taken code schools for Javascript and hacked together something that resembled the madlib program, but when I have a friendly code review with a developer friend, I realized how out of my league I was. But that is why I am doing this. We worked on refining my techniques for manipulating and storing strings, and building the url that twitter needed to tweet.

After that I had no problem coding out the landing page with HTML and CSS. It was fun to work on the styling that came with loading new content on the page, and seeing how the content and graphics interacted as they respond from mobile to desktop. In my day to day job I really only get to interact with one component or I have to stay in a framework. It was great to think about how layouts can shift and reuse components in a one off way.

The Most exciting part of this project was building the twitter bot. The idea was that this bot would be able to drive some traffic from twitter to the site. The problem was that I was throughly out of my element and was really reliant on web tutorials and the help of friends to get it made. Never the less, it was a great experience and one that I would love to revisit on up coming projects.


Outcome

image shows the desktop interaction on the site.

The final Project launched in late October. It was fun to see how far the idea had come and see people post some silly nonsense phrase to twitter. That was the whole point of the project. I wanted to put something out on to the internet that was different and I wanted to learn something while doing it. See the final at thinkerro.com/jargon-bot


Acknowledgements

I couldn’t have done this with our the encouragement of Raine, and the code skills of Olaf, Angelo and Matt. Thank you guys for tolerating my constant random questions while you were trying to work.