brand integration
brand integration
mobile design
mobile design
accessibility
accessibility
december 2024
december 2024
Mobile UI redesign for Tate Modern museum
Mobile UI redesign for Tate Modern museum
I designed a comprehensive UI kit for Tate Modern’s mobile website, enhancing their digital presence with user-friendly layouts and accessibility-focused design. This project involved aligning with Tate's branding while meeting WCAG AA standards to create a seamless experience for all users.
I designed a comprehensive UI kit for Tate Modern’s mobile website, enhancing their digital presence with user-friendly layouts and accessibility-focused design. This project involved aligning with Tate's branding while meeting WCAG AA standards to create a seamless experience for all users.
I designed a comprehensive UI kit for Tate Modern’s mobile website, enhancing their digital presence with user-friendly layouts and accessibility-focused design. This project involved aligning with Tate's branding while meeting WCAG AA standards to create a seamless experience for all users.
Goal
Design a comprehensive UI kit for the Tate Modern mobile app, enhancing the museum’s digital presence and providing an intuitive way for users to explore exhibitions, plan visits, and discover featured artists. The project aligned with Tate’s visual identity and accessibility standards (WCAG AA).
Goal
Design a comprehensive UI kit for the Tate Modern mobile app, enhancing the museum’s digital presence and providing an intuitive way for users to explore exhibitions, plan visits, and discover featured artists. The project aligned with Tate’s visual identity and accessibility standards (WCAG AA).
My role
Created a complete UI kit with color schemes, typography, interactive components, and layouts. Conducted research into Tate’s branding, user needs, and accessibility guidelines to ensure an intuitive and cohesive user experience.
My role
Created a complete UI kit with color schemes, typography, interactive components, and layouts. Conducted research into Tate’s branding, user needs, and accessibility guidelines to ensure an intuitive and cohesive user experience.
Figma
Figma
Wireframe Pro
Wireframe Pro
Miro
Miro
Adobe Illustrator
Adobe Illustrator
My design process
My design process
Research and discovery a
Research and discovery a
Research and discovery a
Ideation and prototyping
Ideation and prototyping
Ideation and prototyping
Visual design and branding
Visual design and branding
Visual design and branding
Documentation
Documentation
Documentation
Identified issues
*conducted by user surveys, data analytics and competitive analysis
Identified issues
*conducted by user surveys, data analytics and competitive analysis
High bounce rate
High bounce rate
Over 50% of visitors leave the site quickly, indicating low engagement and potential issues with content relevance or accessibility.
Over 50% of visitors leave the site quickly, indicating low engagement and potential issues with content relevance or accessibility.
Short time spent on site
Users spend, on average, only around one minute on the site. This suggests difficulty in finding the desired information or a lack of engaging content.
Short time spent on site
Users spend, on average, only around one minute on the site. This suggests difficulty in finding the desired information or a lack of engaging content.
Complex navigation
Complex navigation
Extensive scrolling and a lack of streamlined navigation make it challenging for users to locate key information efficiently.
Extensive scrolling and a lack of streamlined navigation make it challenging for users to locate key information efficiently.
Clarity of offerings
Clarity of offerings
The site struggles to clearly communicate its offerings, making it difficult for users to understand available exhibitions, events, or services.
The site struggles to clearly communicate its offerings, making it difficult for users to understand available exhibitions, events, or services.
Key insights
Accessibility: Improved WCAG compliance for better usability.
User Journey: Simplified navigation for seamless exploration.
Branding Alignment: Balanced Tate’s iconic identity with functional design.
Key insights
Accessibility: Improved WCAG compliance for better usability.
User Journey: Simplified navigation for seamless exploration.
Branding Alignment: Balanced Tate’s iconic identity with functional design.
Key insights
Accessibility: Improved WCAG compliance for better usability.
User Journey: Simplified navigation for seamless exploration.
Branding Alignment: Balanced Tate’s iconic identity with functional design.
For the Tate Modern project, I prioritized user-centered design and accessibility principles. By conducting research into Tate's branding, audience needs, and WCAG AA standards, I created a cohesive UI kit that aligns with Tate’s visual identity while ensuring functionality and inclusivity.
Using wireframing and prototyping, I tested and refined core design concepts to meet user expectations. The resulting design system enhances the user experience while maintaining consistency across the app.
For the Tate Modern project, I prioritized user-centered design and accessibility principles. By conducting research into Tate's branding, audience needs, and WCAG AA standards, I created a cohesive UI kit that aligns with Tate’s visual identity while ensuring functionality and inclusivity.
Using wireframing and prototyping, I tested and refined core design concepts to meet user expectations. The resulting design system enhances the user experience while maintaining consistency across the app.
For the Tate Modern project, I prioritized user-centered design and accessibility principles. By conducting research into Tate's branding, audience needs, and WCAG AA standards, I created a cohesive UI kit that aligns with Tate’s visual identity while ensuring functionality and inclusivity.
Using wireframing and prototyping, I tested and refined core design concepts to meet user expectations. The resulting design system enhances the user experience while maintaining consistency across the app.
Design focus
This mobile-first, responsive design enhances navigation and reduces bounce rates by prioritizing simplicity and user engagement. The minimalist menu structure and tailored content ensure quick access to key features like exhibitions and ticket booking. Bold visuals and streamlined user flows create an engaging and frictionless experience, blending practical information with emotionally rich content to inspire exploration and discovery.
Design focus
This mobile-first, responsive design enhances navigation and reduces bounce rates by prioritizing simplicity and user engagement. The minimalist menu structure and tailored content ensure quick access to key features like exhibitions and ticket booking. Bold visuals and streamlined user flows create an engaging and frictionless experience, blending practical information with emotionally rich content to inspire exploration and discovery.
Design focus
This mobile-first, responsive design enhances navigation and reduces bounce rates by prioritizing simplicity and user engagement. The minimalist menu structure and tailored content ensure quick access to key features like exhibitions and ticket booking. Bold visuals and streamlined user flows create an engaging and frictionless experience, blending practical information with emotionally rich content to inspire exploration and discovery.
Design decisions
Design decisions
The colour scheme is based of the TATE modern design and commonly used colors in external outings. The result is a colorful but comprehensive colour palette, that not only reflects the modern artworks at TATE modern, but is also an extension of their brand identity.
The colour scheme is based of the TATE modern design and commonly used colors in external outings. The result is a colorful but comprehensive colour palette, that not only reflects the modern artworks at TATE modern, but is also an extension of their brand identity.
The colour scheme is based of the TATE modern design and commonly used colors in external outings. The result is a colorful but comprehensive colour palette, that not only reflects the modern artworks at TATE modern, but is also an extension of their brand identity.
Accessibility & WCAG 2.1 compatibility
To ensure an inclusive design, all color combinations meet WCAG AA standards (contrast ratio of at least 4.5:1 for text). This improves readability for users with visual impairments or color blindness, aligning the project with accessibility best practices.
Accessibility & WCAG 2.1 compatibility
To ensure an inclusive design, all color combinations meet WCAG AA standards (contrast ratio of at least 4.5:1 for text). This improves readability for users with visual impairments or color blindness, aligning the project with accessibility best practices.
UI Guide
UI Guide
The UI design uses Tate's custom font to keep the branding consistent and showcase the museum's unique visual style. The font is applied thoughtfully across headers, subheaders, and body text to ensure readability while keeping a modern and refined look. A flexible grid system is used throughout, making it easy to structure multiple sections and pages. This grid helps users navigate clearly and keeps the design visually balanced.
The UI design uses Tate's custom font to keep the branding consistent and showcase the museum's unique visual style. The font is applied thoughtfully across headers, subheaders, and body text to ensure readability while keeping a modern and refined look. A flexible grid system is used throughout, making it easy to structure multiple sections and pages. This grid helps users navigate clearly and keeps the design visually balanced.
Design
The streamlined, image-focused interface creates a user-friendly, intuitive, and visually appealing experience. By simplifying the user journey, the design prioritizes key content like exhibitions and events, making them more accessible and engaging. With a cleaner layout, the updated mobile experience improves navigation and interaction while preserving Tate Modern’s identity.
Design
The streamlined, image-focused interface creates a user-friendly, intuitive, and visually appealing experience. By simplifying the user journey, the design prioritizes key content like exhibitions and events, making them more accessible and engaging. With a cleaner layout, the updated mobile experience improves navigation and interaction while preserving Tate Modern’s identity.
Lessons learned
If I were to do this project again, I would incorporate usability testing to understand how real users interact with both the current Tate Modern mobile website and the redesign. This would also allow me to test WCAG 2.1 compliance with users who have accessibility needs. Additionally, I would expand the content strategy to include features like membership benefits and personalized recommendations, demonstrating how the redesign could adapt to future needs.
Moving forward
Building on the insights gained from this project, I aim to further refine my design process by incorporating user testing earlier in my workflow and exploring ways to gather more actionable data from users. Moving forward, I will focus on creating scalable and adaptable designs that not only meet current user needs but also anticipate future requirements, such as personalized experiences and cross-platform consistency. This project has strengthened my ability to design with accessibility and usability in mind, which will remain central to my work.
Lessons learned
If I were to do this project again, I would incorporate usability testing to understand how real users interact with both the current Tate Modern mobile website and the redesign. This would also allow me to test WCAG 2.1 compliance with users who have accessibility needs. Additionally, I would expand the content strategy to include features like membership benefits and personalized recommendations, demonstrating how the redesign could adapt to future needs.
Moving forward
Building on the insights gained from this project, I aim to further refine my design process by incorporating user testing earlier in my workflow and exploring ways to gather more actionable data from users. Moving forward, I will focus on creating scalable and adaptable designs that not only meet current user needs but also anticipate future requirements, such as personalized experiences and cross-platform consistency. This project has strengthened my ability to design with accessibility and usability in mind, which will remain central to my work.
Lessons learned
If I were to do this project again,
I would incorporate usability testing to understand how real users interact with both the current Tate Modern mobile website and the redesign. This would also allow me to test WCAG 2.1 compliance with users who have accessibility needs. Additionally, I would expand the content strategy to include features like membership benefits and personalized recommendations, demonstrating how the redesign could adapt to future needs.
Moving forward
Building on the insights gained from this project, I aim to further refine my design process by incorporating user testing earlier in my workflow and exploring ways to gather more actionable data from users. Moving forward, I will focus on creating scalable and adaptable designs that not only meet current user needs but also anticipate future requirements, such as personalized experiences and cross-platform consistency. This project has strengthened my ability to design with accessibility and usability in mind, which will remain central to my work.