2533 GALLERY WEBSITE

The purpose of this case study is to create a digital platform for the 2533 Gallery. This new website will effectively mirror the gallery's mission of connecting artists with enthusiasts and fostering a vibrant cultural hub. Our goal is to design a user-friendly and visually appealing experience that facilitates exploration, education, acquisition, and art appreciation. The project aims to establish the gallery's online presence, enhance user engagement, and ensure that the website aligns with the gallery's commitment to showcasing diverse contemporary and traditional art.

The primary goals of the 2533 Gallery website project are to establish a compelling online presence that showcases the gallery's diverse contemporary and traditional art, featuring curated exhibitions and artist profiles. The design aims to enhance user experience with intuitive navigation, ensuring accessibility across all devices. Additionally, the website will foster community engagement through interactive elements like virtual tours and educational resources, while promoting membership and sales with streamlined sign-up and purchase processes. Continuous user testing and feedback will ensure the website evolves with user needs, maintaining high levels of satisfaction and engagement.

BUSINESS SCENARIO

The 2533 Gallery showcases diverse contemporary and traditional art, connecting artists with enthusiasts. We provide a welcoming space for exploration, education, acquisition and art appreciation. We enrich our community’s cultural landscape through curated exhibitions, nurturing talents, and engaging programs. As a new establishment, we aim to stand out and become a valued cultural hub in the art community.

BUSINESS GOALS

To establish a strong reputation in the local and international art community, the 2533 Gallery website will showcase a diverse mix of established and emerging artists. This will attract a broad audience, increase visitor numbers, and promote membership through exclusive content and benefits. The site will also feature an optimized online store and clear calls to action to drive art sales and help the gallery reach its profit targets.

DESIGN PROCESS

Our 8+ week design process utilized tools like Survey Monkey, Figma, and Photoshop. We began with 2+ weeks of competitor analysis and user research to gather insights, define personas, create empathy & journey maps. In the next 6 weeks, we created mind maps, site maps, wireframes, and developed prototypes in Figma. We validated our designs through card sorting and conducted user stories, empathy maps, and journey maps to ensure a user-centered, functional, and aesthetically pleasing final product that continuously evolves with user feedback.

    • Figma

    • Survey Monkey

    • Photoshop

    • Google

    • UX Research

    • Site Mapping

    • Information Architecture

    • Prototyping

    • UX/UI Design

    • Overall: 8+ weeks

    • Discovery & Research: 2+ weeks

    • Design & testing: 6 weeks

    1. Target Audience Needs: Users require user-friendly navigation, mobile compatibility, secure transactions, donation options, and detailed information on art classes, tickets, memberships, gallery access, events, and exhibitions.

    2. Survey Insights:

      • 60% prioritize checking ticket/membership prices.

      • 80% consider themselves art enthusiasts.

      • 87% view art galleries as family-friendly.

      • 100% prefer physical gallery visits over virtual ones.

    3. Common Pain Points:

      • Difficulty purchasing tickets online.

      • Lack of clear communication and accessibility information.

      • Frustrations with outdated payment systems.

    4. Persona Insights:

      • Olivia Miller: Needs easy access to information and affordable memberships.

      • Michael Thompson: Seeks family-friendly art experiences and youth-oriented exhibitions.

      • Sang-Min Kim: Requires accessibility features and multilingual options.

    5. Design Validation:

      • Card sorting indicated intuitive page labels, with some needing renaming.

      • Seamless information flow between in-person and online experiences is essential.

    6. User Experience Enhancements:

      • Visually stimulating and interactive content can boost engagement, especially among younger audiences.

      • Email subscriptions and up-to-date content enhance user retention.

    7. Successful Campaign Examples:

      • Art Institute of Chicago's Van Gogh's Bedrooms exhibition combined offline and online promotions effectively.

      • Montreal Museum of Fine Arts' Chiaroscuro Evenings attracted younger audiences with themed events.

  • RESEARCH

    Analyzing competitors, conducting surveys and web research, developing detailed personas.

  • DEFINE

    Mapping the user journey, identifying key pain points, and uncovering opportunities for improvement through empathy and journey maps.

  • IDEATE

    Developing task-specific solutions, creating mind maps and site maps, and wireframes to address challenges and guide implementation.

  • PROTOTYPE

    Creating high-fidelity mockups to visualize and refine the proposed solutions, including interactive elements.

  • EVALUATE

    Conducting heuristic evaluations to identify usability issues and gathering user reviews to gain key insights for continuous improvement.

1.Research: Competitors, Target Audience, Surveys, Web Research and Personas

COMPETITOR RESEARCH

We aimed to gain a comprehensive understanding of the competitive landscape surrounding the 2533 Gallery. To achieve this, we conducted detailed competitor research focusing on the strengths and barriers of key players in the market. This involved extensive analysis of similar galleries and art spaces, identifying features that enhance user engagement and areas where they fall short. As the research progressed, we continuously updated our findings to reflect the latest data and trends. This approach enabled us to view the 2533 Gallery in the context of its competition, offering insights into potential improvements and innovations. Here are the key aspects of our competitor research and analysis:

SUMMARY

