Robots in Public Space

Interactive Website Design

ROLE

Sole Web Designer

SKILLS

Information Architecture, Web Design, Interaction Design, No-Code Development, Project Communication

PROJECT TYPE

Interactive Research Website

RESULTS

Published Website

TEAM

Multidisciplinary team including researchers, 3D modellers, and designers

Background

How can we design robots to enhance public spaces?

This question drove the "Robots in Public Space" project at Wonderlab, where researchers explored how robots could integrate into everyday environments. Through workshops, they encouraged participants to reflect, create, and discuss the future of urban robotics.

To expand its reach and submit the research for the Australian Good Design Award, Wonderlab needed a website—a platform to translate complex research into an interactive experience that would engage the general public, impress academics, and stand out to award judges.

My Role

A sole designer, managing design and delivery from end to end.

As the sole web designer, I led the project from start to finish, handling:

  • Information architecture & content structure

  • Visual and interaction design (Figma → Framer)

  • Cross-functional communication with researchers and 3D modellers

  • No-code website development

  • Project ownership and timeline coordination

I worked independently but closely with stakeholders, navigating uncertainty, feedback loops, and evolving content.

Understanding
the Project

The best way to understand the research? Experience it.

Before the web design project officially began, I joined a speculative robotics workshop hosted by Wonderlab. It involved both digital and hands-on activities, such as designing robots using everyday materials and AR-based robot interaction.

(Photo 1) Workshop participants visualising future robots using various materials.
(Photo 2) AR activity showing how robots could appear in real public spaces.

This immersive experience helped me grasp the project’s core question—how robots could exist meaningfully in public—and inspired me to design a site that bridged academic research and visual storytelling.

Challenges
Overview

Real-world projects rarely go as planned.

Throughout the project, I encountered several challenges, from shifting timelines to limited resources. Instead of seeing them as setbacks, I treated each as an opportunity to adapt, prioritise, and take initiative.

Below is a summary of the key challenges I faced and how I addressed them:

Challenge
Approach

Limited stakeholder availability

Took initiative with communication: prepared visuals before meetings, shared progress updates via email, and led efficient review sessions.

Evolving research content

Created a shared Google Docs template to structure and refine content collaboratively. Built a flexible layout to adapt as text evolved.

No developer & no coding

Selected a no-code tool, Framer.
Built the full site independently without coding skills.

Tight budget and time

Conducted market research to find a cost-effective tool, structured the timeline efficiently, and focused on one section at a time to ensure faster approvals and reduce rework.

Need for clarity & engagement

Used scroll-based storytelling, consistent typography, and lightweight animations (Lottie, optimised GIFs) to create a smooth, accessible experience.

Let’s start to talk about project management

Here is how I managed this project while building trust with the interdisciplinary team.

Approach

Since time is limited, let’s focus on efficiency.

Although I’m familiar with the Double Diamond framework, it wasn’t practical for this fast-paced, evolving project. Instead, I took a flexible, outcome-focused approach—blending research understanding, design, and feedback into a continuous loop.‍

‍We didn’t have the capacity for extensive user research, but I still applied a user-centred mindset, always asking: “What would help the audience understand and enjoy this speculative research?”

‍The design needed to be engaging but easy to follow, lightweight but expressive.

Collaboration

Clients may express vague ideas,
but designers must deliver clear and focused solutions

After our first meeting, I was introduced to a wide range of ideas and directions. To avoid future confusion and move the project forward clearly, I created a presentation summarising my understanding of the project direction, design possibilities, and key goals and shared it in the second meeting. This helped everyone align early and gave structure to an otherwise broad brief.

Screenshot of your early presentation
Visual summary of project understanding and key directions after the initial kickoff meeting.

We were all busy, so efficient communication was crucial.

‍As the project progressed, I maintained that same initiative by:

  • Sending weekly updates with visual progress and summaries to client

  • Preparing multiple design variations to help stakeholders make fast decisions.

  • Leading clear, focused review sessions with well-documented options

This not only kept the project on track—it built trust and confidence among the team.

Content Structure

Clarifying the narrative before designing the visuals.

As the research content evolved, I suggested using a shared Google Docs template to help the team shape and refine their submissions.

While I’m more comfortable working directly in Figma, I recognised that effective collaboration sometimes means adapting to tools others are more familiar. This structure made it easier to organise content and plan layouts efficiently.

Now, let’s talk about the design itself.

Here’s how I iterated through several rounds of UI design, optimised the overall layout, and added subtle interaction features to create a more engaging and interactive user experience.

VIsual Direction

I wanted it to feel alive—but not overwhelming.

I started with a mind map to explore visual ideas inspired by the project’s speculative nature. From there, I built a mood board that combined images of crowded public spaces with clean, bold typography—a contrast that captured both the complexity of urban environments and the speculative ideas of how robots might integrate into them.

When I shared it with the client, they responded positively, so I established this as the foundation of the visual identity moving forward.

Screenshot of your early presentation
Mood board depicting the initial design direction

Iteration Process

Stay flexible and keep communication open.

Using Figma, I created wireframes and interactive prototypes that allowed me to communicate early ideas even before all content was finalised. Since the research was still evolving, my goal was to stay adaptable and focus on visualising direction rather than final details.

Start with what matters most.

I began by designing multiple versions of the hero section, knowing it would set the tone for the rest of the website. During feedback sessions, clients reviewed each version and shared input. Once we agreed on a direction, I applied that visual language across the rest of the site, ensuring consistency from top to bottom.

1st Iteration

Used a monotone colour palette for a modern, clean look, but received feedback that it felt too flat and didn’t reflect the speculative nature of the research—especially the role of robots.

2nd Iteration

Experimented with a modular layout and embedded 3D robot models, but usability feedback revealed that navigation was unclear and the structure felt confusing to users.

3rd Iteration

Introduced a cityscape image as the landing visual and added scroll-triggered animation. As users scroll, the Melbourne view fades out and the core research statement appears—making the experience more immersive and the research aim immediately clear.

Building the Website

No code? No problem. I just needed the right tool.

I chose Framer as the most cost-effective and flexible solution after comparing several no-code tools. It offered the right balance between design freedom, interaction capabilities, and ease of maintenance, making it ideal for a small-scale, research-driven project like this.

Impact

🏆 The website was successfully launched and submitted for the Australian Good Design Award.
🥳 Stakeholders were happy with the result, especially how clearly and visually the research was communicated.

Reflections

Adapting, Leading, and Delivering.

This project taught me how to lead with initiative under real-world constraints. Working independently from concept to launch challenged me to be both creative and resourceful—especially when navigating shifting stakeholder input and tight timelines.
I learned the value of clear communication and adaptable planning, particularly when collaborating with research teams still shaping their content.
Above all, this experience reinforced my belief that good design goes beyond visuals—it’s about making complex information approachable and engaging, even in speculative contexts.