AuGUST 2024 | MockUps and DESSERT

---

Honestly, this month’s sabbatical blog post was a struggle to write. It’s odd because I was excited to share what I had made this month. I learned a new front-end javascript library, created the mockup for my entire portfolio, and I think I might finally “see the forest for the trees” for this project. But when I sat down to write about my experience, I drew a massive blank. 

This is, in fact, my seventh full attempt at this blog post. 

So let's skip to the end for a bit. My ultimate goal for this month was to create a functioning mockup of my full website:

The issue is that this month was all about “mockups” and “frameworks”. Inspiring words, I know. They’re the messy, under-the-hood parts of any project that hardly anyone but the developer and the primary client ever sees. Get this part right, and the result is a healthy flexible product that grows at a good, iterative pace. Get it wrong, and the result is an expensive project that takes too long and quickly dies after launch. But it's a hard process to describe, because every developer and analyst approaches mockups differently. 

As a quick reminder, this project is to:

1. Understand the current sustainability of urban waterfronts and their future potential to address food insecurity at a community level
2. Upskill in communication, data visualization, coding, and 3D modelling
3. Combine points 1 and 2 as a visual portfolio that doubles as speculative fiction about how efforts to restore a local lakefront could impact something as simple as a shared meal 

At the start of this sabbatical in May 2024 (https://saachisadcha.ca/may-2024), I created what I thought was a clear, easy-to-execute-in-one-year project plan:  12 monthly blog posts, 12 graphic novel chapters, and 12 data visualizations. 

If I may use baking as an example, it’s like I planned to grab whatever relevant ingredients (data) I could and create a completely new mini dessert or petit-four every month. Each dessert would showcase the blog, chapters, and data viz for the month. 

They’d probably start super simple but become more complicated as my skills improved. But after I sculpted and painted the render above for fun, I could see that this approach would be a lot of work but the results might just be “kinda meh”. 

Plus I had so many questions:

• How will the user enter this website, and what should they see first?
• How do I keep the focus on waterfronts, sustainability, and food insecurity?
• What do I want users to take away from this experience? 
• Does this fulfill what I want from this project? 
• And so much more

From experience as a data viz analyst and science PhD, I knew that these unanswered questions meant that I was still thinking about “the trees” and not “the forest” and that the concept needed to be scrapped. 

A new mockup was required. 

So I sat down with these questions, reminded myself of the project’s purpose, and opened up Milanote - an organization tool I started using last month (https://saachisadcha.ca/july-2024). The result was a series of flowcharts and visuals that illustrated the look and feel I envisioned for my website, which will serve as both a platform for this sustainability story and my visual portfolio/CV.

When I was done, I sat back, looked hard at the finished low-fi mockup, and realized my project felt less like 12 mini chic desserts, and more like a birthday cake table, with one large cake in the center and smaller, but similarly themed desserts on the sides. 

It sounds childish but hear me out. The user will enter the website via a loading page that sets the style and tone (blowing out the birthday candles). Then they’ll enter the main central page to get the entire data story in a couple of minutes by scrolling through a 15-year timeline (the large birthday cake). 

The user can decide to stay on the main page only or they can explore the project further via specific areas of interest (the decorations on the cake). If they explore enough areas of interest, they’ll unlock a data visualization (the dessert stands, because data should always be the foundation). Completing the data viz experience will in turn unlock a story about a meal shared with friends (the smaller desserts on the table). At any point, the user can easily leave these “side desserts” to return to the “cake”.

From the main page, the user can get more information about the project, data, and references (the recipes and allergy information), or read my CV or monthly blog posts (the baker’s contact information). At any point, the user can leave the dessert table and return when they feel a bit more peckish. 

I finally had a clear idea of the entire experience of my website on paper. Next, I had to create a slightly higher-fidelity mockup that tests functions using the final intended tools. Aside from my beloved 3D modelling programs Blender and Nomad, this now includes React - a javascript library that is front-end developer friendly - and React Three Fiber (https://r3f.docs.pmnd.rs/getting-started/introduction). 

I’m in the very early stages of learning about 3D website building, so I’m not the person to explain this tool. All I can say is that, aside from brainstorming, a majority of this month was dedicated to learning about React via Bruno Simon’s excellent course: 3JS Journey (https://threejs-journey.com/). Using templates from 3JS Journey, and a lot of help from ChatGPT 4, I made the framework of my website, which I shared at the beginning of this blog (https://youtu.be/-mgS_byJlsM).

Right now, this birthday cake/website is mostly a hodge-podge of practice slices that need much work and data to be made real. The candle is a matchstick, the cake is baked but not iced, and the buttercream toppings are still in the pastry bags. A few mini desserts are completed, but require much editing or full redos. 

But that’s ok! I hope what you can see, besides an overused dessert metaphor, is the basis for a solid website that will eventually tell a cohesive story. Over the next eight months, my objective is to realize an aesthetic, well-functioning interactive data viz portfolio that:

1. Demonstrates what I’ve learned about the current sustainability of urban waterfronts and their future potential to address food insecurity at a community level
2. Demonstrates an upskill in communication, data visualization, coding, and 3D modelling
3. Doubles as a speculative tale about how efforts to restore a local lakefront could impact something as simple as a shared meal 
4. Feels like a rustic, aesthetic cake table that gently invites the user in