The Vancouver Art Gallery offers accessible and engaging content with its user-friendly navigation, high-quality images, and comprehensive educational programs. However, it faces challenges with slow page speed and navigation issues in lower-level menus. The Art Gallery of Ontario (AGO) excels in providing detailed insights on exhibitions and well-organized educational content, supported by high-quality images and clear navigation. Yet, it struggles with page speed and complex navigation due to extensive content. The Montreal Museum of Fine Arts (MMFA) shines with comprehensive information on art collections, educational programs, and a visually appealing design. Nevertheless, it is hindered by slow load times, difficult-to-find navigation links, and a need for better interactive elements. Each gallery addresses different user needs in the cultural and educational space, showcasing distinct strengths and areas for improvement.

  • Accessible and Engaging for a Wide Audience

    • Features diverse, vibrant, and inclusive content

    • Appeals to visitors from various backgrounds

    Informative Visitor Services

    • Offers detailed educational content and interactive programs

    User-Friendly Navigation

    • Clear and easy-to-use navigation menus

    High-Quality Images and Comprehensive Information

    • Displays high-resolution images and thorough artwork descriptions

    Timely Updates on Exhibitions and Programs

    • Regular updates on exhibitions, events, and educational programs

    Booking Tickets Online

    • Convenient online ticket booking

  • Tone & Copy

    • Contemporary, inclusive, and educational content

    • Uses clear and engaging language with a mix of informative, educational, and program-related content

    • Consistent tone and quality across all sections

    • Provides clear information to help users visit and engage with the gallery

    • Highlight exhibitions and programs, and reflecting an easy-to-understand inclusive tone

    Good Features

    • Accessible and engaging for a wide audience: members, donors, visitors, and researchers

    • Clear and easy-to-use navigation for a variety of users

    • High-quality images and comprehensive educational content

    • Booking tickets online, becoming a member, and visiting the gallery store

    • My Gallery feature, stay engaged and informed

    Design

    • Bold and elegant page titles and clear CTAs

    • Clean white backgrounds

    • High-quality images of exhibitions and programs

    • Well-organized and easy-to-navigate

    • Balanced visuals and text

    • Use of red helps to identify important information, labels, and helps with navigation

  • Bad Features

    • Lower-level navigation menus express lower-level site navigation labels in light grey font

    • Hard to see

    • The navigation bar’s location on the homepage

    • Not very responsive

    Wait/Load Times

    • Google PageSpeed Score: 38

    • Time to Load: 3.5 s

    • Size: 2.23 MB

    Functionality

    • Performance does not support WCAG requirements

    • Looks balanced and functions well on space over 1 second, but less fully accessible for users with visual impairments

    • Some images and texts are slow to load, delays in time to first byte

    • No tracking visitor data for bounce rate, exit page, or average time on page

    • Could offer more interactivity, engaging users in various forms of activity to enhance the digital experience

    • Improved accessibility in alt text, breadcrumb, and labeling

  • The Art Gallery of Ontario (AGO), situated in Toronto, is one of the largest art museums in North America. It houses an impressive collection of over 90,000 works spanning from the first century to contemporary art. The AGO is known for its Canadian art, European masterpieces, and cutting-edge modern and contemporary pieces. The gallery also features dynamic exhibitions, interactive programs, and architectural highlights, including Frank Gehry's stunning design.

  • Tone & Copy

    • Mature, welcoming, and engaging content

    • Inclusive tone appealing to a wide audience

    • Engaging language that offers insights into the gallery’s mission and future goals

    • Promotes inclusivity, diversity, novelty, and sustainability

    Good Features

    • Extensive detailed insights into current and upcoming exhibitions

    • Highlights from its diverse art collections

    • Well-organized site structure

    • Booking tickets online, becoming a member, and visiting the gallery store

    • High-quality images, educational content, and interactive programs

    Design

    • Clear design for easy access to information and visitor pages

    • Balanced visual elements with consistent color use

    • High-quality images and interactive features

    • Good categorization of artworks

  • Bad Features

    • Lack of treatment in many pages and on the homepage

    • Navigation menus at the lower end of the page

    • Complicated navigation for some users due to extensive content

    Wait/Load Times

    • Google PageSpeed Score: 50

    • Time to Load: 4.0 s

    • Size: 3.33 MB

    Functionality

    • Average performance for the website

    • Not fully responsive for all user experiences

    • Delays in time to first byte

    • Some issues with load speed and interaction

    • Visitor data tracking is present but limited

  • The Montreal Museum of Fine Arts (MMFA) is a leading cultural institution in Montreal, celebrated for its extensive collection and innovative exhibitions. The museum's diverse holdings include works from ancient civilizations, Canadian and Quebecois art, and international contemporary pieces. The MMFA is dedicated to education and community engagement, offering a wide range of programs, workshops, and special events that cater to all ages and interests.

  • Tone & Copy

    • Elegant, inspiring, informative content

    • Clear and inviting language with informative and educational content

    • Comprehensive information about collections, educational programs, and events

    • Inspires and educates visitors about art, creating a cultural hub

    Good Features

    • Comprehensive information on the museum’s extensive art collections

    • Educational programs, and events

    • High-quality images, user-friendly features, and easy navigation

    • Regular updates on special exhibitions and discounts

    • Effective use of multimedia for enhanced user experience

    Design

    • Clear visual design for easy navigation and access

    • High-quality images and interactive elements

    • Good categorization of collections

    • Simple yet elegant layout

  • Bad Features

    • Lack of visual design in many sub-navigation menus

    • Difficult to find global navigation links on the homepage

    • Some lower-level links are less intuitive

    Wait/Load Times

    • Google PageSpeed Score: 30

    • Time to Load: 3.7 s

    • Size: 2.99 MB

    Functionality

    • Characterized by rapid content rendering

    • Delays in time to first byte

    • Navigation requires multi-layer navigation

    • Visitor data tracking is present but limited

    • Interactive elements could be enhanced for better user engagement ​.

