A woman carrying dumbbells and then in a mobile phone screen

BLOK

Embark on a journey through the creation of BLOK, an innovative gym app born from the collaborative efforts during my master study experience. As the sole UI/UX designer in this project, I spearheaded the design process, crafting an intuitive interface that seamlessly blends functionality with aesthetic appeal. Beyond the app's development, our group collaborated to design a comprehensive campaign, introducing BLOK to the world. Join me as we delve into the intricate details of BLOK's UI/UX design process and campaign development, exploring how it transcends boundaries to empower users on their fitness journey.
RESPONSIBILITY
User Research
Prototyping
Product Design
Design System

TOOLS
Figma
There are two mobile phones, one shows the homepage, the other shows the appointment interface of the app.
Design Brief

BLOK is an award-winning studio and digital fitness platform, specialising in Cross Discipline Training.
The boutique gym now run more than 500 classes a week in beautifully designed studio spaces.
Create Digital Product for Blok
-Explore the impact of movement on creativity
-Explore relationship between physical space and digital space for the reopening of Blok after restrictions lift

All work should take into consideration:
-The relationship between the physical and digital
-The necessity to connect with and foster a sense of community and inclusivity in all forms.

An illustration of a computer in the top left corner with lots of messages and to-do lists and then an arrow pointing to the mobile phone screen.
Challenge

Blok currently lacks a dedicated mobile application, resulting in a gap in the market for a tailored fitness platform that addresses the unique needs of fitness enthusiasts in London. Without a dedicated app, users face challenges in booking the class, accessing personalized fitness experiences, tracking their progress, and engaging with a fitness community seamlessly.

Problem Statement

- No Dedicated Fitness phone platform: Blok lacks a standalone app, limiting users' ability to access a centralized platform for discovering fitness classes, tracking workouts, and participating in a fitness community.
- Missed Personalization Opportunities: The absence of a dedicated app means missed opportunities to provide users with personalized fitness recommendations, hindering their ability to achieve targeted fitness goals.
- Limited Community Interaction: Without a dedicated app, community engagement is constrained, preventing users from actively participating in challenges, sharing achievements, and building a sense of community within the Blok fitness ecosystem.

Empathy Mapping

Audience 75% female, 25% male
46k followers Instagram
46k subscribers on mailing list

Instagram audience:
18-24 - 6.6%
25-34 - 56.3%
35-44 - 27.4%
45-54 - 6.9%

Mailing audience:
18-24 - 2%
25-34 - 69%
35-44 - 14%
45-54 - 2%

There are four areas in total, the top left is a purple piece of paper with six different ideas written on it, and the bottom left is a yellow piece of paper with something written on it
Identify

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.

A computer containing the contents of Blok's official website

Class Discovery (40%):

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.

Scheduling and Reservations (30%):
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.

View Class Details(20%):

Access detailed information about each class, including descriptions, schedules, and instructor profiles.

Community Engagement (10%)

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.

Competitive Analysis

Some of the competitors in the fitness field

There are three panels for analysing competitive products: Competitors, Strengths and Weaknesses.

Blok is a well-established fitness platform in the UK, offering a diverse range of fitness classes. While it has a strong presence on the web, the absence of a dedicated mobile app may impact user engagement and convenience.

Strengths:
- Established Brand Presence: Blok has a strong reputation in the fitness industry.
- Diverse Class Offerings: A wide variety of fitness classes catering to different preferences.
- Active Community Engagement: Strong presence on social media for community interaction.

Opportunities:
Mobile App Development: Developing a dedicated mobile app can significantly enhance user engagement and accessibility.
Enhanced Personalization: Investing in advanced workout tracking and personalized plans can attract and retain users.
Integrated Community: Bringing community engagement within the app can foster a sense of belonging among users.

BLOK User Flow
Blok user flow, the left is the landing page, then there are some problems, choose yes users can directly login but choose not users need to register an account, the solution has a mobile phone registration, email registration or other social accounts.Homescreen that show the blok class product and community
Low-Fidelity Wireframe
draft
High-Fidelity Wireframe
wireframe

Usability Testing

Usability tests were done via Zoom. I wrote a script and a protocol for the testing process and asked the user to perfom certain tasks, identify clickable parts of the prototype and give observation and feedback.I avoided using leading questions that included an assumption that may not be true, or influence the interviewee to answer in particular way

Test Objectives

1. Understand how easily users can navigate the Blok platform to discover fitness classes based on their preferences.
2.Determine the clarity and ease of the booking process, including selecting a class, reviewing details, and confirming the booking.
3. Evaluate the effectiveness of the workout tracking system in helping users monitor their fitness progress and achievements.

Prompt

Prompt 1 : 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.
Prompt 2: 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.
Prompt 3 : 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.

Usability Test Conclusion

