Connect Five: An Interactive Typeface

OCT 2020
Type design, Interaction, and UX Research
St. Louis, MO
connectfive.webflow.io

Problem
Just using code, design a typeface that a user can interact with.

Key Insight
Simple interactions done in a complex and well-calculated can be just as successful as complex ones.

Solution
A typeface built on a 5x5 grid that includes at least one full row and/or column of 5 circles in each letterform. The site displays this underlying structure via appearing and disappearing elements on hover.

Given my lack of experience with JavaScript and JQuery, the research of this project was spent experimenting with the capabilities and learning how to code with this new language. I created a set of 25 circles, each with its own interaction to test the boundaries of simplicity and complexity.

I realized that I had layered way too many interactions on top of one another and this made it difficult for the user to connect their movement to a response. So I needed to tone things back and focus on just a couple of interactions.

Now that I better understood the language of JS and how to more effectively use it, it was on to developing my typeface. I felt comfortable with the circles and the 5x5 grid, so that’s where I started. On the right are the various stages of iteration I went through in developing Connect Five.

Once the full typeface was built out, I was ready to overlay the interactions and build out a test site. Once I had that worked out, I. enlisted my brother to do a think-aloud protocol user test. Having him talk through his experience helped me refine some functions and cut other, unnecessary ones out.