TARGET AUDIENCE

The target audience for the 2533 Gallery comprises art and culture enthusiasts, as well as individuals interested in learning about art who are either visiting or living in the downtown Vancouver area. Their primary concerns include finding the right events and exhibitions, purchasing tickets or memberships, accessing the gallery, and keeping track of events and new exhibitions. They desire easy access to information, visually stimulating and informative content, personalization options, and an email subscription service. Their needs include user-friendly navigation, mobile compatibility, secure transactions, up-to-date content, contact information and support, and a seamless user experience.

HYPOTHESIS

Providing an online platform that offers user-friendly navigation, mobile compatibility, secure transactions, donation options and comprehensive information on art classes, tickets, memberships, gallery access, events, and exhibitions, while also emphasizing visually stimulating & interactive content will lead to increased engagement and satisfaction among art and culture enthusiasts visiting or residing in downtown Vancouver. Additionally, offering an email subscription option and maintaining up-to-date content will enhance user retention and support for the platform.

ONLINE SURVEY & QUESTIONNAIRES

Surveys were crucial for our 2533 Gallery website research, offering a structured method to gather valuable insights from users. We collected two surveys that enabled us to gather both quantitative and qualitative data, essential for understanding user needs, preferences, behaviors, and pain points. In the context of designing a new website for the 2533 Gallery, surveys provided several key benefits:

    • The surveys helped us identify specific user expectations and requirements, ensuring the new website would be tailored to their needs.

    • Understanding common frustrations and obstacles users face allowed us to address these issues effectively in the new design.

    • The data collected offered a clear picture of user preferences, guiding design decisions and feature prioritization.

    • By analyzing user behaviors, we could design intuitive navigation and features that enhance the user experience.

    • The insights gathered from the surveys ensured the new website aligns with the mission of connecting artists with enthusiasts.

    • Surveys provided a structured method to gather valuable insights, which are essential for fostering a vibrant cultural hub.

SURVEY ONE HIGHLIGHTS

    • Checking price of ticket/membership: 60%

    • Purchasing tickets/membership: 40%

    • Online ticket purchase (all or most of the time): 67%

    • Consider themselves an art enthusiast: 80%

    • Want to learn more about art: 93%

    • Art galleries are great places for families: 87%

    • Learning about current/upcoming exhibitions: 60%

  • Primary Reasons for Visiting an Art Gallery Website:

    • A significant portion of respondents ranked checking the price of tickets or membership as one of their top reasons for visiting an art gallery website.

    • Many respondents also placed purchasing tickets or membership high on their list of important reasons.

    Online Ticket Purchasing Behavior:

    • A majority of respondents indicated that they purchase tickets online either all or most of the time.

    Interest and Enthusiasm for Art:

    • Most respondents consider themselves art enthusiasts.

    • Nearly all respondents expressed a strong desire to learn more about art.

    • A large majority agreed that art galleries are excellent places for families.

    Interest in Exhibitions:

    • Learning about current or upcoming exhibitions is also a primary reason for visiting an art gallery website for many respondents.

  • Optimize Information Display:

    • Ensure that pricing and membership details are prominently featured and easy to find.

    • Highlight special offers, discounts, and membership benefits to attract more visitors.

    Enhance Online Ticket Purchasing Experience:

    • Streamline the ticket purchasing process to make it quick and hassle-free.

    • Provide multiple payment options and ensure the website is mobile-friendly to cater to users on different devices.

    Engage the Art Enthusiast Community:

    • Create engaging and educational content about art and exhibitions.

    • Offer virtual tours, artist interviews, and behind-the-scenes looks at exhibitions to enrich the online experience.

    Promote Family-Friendly Activities:

    • Develop and advertise programs and events that cater to families.

    • Highlight family-friendly exhibitions and provide resources such as activity guides for children.

    Regular Updates on Exhibitions:

    • Maintain an up-to-date calendar of events and exhibitions on the website.

    • Use email newsletters and social media to keep the audience informed and engaged.

Visitor Motivations

  • " I usually go to an art gallery with friends to experience new art and expand my art knowledge and interest. Art galleries are cool and unique places to visit.”

  • “ I go to the art gallery as entertainment and to participate in the art community.”

  • “ I go as an activity with my young children. I enjoy the art as well as my family. I appreciate when there are free activities for my children.”

  • “ It is an interesting activity that inspires my creativity. It is also a nice activity to do with friends or family.”

  • “ I go for art appreciation, for the immersive experience, and to get to know more artists.”