Overall, the usability test revealed that the Blok platform offers a user-friendly experience for navigating classes, booking sessions, and tracking workouts. While users generally found the platform easy to use and navigate, there are opportunities to enhance the filtering options for class discovery and provide more contextual information during the booking process. Additionally, further improvements could be made to the workout tracking system to offer users more customization and insights into their fitness journey.

UI DESIGN

Through careful consideration of user needs and preferences, we aim to design an interface that not only simplifies navigation but also inspires motivation and fosters a sense of community. From class discovery to workout tracking, every interaction is an opportunity to enhance user satisfaction and drive engagement.

Style Guide

The goal is to create a cohesive design for usability and engagement. Key components include defining our color palette, typography, and iconography for consistency across the platform. Prioritizing clarity and functionality, we aim to elevate the user experience and set industry standards. I refer to BLOK's brand guideline, using the brand's corresponding colours and fonts.

Homepage Design:

I've crafted the homepage to prioritize users' existing booked classes for easy access and navigation. Leveraging card-based design, each class is presented with selectable time slots, ensuring intuitive interaction. Recognizing Blok's segmentation into Digital and Studio categories, I've implemented convenient time filters at the top for seamless browsing. Class cards include essential details like course name, time, and location, enhancing user understanding. To enhance user engagement, personalized recommendations for previously booked classes are showcased alongside a dedicated section for upcoming bookings. Additionally, I've strategically positioned tabs at the bottom for Studio and Digital class reservations, streamlining user journey and navigation..

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 Page:

Upon accessing the class details page, users are presented with essential course and instructor information, along with the remaining availability. A prominent booking success icon confirms successful reservations and provides reminders regarding any necessary equipment for the class.

Product Page:

As Blok's selection of in-house products continues to expand, insights from Blok's Instagram feed reveal ongoing collaborations and proprietary brands. Products are analyzed and categorized into beverages, equipment, memberships, food, protein powders, and other items. Users can add products to their wishlists, utilize search functionality, and manage their shopping carts.

Product Details Page:

In addition to basic product information, including material icons for dietary preferences, personalized product recommendations are provided. Users can quickly access their shopping carts and wishlists from this page. Options for promo codes and convenient in-studio pickup for offline orders are available.

User Profile Page:

With a focus on customization and personalization, I've empowered users to curate their profile pages according to their preferences. Utilizing modular design elements, users can effortlessly customize the content displayed, enhancing engagement and personalization. Quick access to user settings and app functionalities further enhances usability and convenience, ensuring a tailored and intuitive user experience.

User Settings Page:

Employing a pop-up design approach, I've designed the user settings page to prioritize accessibility and ease of use. Detailed user information is presented clearly, allowing for quick reference and modification. With intuitive functionality for configuring app settings, users can seamlessly tailor their experience to meet their needs and preferences, contributing to overall satisfaction and user retention.

There were multiple activities I wanted to run to make this a success:

Research the user(s) further
How is the current websitecatering/ not catering to their needs?

Accessibility needs
Usability testing sessions with multiple user groups to identify the different use cases that could appear across the large demographic of users

Gather insights
Run offer sessions/ pops up to improve the user engagement and navigation of the digital product

OTHER DESIGN

During the Covid time (2020), myself and 3 other team members (Freya, Shelley and Diandra) also designed a Projection for BLOK to use in BLOK's campaign. The fast pace of urban life makes us neglect our health and aggravates our life pressure. In the brief of blog, we want to return to the main line of health. Because of the epidemic, we can't go to the gym. Thinking about how to bring the atmosphere of the gym home is the main source of our project.

Instead of a mirror in their studios, gym members can exercise in front of a wall, wheretheir moving silhouettes are mapped onto the walls. This experience take away thefacial features and the worry of making weird faces when exercising, and entirelyfocuses on the movement alone. The members can fully immerse themselves in themovement and not worry about anything else.


TOOLS:

Touchdesinger
After Effect

We have created these projections in response to BLOK’s Cross Discipline Training diagram, selecting 5 main focuses of strength, endurance, reset, flexibility and skill-catering the visuals of these projections to suit the classes, and using the studio spaces as a canvas for artworks. The 5 visual outcomes were carefully curated according to colour theory and how they relate to each of the activities that fall under the different training focuses.

We chose the element of calm blue combined with water to create a flowing feeling. The moving wave points guide the development of movement and breathing, to create a more peaceful atmosphere and let the participant spay more attention to their own breathing and exercise flow.

I spearheaded the creation of the immersive space wall focusing on Flexibility and Skill. Tasked with integrating sound interaction to enhance user immersion, I led the conceptualization, design, and technical implementation processes. Through iterative refinement, we ensured seamless integration and optimized user experience, ultimately enriching the BLOK environment and empowering users in their fitness pursuits.

Your browser is too small. Resize your browser to view desktop version of the website.