Co-exist with Lake Macquarie
A university project in collaboration between USYD and Lake Macquarie city council.
Timeline
USYD S1 2023
Feb 23 - Jun 23
Platform
P5.js website
Resolume arena
My role
UX/UI designer
Design technologist
Primary tools
An interactive and immersive installation crafted to raise awareness about urban heat and water level concerns.
This project has been selected to pitch to MAP mima.
👨💻 My role
I collaborated with 3 other student designers throughout this project.
I regualarly engaged in design meetings and conducted various UX design methods from research to ideation to prototyping.
I lead the development of the p5.js interactive website(client).
🧠 Welcome to my thought process
Design brief
Designing for the Multi-Arts Pavilion, mima, a multifunctional cultural precinct managed by the Lake Macquarie City Council.
“The aim of the project is for you to advance your UX design skills by broadening the notion of ‘experience’ to
encompass both tactical (short-term, focus on the user interface) and strategic (long-term, focus on the organization) aspects of Product Design.”- Design brief
University of Sydney
The collaboration between MAP mima and the Design Lab at The University of Sydney seeks to develop lighting and digital infrastructure alongside a creative response that facilitates a relationship between people and place.
Digital placemaking
Defining the identity and use of a public space through digital experiences. The intent is to design provoking experiences that
grounds visitors to the site and facilitates an experience between place and people.
The cube
An indoor exhibition room with 360 degrees projection screen across the room. It is approximately 64 square metres, which can fit approximately 16 adults for each individual to move around comfortably.
📍Reframe the design space
🔎Background research
4 main terrains
These diverse terrains offer a rich ecosystem supporting various flora and fauna, contributing to the ecological balance and providing habitats for numerous species. Additionally, they provide recreational opportunities for visitors, allowing them to appreciate the natural beauty and engage in activities such as birdwatching, hiking, and water sports.
🔎Background research
Urban heat
A rapidly expanding region for enterprises, industry, housing, and tourism in Lake Macquarie. It is projected that current and future development, as well as the conventional "hardstand" infrastructure connected to these areas, will intensify the consequences of excessive heat.
🔎Background research
Water level
“Food security is definitely becoming more of a concern, especially with the current extreme weather events occurring across the country and the increasing cost of living, and for people living near our waterways, flooding and lake level rise is another concern.” - Manager Environmental Systems Karen Partington
🔎Site research
What does it feel like on-site?
As a group, we visited the site to explore it firsthand. This gave us a direct experience and allowed us to notice details that we wouldn't have discovered otherwise.
🔎Site research
Family and community
Our findings highlighted the surrounding area of Lake Macquarie as an ideal destination for families. The location is a preferred choice among locals, and MAP mima is a popular venue where families often come to unwind. Lake Macquarie is an exceptionally family-friendly location that offers a wealth of educational opportunities. It presents an ideal setting for parents to engage in meaningful conversations with their children, promoting not only learning but also fostering stronger family bonds. Therefore, family and education must be essential elements to consider in our design approach.
🙂Persona
🙂Persona
📍User journey map
Painpoints and opportunities
We crafted an user journey maps to understand and visualise the end-to-end experience a user has. We identified pain points and areas of improvement to enhance the overall user experience. The user journey map also serve as collaborative tools, allowing cross-functional understanding and alignment across various members within the group
💡Ideation
We engaged in extensive design meetings and utilised ideation methodologies to generate innovative concepts grounded in our research findings.
Refined concept
🔨 Prototype
✂️Low fidelity prototype
A quick user testing
We crafted an user journey maps to understand and visualise the end-to-end experience a user has. We identified pain points and areas of improvement to enhance the overall user experience. The user journey map also serve as collaborative tools, allowing cross-functional understanding and alignment across various members within the group
💻Figma prototype
A quick user testing
We crafted an user journey maps to understand and visualise the end-to-end experience a user has. We identified pain points and areas of improvement to enhance the overall user experience. The user journey map also serve as collaborative tools, allowing cross-functional understanding and alignment across various members within the group
🧪User testing
We crafted an user journey maps to understand and visualise the end-to-end experience a user has. We identified pain points and areas of improvement to enhance the overall user experience. The user journey map also serve as collaborative tools, allowing cross-functional understanding and alignment across various members within the group
🔗User flow
We crafted an user journey maps to understand and visualise the end-to-end experience a user has. We identified pain points and areas of improvement to enhance the overall user experience. The user journey map also serve as collaborative tools, allowing cross-functional understanding and alignment across various members within the group
🔧Code development
1 Interface Landing Page - Page switching:
To realize page switching, we need first to create different js files in HTML, then create the function of this page in different js files, and finally use mouseClicked of button and setTimeout call function in different pages.
🔧Code development
2.1 detailed functions-image slider
To realize image slider, first in the HTML set the classes to slider, img, and dots, then set initialise variables to read the class in HTML through getElementById. Finally, set to change slide's function to rotate images automatically. Collaborating with HTML, CSS, and js are the most systematic and clean way possible.
🔧Code development
2.2 detailed functions-displaying educational text
To implement clicking to bring up text, first store the desired text as an array and then press the button to randomly render the text using the mousePressed event.
🔧Code development
2.3 detailed functions-screen scrolling
Since the map size of the cube cannot completely match the screen size of the mobile phone, in order to ensure that the user can clearly correspond to the mobile phone and the cube projector, we choose to use screen scrolling to realize this function.
To achieve this, firstly, set the image coordinates, height, width, whether to drag the image and the last mouse x coordinates. Then, based on the mouseDragged and mouseRreleased functions, the background coordinates changed with the mouse coordinates.
🔧Code development
2.4 detailed functions-breathing dots
Since we need to represent multiple dots in different locations, we chose class as our breathing dot implementation. Breathing dot x, y, radius, color, and breathingSpeed are the initial object instances of this class. The amplification and reduction of radius presented breathing states and changes in x and y values as different positions.
The user completes the interaction by tapping on breathing dots. This interactive process is realized through the mousePressed event, and the dots class also realizes the state change after clicking.
🔧Code development
image slider iteration
Again, through the collaboration of HTML, CSS and js, compared with the previous one, this iteration not only reduced the complexity of the code but also realized the clicking to switch images. CSS provides precise control over the layout of buttons, slider style, and logo of next and previous to better represent HTML and js functionality.
🔧Code development
Connect OSC
Iteration of speed and transparency:
Based on the feedback from user testing, we conducted multiple tests and made adjustments to the transparency and effect speed. Users reported difficulty in perceiving the motion of the layers initially due to the speed of the effect. As a result, we fine-tuned the speed settings and arrived at a more comfortable value. The speed and transparency of each layer were also different in order to create a more dynamic feeling.
Iteration of automatic reset:
To gain a deeper understanding of the notion that the environmental problem is perpetual, we implemented a feature where these values reset to their initial state after 10 seconds when transparency, sound, and speed reach zero.
Server: 360° projection screen
Developed with Resolume arena
This prototype highlights stunning visual effects projected onto a 360-degree arena wall, providing users with an immersive experience. Created with Resolume Arena, it combines graphics and audio layers for a captivating multisensory display.
Client: Website browser
Developed with Javascript p5.js
The prototype showcases the website browser that users will interact with. The interface controls the movements of the projection screen by employing the OSC protocol to transfer data. User interactions constantly update the values of each layer within Resolume Arena in real time.