SURVEY TWO HIGHLIGHTS

    • Personal enjoyment as a main goal: 90%

    • Unique exhibitions attract to gallery: 90%

    • Discover new art via social media: 60%

    • Discover new art via word of mouth: 50%

    • Prefer physical visits over virtual: 100%

    • Member discounts encourage membership: 80%

  • Personal Enjoyment:

    • A large majority of respondents identified "personal enjoyment" as a main goal when engaging with art.

    Attraction to Unique Exhibitions:

    • A significant portion of respondents ranked "unique exhibitions" as a key factor that attracts them to visiting an art gallery.

    Discovering New Art:

    • Many respondents use social media as their primary method to discover new art galleries.

    • Additionally, half of the respondents use word of mouth to discover new art galleries.

    Preference for Physical Gallery Visits:

    • All respondents identified that they prefer physical gallery visits over virtual exhibitions.

    Member Discounts:

    • A majority of respondents indicated that member discounts would encourage them to become members of an art gallery.

  • Optimize Information Display:

    • Ensure that information about unique exhibitions is prominently featured and easy to find.

    • Highlight special exhibitions and unique aspects of the gallery to attract more visitors.

    Enhance Online Engagement:

    • Promote the use of social media to discover new art galleries.

    • Encourage word-of-mouth recommendations by creating shareable content and referral programs.

    Promote Physical Visits:

    • Emphasize the benefits and experiences of physical gallery visits compared to virtual exhibitions.

    • Create events and programs that are exclusive to in-person visitors.

    Utilize Member Discounts:

    • Offer attractive member discounts and clearly communicate the benefits of membership.

    • Develop targeted marketing campaigns to highlight membership advantages.

Visitor Frustrations

  • “ Encountering difficulty reserving/purchasing tickets online can be frustrating. ”

  • " It is annoying when you didn't even realize an exhibit was there until after it is gone. "

  • " I don't like that the website doesn't have a virtual tour option. Sometimes I want to preview the gallery before visiting in person."

  • " I hate when the membership sign-up process is confusing and lacks clear instructions, which discourages me from joining."

  • " I don't like when gallery websites don't have a virtual tour option. Sometimes I want to preview the gallery before visiting in person."

WEB RESEARCH & SOCIAL MEDIA TRENDS

