Rethinking Metafolio: World’s first Metaverse for Architects
The Context
Winning the People’s and Jury’s Choice awards for my architectural design in the ‘Metafolio- World’s first Metaverse for Architects’ competition was a defining moment in my career.
As I transitioned into UX design, I came to realize that the 395 individuals who voted for me were more than just supporters. They became valuable usability testing participants, representing diverse age groups from around the world and varying levels of technological comfort.
Reflecting on the challenges faced by my loved ones during the Metafolio competition voting process, I gained a deeper appreciation and understanding that UX is just as crucial to a product as its novelty.
The Research Outcome
In this article, we will explore a UX case study focused on auditing and redesigning ‘Metafolio’. Let’s explore how this Metaverse can broaden its functionality to serve users from diverse backgrounds, going beyond architects.
Metafolio: Bridging the Gap between Architectural and Digital Experiences
The AEC industry is continuously adapting to address the challenges of design collaborations within time, location, and space constraints.
While VR headsets have been a popular solution, their affordability and accessibility pose challenges for many clients and architects.
Metafolio revolutionizes the design exploration and collaboration process by allowing architects to upload projects as NFTs on the blockchain, enabling seamless design interactions in the metaverse. It’s the first of its kind in terms of its usability in the AEC industry, developed in collaboration with IT enabled construction startup- BuildNext.
Beta version (www.metafolio.in) was launched as a competition for Adizya Architecture Symposium at National Institute of Technology Calicut, India in February 2022.
My Work Breakdown Structure
The approach adopted and work break-down structure for the UX audit and redesign of Metafolio are outlined as follows:
Research Statement
Through comprehensive research and analysis of user stories and market trends, my goal was to decrease bounce rates and improve conversion and click-through rates (CTRs) on the Beta platform. This involved boosting user engagement and uncovering the untapped potential of the architectural metaverse.
My research aimed to improve architecture design visualization and collaboration by building and enhancing:
1. visibility of system status,
2. user trust and platform credibility,
3. user control and freedom,
4. flexibility and efficiency of use and
5. accessibility.
I. Problem Exploration
To gain comprehensive insights into the problem landscape of addressing the architectural communication gap, a variety of research methods were implemented, as follows:
- User Interviews
- Customer Journey Mapping
- Heuristic Evaluation of Existing Design
- Competitor Analysis
- Technology and Scope for Future Expansion
1. User Interviews
I formulated a questionnaire to identify user goals, hypotheses, and interview questions before conducting user interviews for the different user personas- architects, clients and explorers.
During the interviews with architects and users who utilized the website for project upload and voting respectively, I discovered two significant pain points, particularly from the client’s perspective.
2. Customer Journey Mapping
To ensure an unbiased research, I mapped the customer journey for architects and clients to understand their motivations before evaluating the existing design.
I identified pain points and opportunities based on the goals, stories, and touchpoints for the various user personas.
3. Heuristic Evaluation of Existing Metafolio Website
Based on my findings, I prioritized the user flow of exploring, accessing, and experiencing different design projects, as well as accessing the project views, during the UX Audit.
The key findings were organized as follows:
- User’s objective for each step in the flow.
- Positive and negative findings for each step aligned with the 10 heuristic principles.
Jakob Nielsen’s 10 general principles for interaction design are as follows:
#1: Visibility of system status
#2: Match between system and the real world
#3: User control and freedom
#4: Consistency and standards
#5: Error prevention
#6: Recognition rather than recall
#7: Flexibility and efficiency of use
#8: Aesthetic and minimalist design
#9: Help users recognize, diagnose, and recover from errors
#10: Help and documentation
4. Competitor Analysis
In the competitor analysis, I examined competitors and related industries to gather valuable insights for enhancing the existing design.
A. Metaverse Sites:
The Product designer of Metafolio’s existing website conducted a competitor analysis, studying platforms like Somnium Space, The Sandbox Game, and Decentraland to understand their plot allocation methods.
During the redesign process, I referred back to these websites to gain inspiration and identify best practices for creating an immersive architectural metaverse.
The main focus was to achieve continual user engagement and trust.
According to my observation, an ideal homepage addresses these challenges through the following:
- Attention grabbing viewport that establishes trust.
- User-specific scrollable content: Provide value and cater to users’ interests, such as latest trends and styles, while avoiding overwhelming technical jargons.
- Building trust: Showcase testimonials and service partners (NFT blockchain and APIs used).
- Additional help and relevant links (in the footer.)
B. VR Games and Apps:
I analyzed VR apps to identify feature sets that enhance the 360° experience and gathered insights from Play Store reviews.
Additionally, I referred to ‘User Experience Guidelines for Design of Virtual Reality Graphical User Interfaces’ by Sofia Fröjdman and Microsoft’s UI button design for mixed reality to deepen my understanding.
I prioritized user pain points and identified opportunities for future VR and HUD integration based on the research scope.
C. APIs for 3D Rendering Products
I studied the evolving trends in 3D rendering tools (Lumion) and APIs for creating 360° images and interactive 3D model prototypes.
The APIs that will be integrated in Metafolio to achieve a seamless project viewing experience are:
- Marzipano: While Marzipano effectively interlinks 360° images and enables tour points creation, the direct user experience with this API’s interface needs to be re-evaluated as identified from the Heuristic Evaluation.
- Shapespark: Embeds interactive 3D prototypes for NFT block maps and project views section.
D. Movie Streaming Apps and Google Maps:
Google Maps and movie streaming websites were studied to draw inspirations for an intuitive 360° viewing user experience.
II. Solution Generation
Based on my findings, it became clear that:
- Architects primarily use laptops/desktops to upload project files.
- Majority of clients and explorers, prefer accessing and enjoying content through their mobile devices.
Given the intuitive flow of architects uploading projects, I prioritized improving the mobile experience for common users exploring projects and viewing them in 360°.
Data- informed research and analysis of user needs underscored the significance of optimizing Metafolio’s mobile experience for the 360-degree viewing and interactive 3D APIs.
A. User flows & Sitemap:
I developed user flows for scenarios when users land on the Metafolio homepage (organic traffic), as well as when a user lands on a project details page after clicking on a shared project link (inorganic traffic).
Since Metafolio’s information architecture was already established, I utilized the research and user flows to develop a site map. This allowed me to identify gaps and determine the essential elements for each page (homepage, project details, and onboarding/sign-up as needed).
B. Conceptual Models
After analyzing both organic and inorganic traffic, the significance of the project details and 360° view pages became apparent.
I conceived ideas for these flows and meticulously evaluated their pros and cons during the iterative process to achieve a seamless experience, functional design, and immersive UI.
i. Project Details Page Explorations
ii. Project 360° Views Page Explorations
III. Solution Validation
1. Wireframes + Prototypes
A. Homepage Viewport — Attention Grabbing Section
B. Onboarding Screens
If the project is confidential, additional onboarding screens will be prompted as shown below. For open projects, users will directly land on the ‘Project details’ page (as described in the next section).
C. Project Overview Page
If the person is already logged in or if it’s an open project in the case of inorganic traffic, clicking a project thumbnail will directly populate the project details page.
D. Project 360° Views for Open Projects
E. Collaboration Feature for Closed Projects
2. Usability Testing
I conducted online usability testing for the primitive prototype, utilizing Maze to gather valuable insights and heat maps.
After analyzing the testing results, I identified the following key findings:
- The average auto-play time for each card was 3.5 seconds, but some cards had an average retention time of up to 5 seconds. This suggests that the carousel piqued users’ curiosity, prompting them to manually slide back through the cards to better understand the website’s purpose.
- The “Back to Top” CTA positioned above the footer proved to be highly functional for all users.
Corrections to be made:
The Project Overview page lacked a back button after the details overlay faded out.
The redesign of the project details page addressed this issue as deduced from the unexpected click pattern observed in the top-left corner, indicating that users wanted the overlay screen to reappear in order to access the back button.
My learnings
Through the Metafolio case study, I explored the platform where the physical and digital experiences converge.
This platform has the potential to revolutionize the AEC industry, serving architects and clients of diverse backgrounds while overcoming constraints of space and time.
Looking ahead, I envision exciting research and development possibilities:
- Phase 2: Integrating VR and land auctions in the metaverse, enabling immersive experiences and real-world connections.
- Phase 3: Implementing a HUD option for the Design Quality Analyzer, empowering clients to make informed decisions based on design performance indicators.
These future developments hold immense potential for transforming the AEC industry and enhancing the both physical and digital user experiences. The Metafolio case study has been an inspiring journey, reaffirming my passion for designing user experiences that transcend traditional boundaries.
