Vanesa is an ambitious and active person, dedicated to her profession in podology and pleased with the results of her expanding business. She enjoys life in her own way: running in the mornings and taking cold showers make her feel alive. However, due to her increasing workload, she has less and less time to manage her personal and professional tasks throughout the day. She would like to optimize her time to be able to dedicate more time to her family and exercise, as she often forgets to book her training class or doesn’t have time to do so because of her work responsibilities. Nevertheless, she also likes to feel that she is making progress day by day in what she does.
VIKING CENTRO
A real case describing the process of creating a mobile app for a digital ecosystem designed for comprehensive management of a gym chain, focused on task optimization and time efficiency.
Project category: Mobile application (part of a SaaS project as B2B product)
Function: Exclusive UI/UX & Graphic Designer, Analyst, Researcher and Tester
Field: Booking and Scheduling (MVP) – Fitness & Lifestyle (Growth & Scaling phase)
Tools: Figma, FigJam, Adobe Illustrator, Lucidchart, Zoom
Duration: 20 weeks
Brief Overview
The Viking Centro application is an ambitious project consisting of two parts: user part and administrator or coach part (roles). The tool would mainly be used by users to create an account, make session reservations for services or classes of their preference. Additionally, these reservations can also be paid directly through the application.
One of the other key functions is the session configurator. Trought this, users can adjust the quantities and times of their sessions so that the application can automatically reserve these slots. Other features include filters, preview, and download of invoices or information from the different centers of the Viking Centro chain (MVP)
The software, as established with the client; will benefit from future changes, including various improvements such as physical activity tracking features, gamification methods, and activity logging between users, among others. (Growth & Scale phase)
7 Stages of development
Requirements Gathering
What is the main goal of the app?
Target audience for the application: needs, goals and motivations
Analysis
Defining principles and patterns
Functional and Design Insights: friendly interface and minimal steps to complete booking
Third-party integrations. What now?
Design
Expanding horizons through combination of design methods
Information Architecture aimed to simple and consistent navigation
Importance of calculating the amount of information that will be used
Development
Balancing frontend vs. backend: what is our Minimum Viable Product?
Building the app in a way that makes it easy to update and maintain
Testing & Quality Assurance
Minimal cognitive load on the user as main goal is aproached
Reducing user errors and improving satisfaction
App compatibility on different devices
Deployment
Focusing on continuous integration and continuous deployment (CI/CD)
Monitoring and logging app's activities, and why it is so crucial?
Maintenance and Support
Implementing options for continous feedback
User experience: universally iterative process
Project Goals
Of course, the material goal of the application is to provide increasingly varied facilities. However, the main aim is to retain existing customers while offering added value that the business can provide.
The goal of the MVP version of the app is to simplify tasks for users and help optimize their daily free time while enjoying an easy-to-use interface. It is also crucial to emphasize the commitment to resource automation through integration with a dashboard, from which different parts of the business can be managed, such as enabling or disabling application functions, analyzing invoices, or recording profits for future business operations.
The main project goal is business growth; estimating a 25-40% profit within the first two years of the application’s launch.
What is the Main Goal of the App?
The main objective of this product is not to just create a mobile application intended for booking management.
The main purpose is to develop a system that can be iteratively improved and integrated with different features, with the ultimate goal of offering a complete ecosystem aimed at continuous improvement of the user experience based on feedback from both internal and external users of the software.
Requirements Gathering
Target Audience
Even though there was already a target audience for the product, it was still necessary to fully understand them. To achieve this, some practical methods were implemented, including User Profiling and Contextual Inquiry.
These two methods have allowed for a deep understanding of the users’ pain points, their daily situations in which they would use the application, and other preferences.
Vanesa Rincón Gallardo
Age: 33
Gender: Female
Location: Valencia, Spain
Occupation: Enterpreneur, Podiatrist
Education level: Master’s Degree
Income level: Medium-high (~42.000€)
Frequently-used mobile apps
Biography
Goals & Motivations
- Feel the control and convenience of booking your training session or physiotherapy appointment remotely
- Feel part of your local gym community and connect with other users
- Have all the information organized and displayed in one place, in a digital medium
Pain Points & Frustrations
- She doesn’t like having to call, send instant messages, or go to the gym in person to book her class due to her limited available time and busy daily schedule
- Her motivation decreases when she doesn’t feel progress
Pablo Montoya García
Age: 42
Gender: Male
Location: Zaragoza, Spain
Occupation: Retired urban planner
Education level: Bachelor’s Degree
Income level: High (~96.000€)
Frequently-used mobile apps
Biography
Pablo is a retired man who has always had a deep love for nature and animals. After a fulfilling career in urban planning, he now dedicates his time to enjoying the great outdoors and caring for his pets. Pablo finds joy in hiking through forests, birdwatching, and volunteering at local animal shelters. Despite his retirement, Pablo’s days are often busy with various activities and commitments. He sometimes struggles to keep track of his appointments and volunteer shifts, which can be overwhelming. Additionally, Pablo feels anxious about maintaining a healthy lifestyle. He worries about what he should eat and how to exercise effectively. To stay on track, he seeks the guidance of a professional who can help him with nutrition plans and fitness routines.
Goals & Motivations
- Likes to be in constant contact with the people in charge of the activities
- Wants the application to remind you of the attendance to the different activities booked
- Wants to know when your friends are training so that you can socialize with them
Pain Points & Frustrations
- Becomes anxious when some functions are somewhat hidden as it is difficult to reach them
- Feels overwhelmed when an app has too many elements on the screen at once, making navigation confusing and inefficient. (Example: Aliexpress)
Brief Overview
The Viking Centro application is an ambitious project consisting of two parts: user part and administrator or coach part (roles). The tool would mainly be used by users to create an account, make session reservations for services or classes of their preference. Additionally, these reservations can also be paid directly through the application.
One of the other key functions is the session configurator. With this, users can adjust the quantities and times of their sessions so that the application can automatically reserve these slots. Other features include filters, preview, and download of invoices or information from the different centers of the Viking Centro chain.
The software, as established with the client; will benefit from future changes, including various improvements such as physical activity tracking features, gamification methods, and activity logging between users, among others.
Analysis
Defining principles and patterns
Guiding the project towards simplicity by minimizing the number of steps to complete various tasks and offering visual consistency - the goal is to provide a self-sufficient product with flexible and adaptable features as it scales.
The application aims for sustainable and comfortable development for the coding professional. Having established its own design system and the way information is displayed in the software, it seeks to reduce errors and bugs in development.
Functional and Design Insights
We aim to provide the utmost convenience when using the Viking Centro App. To achieve this, a search feature with filters for both: service bookings and invoices has been developed. Additionally, a notification system is included to alert the customer when their class will start within a specified time period, among other features.
To achieve a coherent system throughout development, a specific design system for the product was created. This way, it can be used in the future through the given guidelines and rules
Third-party integrations
Third-party applications have been integrated to enhance the user experience and convenience by using high-quality, secure APIs, thereby increasing the application’s quality.
For example, a payment gateway has been integrated to offer immediate service availability, focusing on the product’s effectiveness for the customer, as developing a payment gateway could extend the project’s duration by several months or even years.
Client-Server Structure
The Client-Server architecture is a robust and advantageous design pattern that provides several key benefits, including scalability, flexibility, decoupling, enhanced security, reusability, and improved user experience. By enabling seamless horizontal scaling, this architecture facilitates efficient handling of increased traffic and demand. Furthermore, its flexibility allows for the development of clients and servers using diverse programming languages, operating systems, and architectures, thereby promoting interoperability and adaptability.
The decoupled nature of clients and servers enables independent maintenance and updates, while also facilitating the implementation of robust security measures, such as authentication and authorization. Additionally, this architecture promotes resource reusability and optimizes user experience through accelerated response times and strategic caching of frequently accessed resources.
What are our customers like?
An interview was conducted with four people who are already customers of Viking Centro gyms through the Zoom application.
The objectives of the interview, among the most important, are:
- Understand their perception of the apps they use, particularly how easy it is to complete tasks within them.
- How is their relationship with technology.
- Determine their level of interest in physical activity.
- Motivations or demotivations…
- Define what can be improved or created so that people enjoy the product, feeling that it complements their gym activities
Analysis Of Users' Feedback
After analyzing the qualitative data provided by the clients, through a thematic analysis of what they have expressed, it has been possible to detect certain patterns of recurrences, repetitions and forcefulness.
3/4 users mentioned that:
Simplicity is key to their app usage
3/4 users cited:
Motivation or lack of it as a key driver in their gym attendance
3/4 users show:
Usage of technology to track their health and fitness progress
3/4 users mentioned:
Too many steps or complexities during the payment process
What do we observe?
To conclude: in most of their testimonials, users are betting on an easy-to-use app, health tracking features and a personalized experience. This means that in addition to focus primarily on these aspects, the app will continue to be shaped by other feedback elements such as Motivation and Engagement features and some technical sections dealing with Payment Issues.
In addition to a complete solution in the form of a digital tool, users want an application that can help them maintain a favorable state of health and intermediate intensity, without extrapolating their activities to a high or professional sports level.
Defining Problems & Prioritizing
The analysis of the solutions was focused on prioritizing the problems according to their impact on the improvement of the application, taking into account the time that each development would cost. It should be noted that the contractor has already expressed his preferences and which solution is the most urgent, therefore from the delivery of the minimum viable product - the improvements will continue to be incorporated as presented throughout the analysis.
The idea is to base product development on impact-effort values in order to structure processes in the best possible way.
Quick Wins
- Simplify app interfaces and processes (e.g., payments)
- Optimize onboarding process (reduce permissions asked at the start)
Low-Hanging Fruit
Automate tasks (gym attendance, reminders, towels)
- Offer simple workout stats in the app dashboard
Major Projects
- Integrate tracking (weight, calories, progress)
- Build a community or social feature (followers’ training status)
Long-Term Investment
- Simplify app interfaces and processes
Offer guided workout routines with video tutorials
Objetivo de la fase: ofrecer funciones principales que se esablecen con el cliente para resolver los problemas troncales mencionados y aumentar el cierre de ventas.
Design
Expanding horizons through combination
Product design has diversified in terms of the interface, through research to determine the most concise and cost-effective way to prepare it.
A series of different design methods have been used, such as Atomic Design, Modular Design, Service Design, and User-Centered Design. The main purpose of this decision is to balance the most characteristic elements of each method and combine them to create a unique and versatile product for all parties: users, designers, and programmers."
Simple and consistent navigation
The design is primarily user-oriented, guaranteeing that all functions are accessible, intuitive, and visible to the user at all times, thereby facilitating a seamless and engaging experience.
The decision to integrate a combination of different design methods has been carefully planned and analyzed with a focus on maximizing the visual deployment of information in each section, while also ensuring a consistent and cohesive visual language throughout the application.
The amount of information matters
The creation of the application follows some essential details regarding design and programming. There is a lot of data to visualize, many of which are dynamic, so it is important to know what to display at the first level and what to work on in subsequent levels.
It is important to show just the right amount of data to avoid hindering user navigation and, above all, not to overwhelm their attention due to the cognitive load that such information can cause.
From service prices to data on trainers and centers - everything is displayed to maximize user focus and orientation.
Low Fidelity Screens
Primeramente se ha desarrollado una serie de wireframes creados a mano sobre un medio digital basados en el sitemap
Information Architecture
El proyecto ha ido pasando por diferentes fases durante el transcurso del desarrollo. Por eso mismo, gracias a su característica de estar en constante evolución como producto, hemos ido afinando el rumbo de la aplicación dentro del ecosistema.
En el sitemap se puede ver un total de tres niveles de contenido (a falta de incorporar futuras mejoras que es posible que expandan la cantidad de dichos niveles). Se han remarcado los elementos o módulos que indican las agrupaciones de la información. También se han indicado las interacciones clave del usuario en ciertas secciones para mejorar la claridad del esquema. Por último, se han especificado algunas funciones basadas en recolección de datos de fuentes como calorías quemadas o puntos ganados para visualizar qué datos se muestran en qué sección.
Primero se ha desarrollado un pequeño esquema general para poder posicionar las pantallas clave y los niveles en los que se situarían dichas pantallas. Más adelante, se han ido añadiendo más niveles y elementos para comprender de la mejor forma posible el funcionamiento de la aplicación a partir de este esquema. Uno de los objetivos principales del por qué de esta estructuración es el enfoque de mostrar la máxima información en las pantallas, seccionada en módulos de tal forma, que la atención del usuario no se vea mermada a lo largo del recorrido.
Development
Frontend & backend as key to achieve the MVP
Despite having sufficient information to know how and where to direct the development, the nature of the application and its development method required defining the point at which the application can be considered a minimum viable product.
Through a mix of strategies offered by MVP Canvas and Lean UX methodologies, it has been possible to determine the exact point to achieve the desired basic, but robust product that meets the main needs of the clients and provides a clear and pleasant user journey.
Easy to update - easy to maintain
Owing to the coder's expertise, it was possible to create an organized product that meets the needs of the gym's clients. However, the crucial pillar of the project is the application's projection towards constant improvement thanks to the feedback provided by the stakeholders.
Thanks to the application's design, its preparation for both Android and iOS platforms, and its responsiveness - it allows for flexible security, design, or content updates at any time without risking the platform's stability or sacrificing consistency.
Testing and Quality Assurance
Minimal Cognitive Load
During the user journey, the idea of a clean and intuitive execution is prioritized with the intention of not creating anxiety or making the user feel lost.
Through techniques such as Unmoderated Remote Testing, among others; the users chosen to perform the test correctly carried out the actions that were planned for different end purposes, defining the application as:
‘perfect for the purposes for which it is intended'
More satisfaction - less errors
Functionality and usability tests were carried out with real users, where feedback was collected from those involved through studies allowing to neutralize a series of issues.
As expected, the connections within the application have also been tested and verified to maximize the security of transactions and customer data.
In this way, users, who are more secure in our environment, feel understood and more likely to become loyal, increasing sales closing.
Deployment
Focusing on CI/CD
Establishing an effective and balanced pipeline when implementing improvements and changes in terms of user experience and interfaces is crucial to maintaining a dynamic and growing application.
To this end, a series of gradual implementations have been defined to integrate improvements as the design system is updated or to test new integrations without taking unnecessary risks.
Monitoring and logging app's activities
Through statistics recorded by methods such as Session Recordings or User Interaction Tracking, it is possible to know how users move through the application or what the subsequent Pain Points may be.
In this way, the steps to follow to alleviate these errors are defined after reviewing the technical log files where the information is collected.
Maintenance and Support
Continous feedback
Once the application is launched, it is just the beginning of the product’s life. User feedback, complaints, suggestions, and other inquiries must be received, analyzed, and processed for continuous improvement.
To this end, feedback channels have been integrated into the application, as well as more common methods such as email, forms, etc.
The iterativeness of User Experience
User experience is a segment of design that is never fully researched, developed, and optimized. This is especially true for applications like Viking Centro App.
It is challenging to get everything right from start to finish. Some strategies work, while others are better suited for different types of projects. For this reason, there is a commitment to constantly updating the forms, strategies, and methods used in user experience and interface design.
The scope of the project allows for the expression of ideas and their transformation into something digitally tangible to meet the needs and requirements of users.
Figma