We aimed to understand our users' demographics, expectations, and behaviors in the 2533 Gallery's online presence. To achieve this, we conducted extensive research, analyzing Google reviews, media articles, case studies, and social media trends. Specifically, we reviewed major art galleries, successful campaigns, and the Statistics Canada survey on arts attendance. These insights helped us create an engaging online user experience that resonates with our audience and entices them to visit our gallery. Here are three key areas of our research and their value:

  • We analyzed reviews from The Montreal Museum of Fine Arts, The Vancouver Art Gallery, and The Art Gallery of Ontario. This research revealed what visitors appreciate and what they find lacking, allowing us to improve our online presence and enhance visitor satisfaction.

  • We studied The Broad Museum's website and successful gallery campaigns. We identified effective strategies for engaging visitors and promoting exhibits, which we can adopt to boost our marketing efforts and online engagement.

  • We reviewed the Statistics Canada survey on arts attendance demographics. This data helped us understand demographic trends and preferences, enabling us to tailor our content and outreach to better meet our audience's needs and interests.ct.

  • Accessible and Engaging for a Wide Audience

    • Features diverse, vibrant, and inclusive content

    • Appeals to visitors from various backgrounds

    Informative Visitor Services

    • Offers detailed educational content and interactive programs

    User-Friendly Navigation

    • Clear and easy-to-use navigation menus

    High-Quality Images and Comprehensive Information

    • Displays high-resolution images and thorough artwork descriptions

    Timely Updates on Exhibitions and Programs

    • Regular updates on exhibitions, events, and educational programs

    Booking Tickets Online

    • Convenient online ticket booking

  • Tone & Copy

    • Contemporary, inclusive, and educational content

    • Uses clear and engaging language with a mix of informative, educational, and program-related content

    • Consistent tone and quality across all sections

    • Provides clear information to help users visit and engage with the gallery

    • Highlight exhibitions and programs, and reflecting an easy-to-understand inclusive tone

    Good Features

    • Accessible and engaging for a wide audience: members, donors, visitors, and researchers

    • Clear and easy-to-use navigation for a variety of users

    • High-quality images and comprehensive educational content

    • Booking tickets online, becoming a member, and visiting the gallery store

    • My Gallery feature, stay engaged and informed

    Design

    • Bold and elegant page titles and clear CTAs

    • Clean white backgrounds

    • High-quality images of exhibitions and programs

    • Well-organized and easy-to-navigate

    • Balanced visuals and text

    • Use of red helps to identify important information, labels, and helps with navigation

  • Bad Features

    • Lower-level navigation menus express lower-level site navigation labels in light grey font

    • Hard to see

    • The navigation bar’s location on the homepage

    • Not very responsive

    Wait/Load Times

    • Google PageSpeed Score: 38

    • Time to Load: 3.5 s

    • Size: 2.23 MB

    Functionality

    • Performance does not support WCAG requirements

    • Looks balanced and functions well on space over 1 second, but less fully accessible for users with visual impairments

    • Some images and texts are slow to load, delays in time to first byte

    • No tracking visitor data for bounce rate, exit page, or average time on page

    • Could offer more interactivity, engaging users in various forms of activity to enhance the digital experience

    • Improved accessibility in alt text, breadcrumb, and labeling

  • The Art Gallery of Ontario (AGO), situated in Toronto, is one of the largest art museums in North America. It houses an impressive collection of over 90,000 works spanning from the first century to contemporary art. The AGO is known for its Canadian art, European masterpieces, and cutting-edge modern and contemporary pieces. The gallery also features dynamic exhibitions, interactive programs, and architectural highlights, including Frank Gehry's stunning design.

  • Tone & Copy

    • Mature, welcoming, and engaging content

    • Inclusive tone appealing to a wide audience

    • Engaging language that offers insights into the gallery’s mission and future goals

    • Promotes inclusivity, diversity, novelty, and sustainability

    Good Features

    • Extensive detailed insights into current and upcoming exhibitions

    • Highlights from its diverse art collections

    • Well-organized site structure

    • Booking tickets online, becoming a member, and visiting the gallery store

    • High-quality images, educational content, and interactive programs

    Design

    • Clear design for easy access to information and visitor pages

    • Balanced visual elements with consistent color use

    • High-quality images and interactive features

    • Good categorization of artworks

  • Bad Features

    • Lack of treatment in many pages and on the homepage

    • Navigation menus at the lower end of the page

    • Complicated navigation for some users due to extensive content

    Wait/Load Times

    • Google PageSpeed Score: 50

    • Time to Load: 4.0 s

    • Size: 3.33 MB

    Functionality

    • Average performance for the website

    • Not fully responsive for all user experiences

    • Delays in time to first byte

    • Some issues with load speed and interaction

    • Visitor data tracking is present but limited

  • The Montreal Museum of Fine Arts (MMFA) is a leading cultural institution in Montreal, celebrated for its extensive collection and innovative exhibitions. The museum's diverse holdings include works from ancient civilizations, Canadian and Quebecois art, and international contemporary pieces. The MMFA is dedicated to education and community engagement, offering a wide range of programs, workshops, and special events that cater to all ages and interests.

  • Tone & Copy

    • Elegant, inspiring, informative content

    • Clear and inviting language with informative and educational content

    • Comprehensive information about collections, educational programs, and events

    • Inspires and educates visitors about art, creating a cultural hub

    Good Features

    • Comprehensive information on the museum’s extensive art collections

    • Educational programs, and events

    • High-quality images, user-friendly features, and easy navigation

    • Regular updates on special exhibitions and discounts

    • Effective use of multimedia for enhanced user experience

    Design

    • Clear visual design for easy navigation and access

    • High-quality images and interactive elements

    • Good categorization of collections

    • Simple yet elegant layout

  • Bad Features

    • Lack of visual design in many sub-navigation menus

    • Difficult to find global navigation links on the homepage

    • Some lower-level links are less intuitive

    Wait/Load Times

    • Google PageSpeed Score: 30

    • Time to Load: 3.7 s

    • Size: 2.99 MB

    Functionality

    • Characterized by rapid content rendering

    • Delays in time to first byte

    • Navigation requires multi-layer navigation

    • Visitor data tracking is present but limited

    • Interactive elements could be enhanced for better user engagement ​.

USER REVIEWS

During the research phase of this case study, leveraging App Store reviews provided valuable, authentic, and diverse user feedback. Analyzing these reviews revealed common pain points, such as complexity, scheduling, search, booking, tracking, and disappearing passes. Here are the key reasons why App Store reviews were beneficial for my research:

  • Genuine Feedback from Actual Users

    Leveraging App Store reviews provided feedback from real users experiencing the app firsthand. This unfiltered and candid input ensured that the insights gathered were genuine reflections of user experiences, enhancing the reliability of the findings.

  • A Wide Range of Perspectives from Various Demographics

    App Store reviews offered a broad spectrum of opinions and experiences from users across different backgrounds, age groups, and usage contexts. This diversity enriched the research by highlighting varied user needs and preferences, ensuring a comprehensive understanding of the app's user base.

  • Easily Accessible for Analysis

    App Store reviews were readily available and could be easily accessed for research purposes. This convenience allowed for efficient data collection and analysis, enabling a quick and thorough assessment of user sentiments and feedback trends.

  • Detailed Descriptions of User Experiences

    Users often provided detailed accounts of their experiences, including specific issues they encountered and features they valued. This level of detail was invaluable in identifying precise pain points and areas for improvement, facilitating targeted and effective app enhancements.

App Store Reviews

  • “ This app tries to be too many things. It adds too many steps and becomes a gatekeeper between the fitness studio and the end user. I found myself having to spend time to understand how to use it. ”

  • “ I can never access my schedules and it is really hard to book classes and access my calendar. ”

  • “ Weekly I attempt to book a class and cannot access the schedule or updated pricing for the company I’m trying to book with. ”

  • “ I like to keep track of my workouts. I wish there was a way to go back and see how many times I went in previous months as opposed to only the current month. ”

  • “ I purchased a 5 class pass and it disappeared after 3. I tried to contact the app and never heard back. It basically stole my money. ”

SUMMARY

