DATE
April - July 2022
![Pladdra_mockup_without name.png](https://static.wixstatic.com/media/86cd5f_913f3087165a479a967ec22b1b16e1c4~mv2.png/v1/fill/w_906,h_634,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/86cd5f_913f3087165a479a967ec22b1b16e1c4~mv2.png)
Pladdra -
Augmented Sandbox
Design the playground together
DATE
Sept 2022 - Present
TEAM
Project lead
UX designer
UX/UI designer (Me)
AR developer-Consultant
RESPONSIBILITY
User flow
Prototyping
UI design
TOOLS
Figma
Miro
ClickUp
Agile methodology
INTRODUCTION
Pladdra - Augmented Sandbox is an ongoing project that leverages augmented reality (AR) technology to collaborate with schools and further develop our city. This is the second version of the AR development project.
With Pladdra, we aim to empower the next generation of city-builders by providing them with innovative tools to help shape the future of our urban spaces.
PROJECT GOAL
In an effort to improve maintenance and enhance user experience, our team recognized the need to involve real users in the redesign process for some of the playgrounds in Helsingborg. By co-designing with the community, we aim to empower citizens to contribute to the shaping of their city and inspire creativity and engagement in the process.
Our project, Pladdra - Augmented Sandbox, utilizes AR technology to facilitate the design of dream playgrounds, and we are excited to apply this innovative approach to the playgrounds in Helsingborg.
WORKING PROCESS
Redesign the UI interface
NOV 2022-
DEC 2023
Following the prototyping phase, I started the process of redesigning the app's user interface.
This is the old version of Pladdra.
![Pladdra-old version-1.png](https://static.wixstatic.com/media/86cd5f_91dbee62344c4b9aa84b2a0b64fc2ad3~mv2.png/v1/fill/w_198,h_264,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra-old%20version-1.png)
![Pladdra-old version-2.png](https://static.wixstatic.com/media/86cd5f_12ef2145deab4fcb934c9cb6b303e03f~mv2.png/v1/fill/w_198,h_264,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra-old%20version-2.png)
![Pladdra-old version-3.png](https://static.wixstatic.com/media/86cd5f_a88d6206d927436aa00a16e94bdde44a~mv2.png/v1/fill/w_198,h_264,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra-old%20version-3.png)
The previous version of Pladdra
Re-prototyping
OCT - NOV 2022
As the person in charge of prototyping and UI design for the project, one of my responsibility is to redesign and elevate the user experience of Pladdra, building upon the previous version of the app.
Here are some major design suggestions I have made for the new design:
1) Have switched to a horizontal view rather than a vertical one. This alteration allows for more efficient use of space when scanning the location.
2) A zoom-in and out function based on user feedback.
3) Improved the clarity of shadows to better indicate the object's location.
4) An undo and redo function, which allows for greater flexibility and ease of use for the app's users.
...
![IMG_0178.heic](https://static.wixstatic.com/media/86cd5f_822057f4c67e40eeb0b6720b14a12c31~mv2.png/v1/crop/x_0,y_189,w_3968,h_2519/fill/w_614,h_390,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_0178_heic.png)
Sketch of the new version of Pladdra.
User story mapping
SEPT 2022
Based on the experience learned from our previous project Helsingborgsrummet, we have refined and customized the user flow and developed a detailed user story mapping.
And I have added a few more functions to the user experience, such as zoom in/out, selecting to edit the object, etc.
![Arguemented sandbox - User flow.png](https://static.wixstatic.com/media/86cd5f_2e885d3d1c5a4f27bbb8875690047d3a~mv2.png/v1/fill/w_803,h_278,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Arguemented%20sandbox%20-%20User%20flow.png)
The user story mapping for Pladdra.
Conducting research
SEPT 2022
I was tasked to organise the user flow of the Pladdra, therefore I conducted some research about user needs and market research.
I have downloaded a few AR apps to study their user flows, such as IKEA Place.
![IMG_0175.PNG](https://static.wixstatic.com/media/86cd5f_c76f0837fcde41d882b8fd06fe1f12bf~mv2.png/v1/fill/w_233,h_504,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_0175_PNG.png)
![IMG_0176.PNG](https://static.wixstatic.com/media/86cd5f_0b5f76f757504a0f8517ce0995a6a382~mv2.png/v1/fill/w_234,h_506,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_0176_PNG.png)
I have analyzed the user flow of several AR apps.
Join the project
SEPT 2022
I have joined the team as a UX/UI designer which mainly focuses on user flow, prototyping and UI design.
![Pladdra_mockup2.png](https://static.wixstatic.com/media/86cd5f_b6c3eb86492e4e95b564acfa01481e45~mv2.png/v1/fill/w_980,h_686,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/86cd5f_b6c3eb86492e4e95b564acfa01481e45~mv2.png)
![Pladdra_page1.png](https://static.wixstatic.com/media/86cd5f_7b8ab1850e5341fe8ec57296b9e9817c~mv2.png/v1/fill/w_595,h_397,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra_page1.png)
START DESIGNING YOUR OWN PLAYGROUND
The background of the app is a camera. Users can simply start the app by clicking 'start building'.
![Pladdra_page2.png](https://static.wixstatic.com/media/86cd5f_79562fb60e0b44fb89ca233b7cafdd67~mv2.png/v1/fill/w_595,h_397,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra_page2.png)
ZOOM IN AND OUT FUNCTION
Users can zoom in and out of the playground and objects with two fingertips.
![Pladdra_page3.png](https://static.wixstatic.com/media/86cd5f_d6b06d36804049eabedb4a21b9c780e4~mv2.png/v1/fill/w_595,h_397,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra_page3.png)
CLARITY OF THE SHADOW
Improving the shadow's clarity can more accurately indicate the object's location.
![Pladdra_page4.png](https://static.wixstatic.com/media/86cd5f_9af65366ed074159a4bcd9ea8107b597~mv2.png/v1/fill/w_595,h_397,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra_page4.png)
SELECTING OBJECT
Long-pressing the object allows the user to select and modify its size and position.
![Pladdra_page5.png](https://static.wixstatic.com/media/86cd5f_ef9f133e701e40289090d322420a9dd3~mv2.png/v1/fill/w_595,h_397,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra_page5.png)
OBJECT SELECTING MENU
The app allows users to choose various objects to create their desired playground.
![Pladdra_page6.png](https://static.wixstatic.com/media/86cd5f_5239a4b461464112858fbf05e709828d~mv2.png/v1/fill/w_595,h_397,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra_page6.png)
VIEW THE OBJECT DETAILS
Before adding objects to their playground, users can view the object details.
![Pladdra_mockup3.png](https://static.wixstatic.com/media/86cd5f_f9454611ff8549cc89e30d0de4225677~mv2.png/v1/fill/w_980,h_653,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Pladdra_mockup3.png)