Behind the Scenes / June 2017

Journey to Building the Inventor Interactive

When the word “inventor” or “invention” is mentioned, it usually refers to creators such as Thomas Edison, Alexander Graham Bell or Benjamin Franklin. Textbooks fail to mention many innovative people of color who helped shaped the society we live in today. I wanted to educate about and give recognition to inventors of color and their meaningful contributions to society. I also wanted to develop an experience that is engaging and fun to use. In order to make this a goal a reality, I chose to develop an interactive.

Research and Feedback

I spoke with several people including museum educators to get feedback on the project. To get a sense of user expectations, I asked questions about how the app could be used, what value can it bring to users, what content or information they would like to see in the app and who could benefit the most from this project. To get a sense of possible pain points to avoid when developing my web app, I asked if they ever had frustrating experiences with using a website or an app. I compiled all of the responses and learned how to identify target users, potential app features, and content development.

Inventor Interactive
What does my app do?

I then needed to figure exactly how I was going to deliver content to my users. To solve this issue, I developed a flowchart, which is a diagram that represents a sequence of actions or steps within a product. Creating the flowchart was a great exercise in thinking through how I wanted the app to function from start to finish. I asked myself questions such as, what would the user see first when they visit the app? What choices would they have and how many? What happens on each choice? I used the chart to also think carefully about how to present the content. Overall, this helped me to build a user-friendly experience, which is crucial because knowing how the app will operate dictates how it will be coded and developed.

Designing the app

I’m not a designer, so it was hard to figure out how I wanted to present the inventors and their inventions. However, I used this opportunity to learn design basics, including typography and pairing fonts together, shapes, playing with the scale and size of objects, and color. I created a color palette and mood board to help with design ideas and to get my creative side activated. I moved on to creating several design mockups using Photoshop.

To be honest, I struggled with liking my design. Every time I made an adjustment or changed elements around, I didn’t like the way it looked. I first met with Mike, Owner and Creative Director of Interactive Mechanics and we brainstormed on possible designs for the interactive. We talked about how to present the inventions, inventors and dates of the inventions. He also provided feedback on my early designs and got me started on creating a moodboard and color palettes.

I then met Tara, Designer at Interactive Mechanics and she suggested using texture or a collage of the inventions to add to the background. She also told me about, which can be used a source of inspiration during the design process. I also showed the design to my mentor Jeff, Senior UI Engineer, who showed me that I could use inventors as a background for the interactive. All of the feedback was extremely helpful and it taught me about visual consistency and using different elements to tell a story.

One lesson that stood out me during this process is that less is better. I learned it’s best to have a simple and clean design, then to have a design that is overdone or confusing to the user.

Content structure and writing

The next step I completed in this process was researching the content and writing inventor biographies. I created a spreadsheet of the all resources where I found information about the inventors and their inventions. Resources included biographies, articles, images and even youtube videos of some of the inventors being interviewed. I also discovered Google patents, which is a great resource because I found original patents that included diagrams and drawing of inventions. During my research, I came across some interesting facts about the inventors featured in the interactive. For example, Garrett Morgan, developed several inventions including the gas mask, traffic light, and hair straightening product. He was the seventh of 11 children born to Sydney and Elizabeth Morgan. His early childhood was spent working on his family’s farm. Another inventor I discovered was Flossie Wong, she helped discover that HIV causes AIDS. She was the first female in her family to attend college.

Code and development

I used several technologies, including Javascript, PHP, HTML, CSS, jQuery and Handlebars.js. I created a homepage where a user will be presented with a row of inventions and have the ability to swipe to the next row of inventions. Once an invention is selected, the user will see the inventor and bio. To generate HTML for the homepage and inventor pages, I used Handlebar.js, which is a Javascript templating engine. Javascript templating is a method of retrieving your data and displaying onto the web page while keeping data and presentation separate, which is helpful for writing cleaner code and gives a lot flexibility. Templates are also used to generate and format repeating items.

I also created an API or Application Programming Interface as way of delivering data or content to the user. The API is the form of a CRUD database which can add, update, read, and delete an inventor as well as upload images. These actions are also reflected on the interactive itself which means I can add, update or delete content without touching a line of code. This provides a user-friendly and quicker way of updating the interactive.

I’m currently still working on this project and have ideas for version two. I plan on adding more content, an official name for the interactive and more features to enhance the project.

I’m very grateful for the opportunity to apart of the Interactive Mechanics fellowship. It gave me the opportunity to build something completely different from what I’ve done before. I also appreciate working with my mentor, Jeff Majek, as well as having the awesome support of Mike, Amelia, Christina, Tara, Amber and Stacey.

The Interactive Mechanics Fellowship Program aims to build capacity for representation and inclusion in the technology field. We see it as a mutual learning experience for the fellows and for our existing team, so we’ve asked our fellows to share some of their expertise on our blog.