Cyber-Archaeology Web Plugin
Cyber-Archaeology Web Plugin
Designing the Web UI to connect and navigate between different sites of the Cyber-Archaeology projects.
Designing the Web UI to connect and navigate between different sites of the Cyber-Archaeology projects.
Front End Development • Internship
Front End Development • Internship
Project • 1
Within the Cyber-Archaeology Warehouse, various projects are assigned to interns. During the summer, our team collaborated to develop a central hub platform that unifies all Cyber-Archaeology projects and seamlessly integrates with the Smart Desk.
Overview • 2
The Challenge
How might we create a space that includes all the Cyber-Archaeology projects for the user to explore?
The Solution
We created a web-based menu within the Smart Classroom, enabling users to interact with it through design and coding
Info • 3
My Role
Lead front end developer intern responsible for prototyping and developing the web UI
Team
2 Front End
4 Backend Developers
1 Project Lead
Timeline
June 2023 - July 2023
Tools
Figma
HTML/CSS
Unreal Engine
Project • 1
Within the Cyber-Archaeology Warehouse, various projects are assigned to interns. During the summer, our team collaborated to develop a central hub platform that unifies all Cyber-Archaeology projects and seamlessly integrates with the Smart Desk.
Overview • 2
The Challenge
How might we create a space that includes all the Cyber-Archaeology projects for the user to explore?
The Solution
We created a web-based menu within the Smart Classroom, enabling users to interact with it through design and coding
Info • 3
My Role
Lead front end developer intern responsible for prototyping and developing the web UI
Team
2 Front End
4 Backend Developers
1 Project Lead
Timeline
June 2023 - July 2023
Tools
Figma
HTML/CSS
Unreal Engine
Design Process • 4
Design Process • 4
01 Ideation & Design
01 Ideation & Design
Week 1-2: I discussed with my team to figure out how we want to implement the design onto VR. My team brainstormed the layout and created low fidelity designs.
Week 1-2: I discussed with my team to figure out how we want to implement the design onto VR. My team brainstormed the layout and created low fidelity designs.
02 Code & Design
02 Code & Design
Week 3-4: Once we established our vision for interconnecting the diverse projects, we translated this understanding into a high-fidelity design. My role involved integrating the interface into the website using HTML and CSS.
Week 3-4: Once we established our vision for interconnecting the diverse projects, we translated this understanding into a high-fidelity design. My role involved integrating the interface into the website using HTML and CSS.
03 Testing
03 Testing
Week 5-6: My team and I team collaborated to integrate it into the Unreal Engine, ensuring that all components functioned seamlessly while refining the design through multiple iterations.
Week 5-6: My team and I team collaborated to integrate it into the Unreal Engine, ensuring that all components functioned seamlessly while refining the design through multiple iterations.
Ideation & Design• 5
Ideation & Design• 5
Low-fidelity
Design
Low-fidelity
Design
Low-fidelity Design
In our team discussions, we collectively decided to maintain a Neumorphic design, aligning it with the established aesthetic of the Smart Classroom for a harmonious and consistent user experience
In our team discussions, we collectively decided to maintain a Neumorphic design, aligning it with the established aesthetic of the Smart Classroom for a harmonious and consistent user experience
Our findings revealed that the Smart Desk, from a previous project, appeared overly bright due to the white background in Unreal Engine. As a remedy, we opted for a slightly darker background to address this issue. We started by creating super simple layouts and discussed different types of layouts.
Our findings revealed that the Smart Desk, from a previous project, appeared overly bright due to the white background in Unreal Engine. As a remedy, we opted for a slightly darker background to address this issue. We started by creating super simple layouts and discussed different types of layouts.
Code & Design • 6
Code & Design • 6
High-Fidelity
Design
High-Fidelity
Design
High-Fidelity Design
After iterating the low-fidelity designs and the format of the different pages of the Cyber-Archaeology projects, I worked on creating the high-fidelity design.
After iterating the low-fidelity designs and the format of the different pages of the Cyber-Archaeology projects, I worked on creating the high-fidelity design.
Our final iteration keeps the consistent Neumorphic Style.
The layout of the UI would have the project name to the left and navigate you to the project’s page once clicked.
Our final iteration keeps the consistent Neumorphic Style.
Our final iteration keeps the consistent Neumorphic Style.
The layout of the UI would have the project name to the left and navigate you to the project’s page once clicked.
The layout of the UI would have the project name to the left and navigate you to the project’s page once clicked.
Code
This was one of the more challenging parts of the project! I used CSS, HTML, and React.js to create the interface of the project.
Code
This was one of the more challenging parts of the project! I used CSS, HTML, and React.js to create the interface of the project.
Code
This was one of the more challenging parts of the project! I used CSS, HTML, and React.js to create the interface of the project.
Final Design• 7
Final Design• 7
The final look of the Web UI after coding! The background is slightly darker than the smart desk layout, to make it more visible in Unreal Engine VR. Each project has their page separating the objects/places into different catgegories,
The final look of the Web UI after coding! The background is slightly darker than the smart desk layout, to make it more visible in Unreal Engine VR. Each project has their page separating the objects/places into different catgegories,
Then my team integrated it into Unreal Engine , combining the widgets of the Smart Desk on the top navigation bar. This is how it would appear in a VR setting.
Then my team integrated it into Unreal Engine , combining the widgets of the Smart Desk on the top navigation bar. This is how it would appear in a VR setting.
Lessons Learned • 8
Lessons Learned • 8
Things to improve
Things to improve
If we had more time, I would have loved to conduct extensive user testing and A/B testing, particularly focusing on how users interact with the WEB UI. The web experience significantly differs from the virtual reality setting, making it imperative to gather user feedback and insights for tailoring unique experiences.
If we had more time, I would have loved to conduct extensive user testing and A/B testing, particularly focusing on how users interact with the WEB UI. The web experience significantly differs from the virtual reality setting, making it imperative to gather user feedback and insights for tailoring unique experiences.
Learning
Learning
This project marked my first experience as a team lead for front-end development. It provided valuable lessons in pitching ideas, resolving conflicts, setting and adhering to milestones, and meeting deadlines. Additionally, I delved into the realms of CSS and HTML for the first time, gaining essential problem-solving skills to enhance the designs our team created. I am grateful to my teammates for making this journey a rewarding experience!
This project marked my first experience as a team lead for front-end development. It provided valuable lessons in pitching ideas, resolving conflicts, setting and adhering to milestones, and meeting deadlines. Additionally, I delved into the realms of CSS and HTML for the first time, gaining essential problem-solving skills to enhance the designs our team created. I am grateful to my teammates for making this journey a rewarding experience!