Users of the Mindbody app express significant frustration with its complexity and usability, finding it overly complicated and time-consuming, which serves as a barrier between them and their fitness studios. They report difficulties accessing schedules and integrating them with personal calendars, and criticize the app's search functionality as unintuitive and ineffective, particularly when searching for classes associated with specific gyms. Booking classes often presents challenges due to problems accessing updated schedules and pricing information. Additionally, users desire better workout tracking capabilities, wishing to review past workouts beyond the current month. Issues with disappearing class passes and inadequate customer support further contribute to a negative user experience, indicating a need for substantial improvements in the app's usability, functionality, and support services.

2.Define: User Journey, Pain Points and Opportunities.

USER JOURNEY

To improve user engagement and retention in the Mindbody app, I focused on optimizing the booking process. By creating and validating a current-state user journey map, I identified key opportunities for improvement and implemented targeted design changes. This approach addressed critical pain points and enhanced the overall user experience.

  • Optimizing the Booking Process for Maximum User Engagement

    The booking process is a crucial touchpoint where users decide whether to attend a class or service. A seamless booking experience directly influences their likelihood of using the app regularly.

  • Ensuring User-Centered Design Through Comprehensive Validation

    The user journey map was tested through various methods, including user interviews, usability testing, and analyzing app usage data. This ensured that the proposed design changes were based on actual user needs and behaviors.

  • Identifying Key Barriers and Major Frustrations in the Booking Experience

    The analysis revealed several barriers and frustrations that users face during their booking journey. While stress relief initially motivates users, they encounter issues such as search difficulties, inconsistent class details, complex booking processes, and poor fitness tracking. Key frustrations also include uninspiring reminders, overwhelming search results, unclear class information, technical booking issues, and unengaging follow-up features. Addressing these pain points is crucial for enhancing overall user satisfaction.

  • Implementing Targeted Enhancements to Improve Usability

    Several targeted design changes were implemented, including personalized reminders, improved search filters, standardized class information, a simplified booking interface, responsive confirmations, and enhanced fitness tracking features. These changes aimed to create a more intuitive, engaging, and satisfying user experience.

USER SCENARIO

It's Thursday afternoon, and Elena has just wrapped up a challenging week at work. She realizes she hasn't been able to attend any of her regular yoga classes due to unexpected meetings and extended work hours.Feeling the need to unwind and get back into her routine, she decides to find a yoga class for the upcoming weekend to relieve stress and regain focus.

GOALS

Elena wants a user-friendly app to quickly find yoga classes without complex menus. She needs tailored search results, detailed class info, and convenient filters. The booking process should be straightforward and reliable, with immediate confirmation. Ultimately, she seeks a quality experience to unwind and enhance mindfulness.

TASKS, PAIN POINTS & OPPORTUNITIES

In my Mindbody case study, identifying tasks, pain points, and opportunities was crucial for gaining a comprehensive understanding of user behavior and needs. This analysis drove my design decisions, enhanced user satisfaction, and supported business goals by addressing the challenges users faced and optimizing their workflows. By focusing on these elements, I created a more efficient, user-centric app that aligned with both user expectations and business objectives, ensuring continuous improvement and measurable success.

  • Pain Points:

    • Difficulty filtering and searching for specific yoga classes.

    • Inability to easily find sessions that fit their schedule and preferences.

    • Frustration with navigating a cluttered home screen.

    Opportunities:

    • Simplify the home screen to reduce clutter.

    • Make navigation intuitive.

    • Enable users to quickly find sessions that match their schedule and preferences.

    • Streamline the search process to reduce user frustration.

  • Pain Points:

    • Inadequate information about class specifics, instructor qualifications, or user reviews.

    • Difficulty finding necessary information quickly within the app.

    • Complicated user experience due to insufficient information.

    Opportunities:

    • Enhance class descriptions with detailed information and visual aids.

    • Improve user reviews with filters and verifications.

    • Add comparison tools for classes.

    • Streamline search functionality and user interface for quick access to information.

    • Foster community engagement with forums and instructor Q&A.

    • Enhance user experience and decision-making.

  • Pain Points:

    • Limited calendar and wallet integrations.

    • Viewing the schedule is not seamless.

    • Obtaining a pass on the app is cumbersome.

    Opportunities:

    • Integrate with users' calendars.

    • Integrate with users' wallets.

    • Streamline the scheduling and pass obtaining process.

    • Enhance user-friendliness.

  • Pain Points:

    • Lack of an easy-to-access review system.

    • Users struggle to find and leave reviews.

    • Difficulty viewing feedback from others.

    • Complicated or non-intuitive interface for rebooking favorite classes.

    Opportunities:

    • Implement an easy-to-access review system.

    • Simplify the interface for leaving and viewing feedback.

    • Add a quick rebooking feature for favorite classes.

    • Enhance user engagement.

    • Streamline the rebooking process.

3.Ideate: Task Specific Solutions and Wireframes

TASK 1

Opening the Mindbody app to search for suitable classes.

Three key features were identified to improve user engagement and satisfaction. Efficient navigation is achieved through quick access to main categories, enabling users to find desired content swiftly. A personalized home screen featuring motivational quotes fosters better engagement by providing tailored inspiration. Additionally, tailored suggestions offer relevant content that aligns with individual needs and preferences, enhancing the overall user experience. These features collectively aim to create a more intuitive and engaging interaction for users.

