GATHERING INSPIRATION
To gain a deeper understanding of the competitive landscape, we began by thoroughly canvassing the industry, focusing on prominent class booking apps such as Glofox, Momence, Mindbody, and ClassPass. Our primary objective was to analyze these competitors’ offerings to identify trends, strengths, and potential gaps in the market. By examining the features, user interfaces, and overall user experiences of these apps, we sought to gather inspiration and pinpoint areas where we could innovate. This comprehensive analysis enabled us to identify opportunities to differentiate our product, ensuring it would stand out in the crowded class booking app market. Ultimately, our goal was to leverage these insights to create a solution that not only meets but exceeds user expectations, offering a unique and superior experience.
We realised that the OClass Ignite app had the similar design and functions as Glofox. However, certain aspects of the user flow could be improved.
GATHERING INSPIRATION
To gain a deeper understanding of the competitive landscape, we began by thoroughly canvassing the industry, focusing on prominent class booking apps such as Glofox, Momence, Mindbody, and ClassPass. Our primary objective was to analyze these competitors’ offerings to identify trends, strengths, and potential gaps in the market. By examining the features, user interfaces, and overall user experiences of these apps, we sought to gather inspiration and pinpoint areas where we could innovate. This comprehensive analysis enabled us to identify opportunities to differentiate our product, ensuring it would stand out in the crowded class booking app market. Ultimately, our goal was to leverage these insights to create a solution that not only meets but exceeds user expectations, offering a unique and superior experience.
We realised that the OClass Ignite app had the similar design and functions as Glofox. However, certain aspects of the user flow could be improved.
THE CHALLENGE
The OClass Ignite app consisted of a dull color palette, overcrowded designs, and a clouded user flow. These factors contributed to major usability issues. Moreover, we needed to design within a strict set of constraints in order to accommodate multiple custom functionalities and limited developer resources.
MY ROLE
As a designer in my team, I led it and corresponded with our client while building out the designs. We conducted multiple rounds of research, produced sketches, wireframes and mockups with iterations before delivering the final assets and documents.
NEW LAYOUT PROPOSAL
HOMESCREEN
We completely redesigned the home screen with a strategic focus on boosting conversion rates by prioritizing promotions and highlighting key offers. To create a cleaner and more inviting look, we introduced a consistent set of icons with subtle background accents that enhanced visual clarity while maintaining a polished aesthetic.
In addition, we optimized the 'Upcoming Schedule' section by adding an in-line link for smoother navigation and incorporated color-coded status indicators for 'Waitlist,' 'Booked,' and 'Cancelled' classes, making it easier for users to manage their schedules at a glance.
To further streamline the user journey, we placed a heart icon next to the cart, offering quick access to favorite packages and classes, thus improving efficiency and user satisfaction. Collectively, these updates contributed to a more visually appealing interface and an intuitive, user-centered experience that encourages engagement and retention.
Our homescreen redesign boosts conversions with prominent promotions, consistent icons, and subtle accents. Enhanced navigation, color-coded statuses, and quick access to favorites streamline the user journey efficiently.
PACKAGE BUYING SCREEN
To accommodate more listings per page while maintaining a clean and organized appearance, we designed a compact yet visually appealing layout that maximizes space. Each thumbnail now includes a prominently displayed favorites button, allowing users to quickly save preferred options with a single tap. This feature enhances efficiency, especially for repeat customers who frequently return to the same classes or packages.
Additionally, we introduced a quick-buy button on each package, enabling users to make purchases directly from the listing without needing to navigate through additional screens. This streamlined process significantly reduces friction, making it easier for users to complete transactions swiftly.
Overall, these design enhancements improve both the browsing and purchasing experience, catering to users seeking speed and convenience while interacting with the app.
Our redesigned layout maximizes listings per page, featuring favorites and quick buy buttons to enhance efficiency and streamline the user experience.
WHAT I LEARNED
This was a high-impact project with a challenging deadline, requiring us to maintain a high level of focus and adaptability throughout. While many aspects went smoothly, as with any complex project, there were inevitable setbacks and hurdles to overcome. I make it a point to reflect on both successes and challenges after every project to learn and grow from the experience.
One key takeaway from this project was the effectiveness of our small, agile team. Despite the intense pressure and demanding timelines, our team consistently collaborated with precision, communicated openly, and remained resilient. We were able to deliver the product on time without compromising quality, thanks to our agile approach.
The most rewarding aspect of this project was experiencing the agile UX process in action and witnessing its profound impact on both the team and the final product. Our process allowed us to iterate rapidly, involve users consistently for real-time feedback, and adjust our design decisions accordingly. The seamless collaboration minimized stress, encouraged creativity, and resulted in a final product that our client not only valued but also implemented in their current app.
Seeing our work come to life and knowing that it contributed meaningfully to the client’s goals was a gratifying conclusion to a demanding but fulfilling project.
CLASS DETAILS SCREEN
To achieve a sleeker and more modern design, we expanded the class image area, adopting a card-like format that offers a more visually appealing and engaging presentation. This larger image area draws the user’s attention and provides a clearer preview of the class content. Along with this update, we enhanced the information hierarchy by strategically arranging buttons, class details, and credit information in a more organized manner.
By refining the visual order, we ensured that users can quickly grasp essential details such as class availability, booking options, and costs at a glance. This thoughtful arrangement not only improves readability but also guides users smoothly through the decision-making process, resulting in a more user-friendly and aesthetically pleasing interface.
Expanding class images and improving information hierarchy provides a sleeker, more intuitive interface, allowing users to quickly grasp key details at a glance.
DISCOVER
USER TESTING OF THE ORIGINAL OCLASS IGNITE APP
To enhance our understanding and supplement the information provided by our client, we initiated a thorough search for qualitative data. Our goal was to uncover deeper insights into user experiences and identify any early issues in the app that could be addressed in the initial development stages.
To achieve this, we conducted comprehensive testing sessions with two distinct user groups: existing customers familiar with the brand, and new users who had never interacted with the brand before. This approach allowed us to gather diverse perspectives and pinpoint specific pain points that could be corrected in the first few iterations of the app.
This round of user testing was moderated. We conducted in-person and online testings for exisiting users and new users respectively.
GATHERING INSPIRATION
To gain a deeper understanding of the competitive landscape, we began by thoroughly canvassing the industry, focusing on prominent class booking apps such as Glofox, Momence, Mindbody, and ClassPass. Our primary objective was to analyze these competitors’ offerings to identify trends, strengths, and potential gaps in the market.
By examining the features, user interfaces, and overall user experiences of these apps, we sought to gather inspiration and pinpoint areas where we could innovate. This comprehensive analysis enabled us to identify opportunities to differentiate our product, ensuring it would stand out in the crowded class booking app market. Ultimately, our goal was to leverage these insights to create a solution that not only meets but exceeds user expectations, offering a unique and superior experience.
We realised that the OClass Ignite app had the similar design and functions as Glofox.
However, certain aspects of the user flow could be improved.
COMPETITIVE ANALYSIS
We conducted a focused competitive analysis to understand the priorities and key features emphasized by our competitors. This evaluation revealed that our app already included many of the core features found in competing products. However, it also highlighted a significant opportunity to excel in the design and development aspects of these features.
While our competitors offered similar functionalities, there was a considerable gap in the user experience and design quality. This insight underscored the potential for us to enhance our app’s interface and functionality, setting a new benchmark in the industry by delivering a more intuitive, aesthetically pleasing, and user-friendly experience.
The OClass Ignite app had the core components that it needed, but the execution was sub-par as compared to our competitors.
UX AUDIT
Given the continuous updates to the app throughout the project, we made it a priority to conduct regular content audits to ensure quality and identify areas for improvement. Our goal was to uncover opportunities within the execution of the design, focusing on both minor and critical usability issues.
Through these audits, we quickly identified significant problems, such as missing back buttons, broken links, and inconsistencies in navigation, which could hinder the user experience. Addressing these issues promptly allowed us to refine the app’s design iteratively, ensuring smoother interactions and a more polished product that aligned with user expectations and industry standards.
The app was plagued by usability issues — one of which involved having to click on the footer icons to exit a screen in the sign-up flow, when it should have automatically led to the homescreen instead.
DEVELOP
WIREFLOW
Given that our client’s primary objective was to enhance user flows, we concentrated our efforts on wireframing high-impact screens and key modules where functionality needed to be clearly defined. Instead of wireframing every screen, we prioritized those that would have the most significant effect on user experience.
We then created a detailed wireflow to map out the entire user journey, offering a clear visual representation of how users would interact with the app. This strategic approach allowed us to effectively communicate essential screens and interactions to stakeholders, ensuring alignment across teams while staying on schedule to meet our tight deadline. The wireflow provided a strong foundation for subsequent design phases, ensuring that critical user paths were optimized early in the process.
Low-fidelity wireframes were used to communicate content hierarchy and critical functionalities for development.
MOCKUPS
After establishing a clear design direction, we transitioned into producing both high and low-fidelity mockups to bring our concepts to life. These mockups were then transformed into interactive prototypes with limited functionalities, enabling us to conduct iterative rounds of user testing.
This approach allowed test users to interact with a more "polished" version of the design, offering valuable feedback on aesthetics and usability. However, the process also posed challenges, as making revisions to these detailed prototypes required significantly more time compared to rapid prototyping. Despite this, the insights gained from testing with well-developed designs were invaluable in refining the final product and ensuring a high-quality user experience.
High-fidelity mockups and prototypes were great for user testing, as they removed the ambiguity of the design.
CHECK
USER TESTING OF THE PROTOTYPE
Our user testing sessions were conducted on-site, where we closely observed participants as they navigated through the app’s screens. By being physically present, we could capture real-time reactions and subtle user behaviors that might have been missed remotely. Our primary focus was on identifying usability issues, measuring task completion rates, and collecting direct feedback on the overall experience.
This approach allowed us to detect friction points, bottlenecks, and areas where users encountered confusion or frustration. The insights gained from these sessions were instrumental in refining the interface, streamlining the booking and payment flows, and ultimately enhancing both user satisfaction and ease of use. This hands-on testing process ensured that our design decisions were rooted in real user interactions, driving meaningful improvements in the final product.
High-fidelity prototypes were employed for user testing, providing users with a clearer understanding of the app.
EDIT
ITERATIONS
The iteration process for our prototype was a continuous cycle of improvement driven by user feedback, interface refinement, and functionality enhancements. After each round of user testing, we meticulously analyzed the insights gathered to identify pain points and areas for enhancement. We then updated the design, incorporating these learnings to make the app more intuitive, user-friendly, and efficient.
This revised prototype was put through another round of testing to validate the changes and gather further feedback. Repeating this cycle allowed us to progressively optimize the app’s design and functionality, ensuring that each iteration brought us closer to delivering an exceptional user experience that aligns with both user needs and project goals.
Iterations were done based on user feedback to refine designs, enhance usability and overall user experience.
CLASS BOOKING SCREEN
To enhance the booking experience, we separated the time and date selection into distinct fields, allowing users to conveniently choose the month, date, and time of day from organized drop-down menus. This design simplifies the process by breaking it down into manageable steps, making it faster and easier for users to specify their preferences with accuracy.
Once a selection is made, the interface dynamically displays classes that match the chosen criteria directly below the inputs. This approach not only streamlines the booking process but also provides users with clear, relevant options in an organized manner, resulting in a more intuitive and efficient user experience. The overall design encourages quick decision-making while minimizing errors, ensuring that users can effortlessly navigate through the selection process.
Enhancing the time and date selection process with separate drop-down menus boosts efficiency and user satisfaction, offering quick, intuitive access to filtered class options.
DISCOVER
USER TESTING OF THE ORIGINAL OCLASS IGNITE APP
To enhance our understanding and supplement the information provided by our client, we initiated a thorough search for qualitative data. Our goal was to uncover deeper insights into user experiences and identify any early issues in the app that could be addressed in the initial development stages.
To achieve this, we conducted comprehensive testing sessions with two distinct user groups: existing customers familiar with the brand, and new users who had never interacted with the brand before. This approach allowed us to gather diverse perspectives and pinpoint specific pain points that could be corrected in the first few iterations of the app.
This round of user testing was moderated. We conducted in-person and online testings for exisiting users and new users respectively.
GATHERING INSPIRATION
To gain a deeper understanding of the competitive landscape, we began by thoroughly canvassing the industry, focusing on prominent class booking apps such as Glofox, Momence, Mindbody, and ClassPass. Our primary objective was to analyze these competitors’ offerings to identify trends, strengths, and potential gaps in the market.
By examining the features, user interfaces, and overall user experiences of these apps, we sought to gather inspiration and pinpoint areas where we could innovate. This comprehensive analysis enabled us to identify opportunities to differentiate our product, ensuring it would stand out in the crowded class booking app market. Ultimately, our goal was to leverage these insights to create a solution that not only meets but exceeds user expectations, offering a unique and superior experience.
We realised that the OClass Ignite app had the similar design and functions as Glofox. However, certain aspects of the user flow could be improved.
COMPETITIVE ANALYSIS
We conducted a focused competitive analysis to understand the priorities and key features emphasized by our competitors. This evaluation revealed that our app already included many of the core features found in competing products. However, it also highlighted a significant opportunity to excel in the design and development aspects of these features.
While our competitors offered similar functionalities, there was a considerable gap in the user experience and design quality. This insight underscored the potential for us to enhance our app’s interface and functionality, setting a new benchmark in the industry by delivering a more intuitive, aesthetically pleasing, and user-friendly experience.
The OClass Ignite app had the core components that it needed, but the execution was sub-par as compared to our competitors.
UX AUDIT
Given the continuous updates to the app throughout the project, we made it a priority to conduct regular content audits to ensure quality and identify areas for improvement. Our goal was to uncover opportunities within the execution of the design, focusing on both minor and critical usability issues.
Through these audits, we quickly identified significant problems, such as missing back buttons, broken links, and inconsistencies in navigation, which could hinder the user experience. Addressing these issues promptly allowed us to refine the app’s design iteratively, ensuring smoother interactions and a more polished product that aligned with user expectations and industry standards.
The app was plagued by usability issues — one of which involved having to click on the footer icons to exit a screen in the sign-up flow, when it should have automatically led to the homescreen instead.
DEVELOP
WIREFLOW
Given that our client’s primary objective was to enhance user flows, we concentrated our efforts on wireframing high-impact screens and key modules where functionality needed to be clearly defined. Instead of wireframing every screen, we prioritized those that would have the most significant effect on user experience.
We then created a detailed wireflow to map out the entire user journey, offering a clear visual representation of how users would interact with the app. This strategic approach allowed us to effectively communicate essential screens and interactions to stakeholders, ensuring alignment across teams while staying on schedule to meet our tight deadline. The wireflow provided a strong foundation for subsequent design phases, ensuring that critical user paths were optimized early in the process.
Low-fidelity wireframes were used to communicate content hierarchy and critical functionalities for development.
MOCKUPS
After establishing a clear design direction, we transitioned into producing both high and low-fidelity mockups to bring our concepts to life. These mockups were then transformed into interactive prototypes with limited functionalities, enabling us to conduct iterative rounds of user testing.
This approach allowed test users to interact with a more "polished" version of the design, offering valuable feedback on aesthetics and usability. However, the process also posed challenges, as making revisions to these detailed prototypes required significantly more time compared to rapid prototyping. Despite this, the insights gained from testing with well-developed designs were invaluable in refining the final product and ensuring a high-quality user experience.
High-fidelity mockups and prototypes were great for user testing, as they removed the ambiguity of the design.
CHECK
USER TESTING OF THE PROTOTYPE
Our user testing sessions were conducted on-site, where we closely observed participants as they navigated through the app’s screens. By being physically present, we could capture real-time reactions and subtle user behaviors that might have been missed remotely. Our primary focus was on identifying usability issues, measuring task completion rates, and collecting direct feedback on the overall experience.
This approach allowed us to detect friction points, bottlenecks, and areas where users encountered confusion or frustration. The insights gained from these sessions were instrumental in refining the interface, streamlining the booking and payment flows, and ultimately enhancing both user satisfaction and ease of use. This hands-on testing process ensured that our design decisions were rooted in real user interactions, driving meaningful improvements in the final product.
High-fidelity prototypes were employed for user testing, providing users with a clearer understanding of the app.
EDIT
ITERATIONS
The iteration process for our prototype was a continuous cycle of improvement driven by user feedback, interface refinement, and functionality enhancements. After each round of user testing, we meticulously analyzed the insights gathered to identify pain points and areas for enhancement. We then updated the design, incorporating these learnings to make the app more intuitive, user-friendly, and efficient.
This revised prototype was put through another round of testing to validate the changes and gather further feedback. Repeating this cycle allowed us to progressively optimize the app’s design and functionality, ensuring that each iteration brought us closer to delivering an exceptional user experience that aligns with both user needs and project goals.
Iterations were done based on user feedback to refine designs, enhance usability and overall user experience.
NEW LAYOUT PROPOSAL
HOMESCREEN
We completely redesigned the home screen with a strategic focus on boosting conversion rates by prioritizing promotions and highlighting key offers. To create a cleaner and more inviting look, we introduced a consistent set of icons with subtle background accents that enhanced visual clarity while maintaining a polished aesthetic.
In addition, we optimized the 'Upcoming Schedule' section by adding an in-line link for smoother navigation and incorporated color-coded status indicators for 'Waitlist,' 'Booked,' and 'Cancelled' classes, making it easier for users to manage their schedules at a glance.
To further streamline the user journey, we placed a heart icon next to the cart, offering quick access to favorite packages and classes, thus improving efficiency and user satisfaction. Collectively, these updates contributed to a more visually appealing interface and an intuitive, user-centered experience that encourages engagement and retention.
Our homescreen redesign boosts conversions with prominent promotions, consistent icons, and subtle accents. Enhanced navigation, color-coded statuses, and quick access to favorites streamline the user journey efficiently.
CLASS BOOKING SCREEN
To enhance the booking experience, we separated the time and date selection into distinct fields, allowing users to conveniently choose the month, date, and time of day from organized drop-down menus. This design simplifies the process by breaking it down into manageable steps, making it faster and easier for users to specify their preferences with accuracy.
Once a selection is made, the interface dynamically displays classes that match the chosen criteria directly below the inputs. This approach not only streamlines the booking process but also provides users with clear, relevant options in an organized manner, resulting in a more intuitive and efficient user experience. The overall design encourages quick decision-making while minimizing errors, ensuring that users can effortlessly navigate through the selection process.
Enhancing the time and date selection process with separate drop-down menus boosts efficiency and user satisfaction, offering quick, intuitive access to filtered class options.
CLASS DETAILS SCREEN
To achieve a sleeker and more modern design, we expanded the class image area, adopting a card-like format that offers a more visually appealing and engaging presentation. This larger image area draws the user’s attention and provides a clearer preview of the class content. Along with this update, we enhanced the information hierarchy by strategically arranging buttons, class details, and credit information in a more organized manner.
By refining the visual order, we ensured that users can quickly grasp essential details such as class availability, booking options, and costs at a glance. This thoughtful arrangement not only improves readability but also guides users smoothly through the decision-making process, resulting in a more user-friendly and aesthetically pleasing interface.
Expanding class images and improving information hierarchy provides a sleeker, more intuitive interface, allowing users to quickly grasp key details at a glance.
PACKAGE BUYING SCREEN
To accommodate more listings per page while maintaining a clean and organized appearance, we designed a compact yet visually appealing layout that maximizes space. Each thumbnail now includes a prominently displayed favorites button, allowing users to quickly save preferred options with a single tap. This feature enhances efficiency, especially for repeat customers who frequently return to the same classes or packages.
Additionally, we introduced a quick-buy button on each package, enabling users to make purchases directly from the listing without needing to navigate through additional screens. This streamlined process significantly reduces friction, making it easier for users to complete transactions swiftly.
Overall, these design enhancements improve both the browsing and purchasing experience, catering to users seeking speed and convenience while interacting with the app.
Our redesigned layout maximizes listings per page, featuring favorites and quick buy buttons to enhance efficiency and streamline the user experience.
WHAT I LEARNED
This was a high-impact project with a challenging deadline, requiring us to maintain a high level of focus and adaptability throughout. While many aspects went smoothly, as with any complex project, there were inevitable setbacks and hurdles to overcome. I make it a point to reflect on both successes and challenges after every project to learn and grow from the experience.
One key takeaway from this project was the effectiveness of our small, agile team. Despite the intense pressure and demanding timelines, our team consistently collaborated with precision, communicated openly, and remained resilient. We were able to deliver the product on time without compromising quality, thanks to our agile approach.
The most rewarding aspect of this project was experiencing the agile UX process in action and witnessing its profound impact on both the team and the final product. Our process allowed us to iterate rapidly, involve users consistently for real-time feedback, and adjust our design decisions accordingly. The seamless collaboration minimized stress, encouraged creativity, and resulted in a final product that our client not only valued but also implemented in their current app.
Seeing our work come to life and knowing that it contributed meaningfully to the client’s goals was a gratifying conclusion to a demanding but fulfilling project.