The Website Was Designed Before It Was Built

This week I finished the first milestone of my Internet Applications Development assignment.

Interestingly, despite the unit being centred around Vue.js, I didn't write a single line of Vue code.

Instead, the entire assignment focused on understanding the problem before attempting to solve it.

Designing Before Developing

The assignment asks us to design a website for a Melbourne-based non-profit organisation that promotes environmental sustainability. I decided to focus on urban greening and tree-planting programs, although several other environmental topics were available as well.

My tasks this week included:

• Researching similar non-profit websites
• Writing an executive summary
• Creating a sitemap
• Designing three user personas
• Producing low-fidelity wireframes using Figma

At first, I found it a little strange that none of these tasks involved programming.

After completing them, I realised that they answer a much more important question than "How should I build this?"

They answer "What exactly should I build?"

Looking at Websites Differently

One part of the assignment required researching existing charity and environmental websites.

Normally, when I visit a website, I'm only interested in finding the information I need.

This time, I found myself asking completely different questions.

• Why is the donation button placed here?
• Why is volunteering easier to find on some websites than others?
• Which information is shown immediately?
• Which content is hidden deeper inside the navigation?

I realised that good websites don't simply present information.

They guide users towards an action.

User Personas Were More Useful Than I Expected

Creating fictional users initially sounded like a paperwork exercise.

It turned out to be one of the more interesting parts of the assignment.

I created three different personas:

• A university student looking for weekend volunteer opportunities.
• A recent high-school graduate searching for temporary summer positions.
• A website administrator responsible for managing news and maintaining the platform.

Each persona wanted something completely different from the website.

Once I finished writing them, I found myself naturally asking questions whenever I designed a page.

Would this volunteer quickly find nearby opportunities?

Would the administrator be able to update information efficiently?

Would a first-time visitor understand what the organisation actually does?

These fictional users gradually became a way to evaluate my own design decisions.

Learning Figma

This assignment was also a good opportunity to spend more time using Figma.

I had used it briefly before during volunteer work, but mostly for viewing existing designs and discussing user interfaces.

Creating wireframes from scratch was a different experience.

Without worrying about colours, typography, or animations, I could focus entirely on layout and user flow.

It turns out that a simple collection of grey boxes can reveal surprisingly large design problems.

A Different Perspective on Web Development

Perhaps the biggest takeaway from this week is that software development begins much earlier than I expected.

I used to think web development started with creating a project and writing code.

Now I realise that a considerable amount of work happens beforehand—understanding users, researching existing solutions, organising information, and planning how people will interact with the final product.

Writing code is only one part of building software.

Designing the experience is another.

The next stage will finally involve turning these ideas into a working Vue application. It'll be interesting to see how closely the finished product resembles these first sketches.