TASK 2

Comparing options, reading descriptions and user reviews.

Three key features were identified to enhance app usability and user satisfaction. An accordion menu improves navigation by allowing users to expand and collapse sections, displaying only relevant information. Video previews help users select classes by showcasing the style, instructor, and environment. An AI-assisted comparison function aids decision-making by analyzing and highlighting key differences between classes with personalized recommendations. These features collectively aim to create a more intuitive and engaging user experience, helping users compare options, read descriptions, and review user feedback.

TASK 3

Two key features were identified to enhance scheduling and pass management. An updated pass holder functions like a digital wallet, streamlining access and enhancing convenience by keeping all passes and memberships easily accessible. A modernized, customizable in-app calendar offers various layouts for viewing schedules and integrates with personal calendars to ensure seamless scheduling, prevent conflicts, and enhance organization.

Viewing the schedule, obtaining a pass.

TASK 4

Reviewing the class and potentially rebooking.

To enhance the user experience for reviewing and booking within an app, implementing an in-app rating and survey feature will provide immediate user feedback, allowing for continuous improvement and fostering a more responsive, user-centered experience. Incorporating gamification will motivate users to achieve their goals through fun and rewarding elements, thereby increasing engagement and retention. Additionally, a newsfeed offering regular updates, personalized content, and wellness tips will keep users engaged and informed, further enhancing their overall experience.

4.Prototype: High Fidelity Mockups

View Before >

SOLUTIONS

Improvements derived from the evaluation of four specified tasks.

Several key features have been identified to enhance user engagement, satisfaction, and app usability. Efficient navigation with quick access to main categories, a personalized home screen with motivational quotes, and tailored content suggestions create a more intuitive and engaging user experience. Additionally, an accordion menu improves navigation by allowing users to expand and collapse sections to view relevant information, while video previews and an AI-assisted comparison function help users select classes by showcasing styles, instructors, and environments, and highlighting key differences.

To improve scheduling and pass management, an updated digital pass holder streamlines access to passes and memberships, and a customizable in-app calendar integrates with personal schedules to prevent conflicts. Further enhancements include an in-app rating and survey feature for immediate feedback, gamification to motivate users, and a newsfeed with regular updates, personalized content, and wellness tips. These features collectively aim to create a seamless, engaging, and user-centered experience.

View in Portfolio >

5.Evaluate: Heuristic Evaluation, User Reviews, Key Insights

HEURISTIC EVALUATION

During the research phase of this case study, leveraging App Store reviews provided valuable, authentic, and diverse user feedback. Analyzing these reviews revealed common pain points, such as complexity, scheduling, search, booking, tracking, and disappearing passes. Here are the key reasons why App Store reviews were beneficial for my research:

    • Evaluate Usability: Assess the overall usability of the prototype to identify any usability issues.

    • Improve User Experience: Provide actionable recommendations to enhance the user experience.

    • Ensure Consistency: Check for consistency in design elements, navigation, and interaction patterns.

    • Identify Pain Points: Detect any pain points or friction in the user journey that could hinder user satisfaction and engagement.

  • election of Heuristics: Use Nielsen’s 10 Usability Heuristics as the evaluation framework:

    • Visibility of system status

    • Match between system and the real world

    • User control and freedom

    • Consistency and standards

    • Error prevention

    • Recognition rather than recall

    • Flexibility and efficiency of use

    • Aesthetic and minimalist design

    • Help users recognize, diagnose, and recover from errors

    • Help and documentation

    • Individual Evaluation: As the sole researcher, conduct a thorough walkthrough of each screen and interaction within the prototype.

    • Documentation: Record observations, identify heuristic violations, and note down any usability issues.

    • Severity Rating: Assign a severity rating to each issue based on its impact on user experience (low, medium, high, critical).

    • Recommendations: Provide suggestions for addressing each identified issue.

KEY FINDINGS

    • Observation: The prototype does not maintain clear visibility of the system status; it lacks loading indicators and confirmation messages.

    • Issue: Users may not be informed about the current state or progress of the system, leading to confusion and uncertainty.

    • Severity: High

    • Recommendation: Implement loading indicators and confirmation messages to enhance visibility of system status and keep users informed.

    • Observation: The language and visuals are intuitive and match real-world concepts.

    • Issue: None.

    • Recommendation: Maintain current practices.

    • Observation: Navigation is intuitive, but there is no apparent “undo” functionality.

    • Issue: Users may feel trapped if they make a mistake.

    • Severity: Medium

    • Recommendation: Implement an undo or back option to enhance user control.

    • Observation: The design is consistent across different screens.

    • Issue: Minor inconsistencies in icon design.

    • Severity: Low

    • Recommendation: Ensure all icons follow a uniform style guide.

    • Observation: Error prevention mechanisms are in place but could be more robust.

    • Issue: Lack of input validation in some forms.

    • Severity: High

    • Recommendation: Implement input validation to prevent user errors.

    • Observation: Options and information are easily visible, reducing the need for recall.

    • Issue: None.

    • Recommendation: Maintain current practices.

    • Observation: The prototype supports efficient use for both novice and experienced users.

    • Issue: None.

    • Recommendation: Maintain current practices.

    • Observation: The design is clean and minimalist, which enhances the aesthetic appeal.

    • Issue: None.

    • Recommendation: Maintain current practices.

    • Observation: The prototype lacks error messages, making it difficult for users to understand and recover from errors.

    • Issue: Users may be confused when an error occurs and will not know how to proceed.

    • Severity: High

    • Recommendation: Implement clear and informative error messages with guidance for recovery.

    • Observation: Limited help and documentation are available within the prototype.

    • Issue: Users may need additional support for complex tasks.

    • Severity: Medium

    • Recommendation: Include a help section or tooltips for more complex interactions.

