Home / TRAIND

TRAIND responsive web

Project Overview

A client asked for a responsive website called TRAIND that will encourage individuals to reach their fitness goals, motivate them and maintain a healthy lifestyle. This is done by pairing people with authorized professional fitness trainers that best suit their needs.

This was a school project with a real client, who was impressed by my pitch and requested a formal presentation.

Project Stages

    • Interviews with Stakeholders to understand their audience and business needs

    • Sketching and wireframing

    • Creative strategy

    • Low and high-fidelity prototypes

    • Usability testing and iterations

    • Client presentation

Empathize

Business needs

  1. Brand Image: The website should project an image of energy, freshness, and trustworthiness. Establishing a strong and positive brand image is essential for the business.

  2. Reliable Platform: A reliable and secure platform that ensures smooth user interactions. This reliability includes features like accurate matchmaking and secure transactions.

  3. Diverse Offerings: Showcasing a variety of fitness services and types provided by qualified trainers. Offering a diverse range of options can attract a broader audience.

  4. Effective Matchmaking: TRAIND should focus on providing effective matchmaking between clients and trainers. This is critical for user satisfaction and building long-term relationships.

  5. Trainer Support: The platform should support fitness gurus by helping them connect with clients interested in their services. This assists trainers in growing their client base.

  6. Scalability: The website should be designed for scalability, allowing the business to grow and accommodate an increasing number of users and trainers.

User needs

  1. Energetic and Fresh Experience: Users want the website to provide an energetic, new, and fresh experience. This indicates a desire for an engaging and visually appealing platform.

  2. Trust and Reliability: Users must perceive the website as trustworthy and reliable. This implies a need for clear and accurate information, secure transactions, and dependable services.

  3. Variety of Services: Users expect a variety of fitness services and types offered on the website. They seek diversity in workouts and fitness programs to cater to their preferences and goals.

  4. Qualified Trainers: Users want access to qualified trainers with diverse knowledge and expertise. They expect trainers to be experienced and capable of guiding them effectively.

  5. Accurate Matchmaking: Users value accurate matchmaking between clients and fitness trainers. They desire a personalized experience that matches them with trainers who align with their specific fitness goals and needs.

  6. Clientele Development: Trainers using the platform also have user needs. They seek to build a clientele interested in their unique services, indicating a need for effective marketing and client management features on the website.

Analysis

Problem statement

TRAIND needs a user-friendly website that connects people new to fitness with experienced trainers. The challenge is to create a site that appeals to both groups, ensures trust, offers various fitness services, and accurately matches clients with trainers. The website should reflect a vibrant brand, support business growth, and promote fitness awareness. This is essential for TRAIND's success in serving fitness enthusiasts.

Personas

There are two main audiences for the initial launch. Both audiences are crucial for the website's success because trainers will provide services, and clients will benefit from them.

The main audience is “fitness rookies”, typically aged 30-50, committed to a healthier lifestyle. Seeking motivation and guidance, they have stable incomes, manage lifestyles well, and possess some business knowledge. This site aims to immerse them in fitness and emphasize the importance of a healthy lifestyle.

The secondary target audience is the "fitness gurus", expert instructors aged 27 to 50. They are passionate about fitness, excel in their fitness niches, and are dedicated to helping others achieve their fitness goals. These instructors prioritize both their clients and their personal fitness.

Click to enlarge image

Ideation

Information architecture

To gain insights into structuring the information architecture using terms provided by the client, I facilitated a card sorting activity involving potential users, helping to refine the organization of content.

Design

Sketches

To gain a better understanding of content and information arrangement on different screens, I began with initial sketches to explore the overall layout and fine-tune my design approach.

Click on a sketch to enlarge

Creative Strategy

The TRAIND mood board and style tile embrace a modern approach to fitness design. By incorporating earth tones with subtle hints of blue, we aimed to strike a balance between energy and tranquillity, catering to a wide range of fitness preferences. Through conversations with potential clients, it became evident that the conventional, flashy fitness aesthetics were losing their appeal. In response to their feedback, I crafted a fresh and modern fitness outlook that captures the vigour and serenity associated with various fitness experiences. The green earth tone conveys both calmness and power, adapting to different fitness styles, while the blue accent colour injects vibrancy and vitality into the overall design scheme.

Click image to enlarge

Test

Testing Prototype

I created a high-fidelity prototype for testing with 4 participants and received valuable feedback for further iterations.

View and try out the demos to get a better understanding of the solution before exploring the issues that were solved.

Click image to enlarge

Issue 1: Difficulty getting back to the top after excessively scrolling

Solution: A scroll “back to the top" button has been added to facilitate users' ability to return to the top of the page effortlessly.

Click image to enlarge

Issue 2: Unsure of the difference between programs and specializations

Solution: The words "Specialization" and "Programs" were somewhat blurred in terms of their similarities and distinctions. To eliminate the need for users to contemplate where to direct their search, these two categories have been consolidated into one, simply labelled as "Programs."

Click image to enlarge

Issue 3: “Quick book” is a weird term

Solution: The term "Quick book" has been changed to "Instant booking". This adjustment provides greater clarity regarding its purpose, signifying the ability to promptly reserve an available slot offered by the trainer without the need for messaging.

Click image to enlarge

Issue 4: Cannot see what services the trainer offers

Solution: Choosing between showing services versus ratings was difficult, even amongst users. Both were implemented instead so both could be viewed easily.

Click image to enlarge

Metrics

User Engagement:

  • Page Views: Track how many pages users visit on your website.

  • Session Duration: Measure the average time users spend on your site.

  • Booking rates: Track percent of users that book trainers

  • Form Completion Rate: Measure the percentage of users who successfully submit the sign-up form

Conversion Rates:

  • Sign-ups: Measure how many users create accounts or sign up for services.

  • Bookings: Track how many users schedule appointments with trainers.

Future Recommendations

  • Integration with Wearables: Explore integration with popular fitness wearables and devices like Fitbit, Apple Watch, or Garmin. This allows users to seamlessly track their fitness activities and sync data with the platform.

  • Accessibility: Ensure that the platform is accessible to a wide range of users, including those with disabilities. This involves adhering to web accessibility standards and conducting accessibility testing to identify and address any issues.

  • Mobile App Integration: Consider creating mobile apps for both Android and iOS platforms. Mobile apps can provide a more convenient and on-the-go experience for users. They can also send push notifications to keep users engaged and motivated.

  • Data Analytics: Invest in robust data analytics tools to gather insights into user behaviour and preferences. Analyze this data to make data-driven decisions for further improvements. This could involve using tools like Google Analytics, heatmaps, and A/B testing.