Wireframe Design with Google Sheets

Background

At the beginning of the Capstone: Perception project, I was tasked with coming up with an initial wireframe prototype for our project. I am not a UI design person, so this was a big challenge for me. Furthermore, I was also very busy at the time, as I was working in parallel on my GSoC project.

Problem and Solution

I researched some basic wireframing software programs in order to figure out how to best go about this task. However, I found many of these programs ill-suited for our needs or clunky to work with. As a dyed-in-the-wool math person, I got the idea to create the wireframe a using a spreadsheet. The only other alternative was to physically hand draw the UI, and well, I’m not much of an artist. Here is what I came up with:

Outcome

The resulting spreadsheet wireframe design ended up being warmly received by my teammates and our sponsor (AWS Elemental). The humble spreadsheet provided all the details we needed to brainstorm around going forward with the project.

More About the Project

In the end, I was assigned to the back end team for the project and not the UI/front end team, but nevertheless, it was an interesting experience to show how a math person can “think outside the box” by using familiar tools to solve a UI problem. To read more about this project, see my post about the Perception app.