SUMMARY

The heuristic evaluation of the prototype highlighted several positive aspects and opportunities for enhancement. The design of the prototype aligns well with real-world concepts and maintains a high level of consistency, ensuring familiarity and ease of understanding for users. To further elevate the user experience, it is recommended to introduce system status indicators and user control features, such as an undo functionality, which would empower users with more control and freedom. By incorporating robust error prevention mechanisms and informative error messages, users will be able to navigate and recover from errors effortlessly. Additionally, adding a comprehensive help section or tooltips will provide users with the necessary support for complex tasks. These enhancements will significantly improve usability, making the prototype even more intuitive and user-friendly.

First Impressions (User Reviews)

  • “ The visuals complement the theme well; however, the introductory section may benefit from a reduced number to enhance user navigation. Consider organizing the artwork into galleries by section or theme for a more streamlined browsing experience."

  • “ I really like your layout design and the touch of colour. It feels calming and it is say to see the information."

  • “ I would recommend giving a bit more time for the screens, I couldn't read or actually see the images while they were passing by. It is a bit too fast. ”

  • “ Looks great! Only thing I'd suggest is to make these more like buttons, or have a "more" button or something that makes it more enticing to click on.”

  • “ The design is visually appealing and intuitive, making it easy to navigate. The attention to detail and consistency throughout the screens is impressive”

SUMMARY

The prototype's design is praised for its visual appeal, intuitiveness, and ease of navigation. The attention to detail and consistency throughout the screens is notable. Suggestions for improvement include providing more time for screen transitions to allow users to read and view images, and making interactive elements more enticing by enhancing their button-like appearance. Additionally, organizing artwork into thematic galleries and reducing the number of introductory visuals could streamline user navigation and improve the overall browsing experience.

KEY PROJECT INSIGHTS

Throughout my 6+ week design process, I utilized tools like Zoom, Figma, and Photoshop to gather insights, brainstorm, and develop prototypes. This process involved creating a persona, journey map, gathering user and app store reviews, and conducting a heuristic analysis to ensure a user-centered, functional, and aesthetically pleasing final product. Below are the key project insights categorized into outcomes, lessons, and next steps:

    • Improved Usability: The app is now more intuitive and user-friendly.

    • Enhanced Engagement: Reminders and notifications keep users active.

    • Consistent Design: Uniform design across screens ensures a seamless experience.

    • Increased Satisfaction: Users report higher satisfaction with the app’s performance and aesthetics.

    • Streamlined Booking: The booking process is simpler and quicker.

    • Visual Appeal: The updated design is more attractive.

    • User-Centered Design: Prioritizing user needs and addressing pain points are crucial for creating an effective and satisfying app.

    • Visibility of System Status: Providing constant feedback about the system status helps reduce user uncertainty and improves confidence.

    • Simplified Navigation: Ensuring that navigation is straightforward and key features are easily accessible significantly enhances usability.

    • Error Prevention and Handling: Implementing robust error prevention and clear, informative error messages can greatly improve the user experience.

    • Consistency is Key: Maintaining consistent design elements across all screens ensures a seamless and coherent user experience.

    • Engagement Features: Incorporating features like reminders and notifications can significantly boost user engagement and retention.

    • Iterative Feedback and Testing: Regular testing and incorporating user feedback throughout the design process are essential for continuous improvement.

    • Aesthetic and Functional Balance: Striking a balance between visual appeal and functionality is important for creating an app that is both attractive and usable.

    • Comprehensive Help and Documentation: Providing adequate help and documentation supports users, especially when dealing with complex tasks.

    • Flexibility and Efficiency: Designing the app to cater to both novice and experienced users enhances overall satisfaction and usability.

    1. User Testing and Feedback:

      • Conduct broader usability testing.

      • Analyze feedback to identify areas for improvement.

    2. Iterative Design Improvements:

      • Implement changes based on feedback.

      • Refine design elements and interactions.

    3. Feature Enhancements:

      • Add personalized class recommendations and social sharing options.

      • Improve reminder and notification systems.

    4. Performance Optimization:

      • Enhance app performance for smooth interactions.

      • Optimize loading times and responsiveness.

    5. Accessibility Enhancements:

      • Ensure full accessibility by adhering to guidelines.

      • Implement features like voice commands and customizable font sizes.

    6. Comprehensive Documentation:

      • Develop a user manual and in-app help section.

      • Include tutorial videos and FAQs.

Thank You for Viewing

Previous

MINDBODY APP REDESIGN