Freelance UI/UX Designer - Interaction Design, Visual Design, User Flows, Prototyping, Information Architecture
Ben Williams, Stakeholder
Freya,Shelley,Diandra, Projection Designer & Branding Experts
4 Weeks, 2022
BLOK, an award-winning fitness brand, sought to expand its digital presence to better serve its growing community of fitness enthusiasts. While its beautifully designed physical studio spaces and diverse class offerings were well-established, the brand lacked a dedicated mobile app to bridge the gap between physical and digital fitness experiences.
This project focused on transforming BLOK’s existing website into a streamlined mobile app that delivers seamless booking, personalized fitness journeys, and community engagement. With an emphasis on integrating physical and digital spaces, the app was designed to reflect BLOK’s core values of creativity, inclusivity, and innovation, empowering users to achieve their fitness goals with ease.
Barriers to User Engagement and Community Growth
Blok lacked a dedicated fitness app, making it difficult for users to access personalized recommendations, track progress, and connect with the fitness community, limiting engagement and overall experience:
Blok lacked a dedicated fitness app, forcing users to rely on fragmented platforms, limiting accessibility for discovering classes, tracking progress, and participating in a unified fitness experience
The absence of a tailored app resulted in missed opportunities for personalized recommendations, hindering users’ ability to achieve fitness goals efficiently
Without a centralized app, users faced difficulties connecting with the Blok fitness community, leading to reduced interaction in challenges, social sharing, and fostering a sense of belonging
Auditing the Bloktv website and Using their data analytics
Bloktv’s data analytics tool helped us identify the key user journeys that users who access the Bloktv homepage want to accomplish.
01.Affiliate Page: Monopoly Casino landing page for affiliates
Users primarily visit the site to explore and discover fitness classes. This involves browsing through a variety of classes based on type, difficulty, and instructor.
Access detailed information about each class, including descriptions, schedules, and instructor profiles.
The ability to schedule and reserve spots for upcoming classes is a key feature, ensuring users can plan their fitness routines and secure spots in their preferred classes.
While not the primary focus, a small percentage of users might explore community engagement features, such as achievement sharing, challenges, and connecting with other fitness enthusiasts.
The user research phase focused on deeply understanding the needs, pain points, and behaviors of Blok’s target audience. Using tools like empathy maps, we captured user motivations and challenges to inform design decisions. A competitive analysis highlighted strengths and untapped opportunities in the fitness app landscape, guiding our approach to deliver a standout experience. Additionally, we mapped user flows to ensure seamless navigation, optimizing interactions to align with user goals and enhance overall satisfaction.
01.Landing Page User Journey Map
Understanding Key Market Players to Shape BLOK’s Strategy
Examining fitness app leaders like PureGym, Gympass, and MyFitnessPal reveals crucial insights into user expectations and industry trends. By identifying their strengths—such as personalization and seamless navigation—and addressing their limitations, BLOK can craft a unique and engaging digital experience tailored to its community’s needs.
To create a seamless and user-centric fitness app, the iteration process for BLOK combined user flow mapping, detailed wireframes, and usability testing. This iterative approach ensured every interaction was thoughtfully designed, prototyped, and validated with real-world feedback. By focusing on continuous refinement, we aligned the app’s functionality with user needs, bridging the gap between initial concepts and an intuitive final product.
Gathering Actionable Insights Through User Testing
Usability tests were conducted via Zoom with a script and protocol guiding the process. Users completed tasks, identified clickable elements, and shared feedback. The goals were to evaluate navigation for finding fitness classes, the clarity of the booking process, and the effectiveness of the workout tracking system in helping users monitor progress and achievements.
Imagine you're a new user signing up for the first time. Walk through the onboarding process, and share your thoughts on the clarity of instructions, ease of account creation, and any challenges you encounter. Pay attention to how well the system guides you through the initial setup.
Imagine you're a new user signing up for the first time. Walk through the onboarding process, and share your thoughts on the clarity of instructions, ease of account creation, and any challenges you encounter. Pay attention to how well the system guides you through the initial setup.
Select a fitness class you'd like to attend and go through the process of booking it. Pay close attention to the booking interface, the clarity of information provided, and the overall flow. After booking, assess the confirmation message and share your impressions. Highlight any areas that stand out or could be improved.
01.Design System in Figma: Figma and code implementation examples.
Streamlined Class Booking Experience
The homepage design focuses on effortless class management, with card-based layouts and intuitive time filters for quick navigation. Personalized features, including past booking recommendations and clear categorization for Digital and Studio classes, ensure a seamless and engaging user experience.
Studio Page Design:
The Studio class reservation interface is divided into two sections. Upon entry, users are presented with an initial page organized chronologically by time. A collapsible calendar at the top enables users to select specific time slots for class availability. The page also displays the booking status of each class. Furthermore, filters are tailored to highlight Blok Studio's distinctive features.
Digital Page Design:
Blok's online courses are another standout feature. The overall layout of the Digital page mirrors that of the Studio page to maintain brand consistency. Similarly, filters are categorized to align with the unique characteristics of each course. Users can easily reset all filters with the "Remove All Filters" option.
Class Details and Product Page
The Class Details page provides key course and instructor information, clear availability, and streamlined booking confirmation with preparation reminders. The Product page organizes items like beverages, equipment, and memberships, making it easy to search, wishlist, and shop while aligning fitness goals with lifestyle needs.
Product Purchase Journey
This design simplifies the shopping journey with personalized recommendations, dietary labels, and integrated online-offline options. The QR-code pickup system bridges digital and physical spaces, boosting convenience and user satisfaction.
User Profile Page
Focused on personalization, the profile page uses modular design to let users customize content and settings easily. Quick access to app features ensures a tailored, intuitive, and engaging user experience.
During the height of the pandemic in 2020, my team and I designed an innovative projection concept for BLOK’s campaign, aimed at recreating the gym atmosphere at home. By mapping users’ moving silhouettes onto the walls, the design eliminated concerns about facial expressions, allowing members to focus solely on their movements. This immersive experience brought a sense of health and mindfulness to fitness routines, helping users stay connected to BLOK’s ethos even in the absence of physical studio access.
