Make Us Visible
Website Design
Make Us Visible is a series of AR experiences that brings historic monuments to life. This project was a collaboration between XR Ensemble; medienkunst e.V. and Scavengar.
My role was to conceptualize, design and build a responsive website for the launch of Make Us Visible in Frankfurt. The representation of the multiple stakeholders and location of the monuments were in the key guidelines.
The experience was open to all and was launched on the 27.11.2023. It was the fourth experience launched following the campaigns in New York, Munich, Hamburg and Frankfurt.
Industry
Culture, Art, Tech
My Role
Wireframing, Concept,
Visual and Web Design
Team
CEO, Creative Lead
Timeline
Q4 2023
Tools
Context
Bringing monuments to life.
Make Us Visible Frankfurt highlights the stories of influential female protagonists and their impact on society, focusing on two key locations in Frankfurt's city center - the Goethe and Gutenberg monuments.
The artists — Dagmar Schürrer and Mohsen Hazrati built the AR experiences historical female figures Maria Sibylla Merian and Lise Meitner.
Scenery App Icon for Apple Vision Pro
Approach
Accessible, responsive, and embedded information.
I approached the project by asking crucial questions about the project timeline, key features, target audience, and experience accessibility. Based on the findings, I focused on the following:
Created a streamlined, easily navigable landing page
Incorporated QR codes for direct access to AR experiences
Embedded location information for each monument
Designed responsive layouts for web, mobile, and iPad devices
Integrated hyperlinks to artist and collaborator profiles
Typeface and Colour Palette.
User Interaction Elements
Responsive and fast loading website using Framer.
Since I had 10 days to deliver the project, I worked on some quick wireframes using Figma, to identify the key UI elements.
Then I built the website using Framer.
User Interaction Elements
User Interaction Elements
Solution
Responsive Design with eye catching colors and intuitive navigation.
Responsive design across devices was an essential feature. I focused on:
Desktop: Full-width layout with prominent imagery and easy-to-scan content sections
Tablet: Adjusted grid layout maintaining visual hierarchy and readability
Mobile: Vertically stacked elements with touch-friendly navigation and simplified content presentation
User Experience Considerations
To ensure optimal user experience, I prioritized fast loading times for quick access to information. Implemented intuitive navigation with clear calls-to-action.
Designed an easily scannable layout for efficient information retrieval.
Wireframes in Figma
Interactive UI elements to make the information visually engaging.
Interactive Elements
I incorporated several interactive features to enhance user engagement. Animated transitions between sections
Interactive map showcasing AR experience locations
Hover effects on clickable elements for improved usability
Key Features
Interactive map of AR experience locations
QR code generator for easy access to AR experiences
Artist and sponsor profile galleries
Embedded video previews of AR experiences
Social media integration for sharing
Video overview of the live website
Outcome
The launch was featured in several press releases.
Increased interest and engagement with the AR experiences. The launch was easy to circulate and featured in several press releases.
Successful launch event with high attendance attributed to clear website information.
