For this personal portfolio project, I focused on creating a comprehensive mobile application for Everlast, a renowned name in the boxing industry. Due to the decline in popularity of boxing since the early 2000s, Everlast has experienced a drop in sales and brand recognition. To address this, I designed an interactive prototype using Figma, targeting gym-goers, fitness enthusiasts, and boxing fans. The app is intended to be an everyday companion, providing features to enhance workout experiences, foster social interactions, and simplify shopping for Everlast products. The application is divided into four main sections: Fitness Tracking, Socials, Shopping, and User Profile, each tailored to meet specific user needs and preferences.

Interactive Prototype: https://www.figma.com/proto/IyzMpEF1ANmkeNTO1Tmyhz/Main?page-id=18%3A223&type=design&node-id=24-267&viewport=-3865%2C-4191%2C0.64&t=ebZRpLBBdLkyFZt9-1&scaling=scale-down&starting-point-node-id=24%3A267&content-scaling=fixed

Introduction

Design Process

This project was done individually.

Project Tasks:

Project concept, Research, Wireframing, Design, Prototyping

Tools:

Figma

Timeframe:

4 weeks

Objectives:

Design an interactive mobile application for Everlast that revitalizes the brand, engages fitness enthusiasts, and enhances the user experience through comprehensive fitness tracking, social interaction, and streamlined shopping features.

  1. Identifying the Problem: The project began with identifying the decline in popularity of boxing since the early 2000s and its impact on Everlast's sales and brand recognition. Understanding this connection highlighted the need for a modern solution to rejuvenate Everlast's presence in the fitness industry.
  2. Analyzing Existing Everlast Applications: I evaluated the limitations of Everlast's existing applications, such as "Everlast Fitness" with 5K downloads and "Everlast Gyms" with 10K downloads, compared to industry leaders like "Nike Training Club" with 10M downloads and "Adidas Running" with 50M downloads. These existing apps lacked features for comprehensive workout tracking and seamless integration with Everlast's product sales, presenting an opportunity for improvement.
  3. Competitor Case Studies: Conducting case studies of existing competitors like Nike and Adidas revealed positive user feedback regarding workout tracking features. Notably, Nike's app no longer includes workout tracking, indicating a gap that Everlast's new app could fill by offering a robust workout tracking experience.
  4. Enhancing Workout Sessions: I explored ways to make workout sessions more rewarding for users. This involved researching features that motivate and engage users, such as personalized progress tracking, goal setting, and achievement rewards, all aimed at enhancing the overall workout experience.
  5. Health Benefits of Working Out: Researching the health benefits of working out, particularly progressive overload, emphasized the importance of incorporating features that help users track their progress and achieve their fitness goals, thereby promoting consistent and effective workouts.
  6. Addressing Motivation Challenges: To address user difficulties in staying motivated, I studied the "Dietbet" website, where users bet money to participate in challenges and earn rewards if they succeed. This inspired the "Competition" page in the app, where users can bet money to participate in fitness challenges, adding a competitive and rewarding element to their workout routines.
  7. Integrating Shopping Experience: Research into Everlast's new direction towards athleisure highlighted the need for a seamless connection between the app and the shopping experience. This led to the inclusion of features that allow users to easily discover and purchase Everlast products directly through the app, enhancing both the user experience and Everlast's sales potential.
  8. Music and Performance Enhancement: Extensive research on the impact of music on workout performance revealed that music can significantly enhance physical performance, motivation, and overall workout enjoyment. This insight guided the decision to collaborate with Spotify, integrating music streaming into the app to provide users with curated workout playlists. This partnership aims to create an immersive and motivating workout environment, further enhancing the user experience and setting Everlast's app apart from competitors.

research

Material property, Font

Everlast x Spotify

Research

prototyping

2024

UX Design

The design process for the Everlast mobile application began with the creation of low-fidelity wireframes. These initial sketches focused on the basic structure and layout of the app, allowing me to visualize the user flow and key functionalities without getting bogged down in details. This stage was crucial for identifying the primary features and ensuring the app’s usability and intuitive navigation from the outset.

Throughout the design process, I maintained a user-centric approach, continually referencing research insights to ensure that the app would meet the needs and preferences of the target audience. This involved considering the typical user journey and making sure that each interaction within the app was straightforward and meaningful. Once the wireframes were finalized, I moved on to high-fidelity designs, adhering to a minimalistic design philosophy. This approach was chosen to create a clean, uncluttered interface that enhances usability and aesthetic appeal. Key elements of this design choice included simplicity—focusing on essential elements and avoiding unnecessary distractions to make the app easy to navigate. Effective use of whitespace created a sense of openness and improved content readability. Consistent typography with clear, legible fonts and a cohesive typographic hierarchy guided users through the app, and a limited color palette ensured the design was visually pleasing without being overwhelming.

Once the high-fidelity designs were finalized, I developed an interactive prototype using Figma. This prototype allowed for a realistic simulation of the app’s functionality, enabling validation of the user experience. Key interactions, animations, and transitions were incorporated to ensure a seamless and engaging user journey. By following this structured design process, I was able to create a sleek, user-friendly mobile application for Everlast that not only meets the needs of its target audience but also sets a new standard for fitness and lifestyle apps.

Firstly, I created the login and registration page, focusing on simplicity and efficiency. The login interface features input fields for username/phone number/email and password, along with a login button that remains inactive until the user completes the required fields. This minimalist approach ensures a straightforward user experience, allowing users to easily access their accounts with minimal effort.

In the prototype, the interface adjusts dynamically for efficiency: when users interact with the input fields, the keyboard appears automatically, optimizing screen space by pushing the Everlast logo out of view temporarily. This design choice enhances usability by focusing attention on the task at hand—logging in securely and quickly. For new users, the signup page provides a seamless transition, offering a straightforward path to create an account and access the app's features.

Upon accessing the signup page from the login screen, users are prompted to enter their basic information: username, email address, and password. These fields are carefully designed to be straightforward and easy to fill out, ensuring a seamless registration process.

Beyond the basic details, the registration page also includes prompts and questions aimed at understanding the individual user better. These questions are strategically chosen to personalize the user experience and tailor the app's functionality to their preferences. For instance, prompts may inquire about fitness goals, preferred workout types, or interests related to boxing and fitness. By gathering this information upfront, the app can provide personalized recommendations and features that align with each user's needs and interests.

Challenges

Embarking on the Everlast mobile application project presented several significant challenges, each contributing to the overall complexity and demanding nature of the endeavor. One of the primary challenges was conceptualizing the idea and selecting the right client. Identifying Everlast as the focal brand required a thorough understanding of the market, recognizing the brand's historical significance in the boxing industry, and addressing the issue of its declining popularity. This selection was pivotal, as it shaped the project's direction and goals, aiming to revitalize Everlast's brand presence and connect it with contemporary fitness enthusiasts.

Another major challenge was the sheer volume of work involved in developing the project independently. From initial research and idea formulation to design and prototyping, each stage required meticulous attention to detail and substantial effort. The process began with extensive research to identify existing gaps in Everlast's current applications and analyze competitor offerings from brands like Nike and Adidas. This research phase was crucial for ensuring that the new application would provide unique and valuable features that set it apart in the fitness app market.

Prototyping the application was particularly time-consuming and labor-intensive. Creating low-fidelity wireframes, iterating through design choices, and refining the user interface to ensure a minimalistic yet functional design demanded significant dedication. Each screen and feature, from the login and registration pages to the home, tracking, and competition pages, had to be crafted to provide a seamless and engaging user experience. The iterative nature of design and prototyping required continuous testing, further extending the development timeline.

The development of the Everlast mobile application was a comprehensive and challenging journey, marked by detailed research, strategic design, and meticulous prototyping. This project aimed to rejuvenate Everlast's brand by connecting it with modern fitness enthusiasts through a versatile and engaging app. From conceptualizing the idea and selecting Everlast as the focal brand to navigating the extensive workload and refining the user interface, each phase demanded dedication and precision.

The app's features, including personalized fitness tracking, social interactions, competitive challenges, and seamless shopping experiences, collectively contribute to a holistic and rewarding user experience. Despite the challenges of working independently and managing all aspects of the project, the end result showcases a well-rounded, user-centric application that bridges the gap between Everlast's legacy and contemporary fitness trends.

Ultimately, this project not only revitalizes Everlast's brand presence but also provides a valuable tool for users to enhance their fitness journeys. The successful completion of this project underscores the importance of thorough research, user-focused design, and perseverance in creating impactful digital solutions.

conclusion

Designing the Login and Registration Page

Once logged into the Everlast mobile application, users are greeted with home page structured into four distinct sections, each catering to enhance the user's fitness journey and overall experience.

  1. Fitness Tracking Section: This section prominently features tools for users to track their daily workouts. It includes options to log various types of exercises, set goals, and monitor progress over time. Interactive charts and graphs provide visual feedback on workout metrics such as duration, calories burned, and exercise intensity, empowering users to stay motivated and informed about their fitness achievements.
  2. Daily Steps Page: Designed to promote active lifestyles, this section encourages users to set weekly step goals and compare their steps with previous months and friends. Gamification elements such as challenges and rewards foster a sense of achievement and community, motivating users to maintain and surpass their fitness goals.
  3. Competition Page: Emphasizing engagement and motivation, this section allows users to participate in fitness challenges by betting on their commitment. Users can wager a specified amount of money, with rewards offered to those who successfully complete their goals. This gamified approach not only incentivizes consistency but also strengthens user interaction with the app's community.
  4. Hydration Page: Recognizing the importance of hydration in fitness, this section enables users to track their daily water intake. Customizable reminders and progress logs help users maintain optimal hydration levels, promoting overall health and well-being.

The fitness tracking section is crafted to optimize users' workout experiences through intuitive tools and personalized guidance. At its core, this section integrates essential features such as a set counter and timer, enhancing users' ability to structure their workouts effectively.

  1. Set Counter and Timer: Users can utilize the set counter and timer to manage their exercise routines with precision. Whether focusing on strength training or cardio workouts, these tools help users maintain consistency and track their progress throughout each session. Adjustable settings cater to individual preferences, ensuring workouts are both structured and adaptable to varying fitness levels.
  2. Personalized Workout Videos: A standout feature of the fitness tracking section is its integration of personalized workout videos. Depending on the user's workout schedule—such as back workouts on designated back days—the app recommends relevant exercise videos. This personalized approach not only enhances user engagement but also provides valuable guidance and motivation during workouts. By showcasing instructional videos aligned with specific workout routines, users can confidently perform exercises with correct form and technique, maximizing their fitness results.
  3. User-Centric Design: The design emphasizes a user-centric approach, prioritizing ease of use and accessibility. Clear navigation and intuitive interfaces ensure that users can seamlessly access and utilize the set counter, timer, and video recommendations without unnecessary complexity. Visual cues and minimalist design elements further enhance usability, allowing users to focus on their workout goals without distraction.

Designing the Home page

Daily steps

Competition

Hydration

Designing the shop page

Designing the Profile page

Designing the socials page

Fitness tracking

The fitness tracking section goes beyond basic workout logging, offering comprehensive tools to support users in achieving their fitness goals with precision and motivation.

  1. Body Weight Tracking: Users can log and track their body weight over time directly within the app. This feature allows users to monitor their progress towards weight management and body composition goals. Integrated charts and progress trackers provide visual feedback, empowering users to make informed decisions about their fitness journey.
  2. Ranking and Social Value: The app includes a ranking system that records the number of successful workout days completed by each user compared to their friends. This friendly competition fosters social interaction and accountability among users, encouraging a supportive community atmosphere. Leaderboards and achievements highlight user milestones, celebrating their dedication and progress within the fitness community.
  3. Progressive Overload: For users focused on strength training, the app includes a progressive overload section. Here, users can track their maximum weight capabilities for different exercises over time. This feature supports progressive training principles by enabling users to set and adjust goals for strength gains, ensuring continuous improvement and challenge in their workouts.
  1. Step Goals and Progress Tracking: Users can set daily step goals and monitor their progress throughout the day. The page prominently displays visual indicators and progress bars, providing real-time feedback on steps taken versus their set goals. This feature encourages users to stay motivated and maintain consistent physical activity levels.
  2. Weekly Progress and Monthly Comparison: The page includes a section dedicated to weekly progress and monthly totals. Users can track their weekly steps, view their ranking among friends based on steps taken, and compare their total steps for the current month with the previous month. This comparative analysis offers valuable insights into users' activity trends over time, helping them identify patterns and adjust their fitness routines accordingly.
  3. Social Sharing and Community Engagement: To enhance social interaction, users can share their walk achievements and milestones with friends directly from the app. This sharing feature promotes encouragement, friendly competition, and mutual support among users. It strengthens community bonds within the Everlast app, fostering a positive environment where users celebrate fitness achievements together.
  4. User-Friendly Interface and Personalization: The design prioritizes ease of use with intuitive navigation and clear, actionable insights. Interactive elements such as buttons for sharing achievements and viewing detailed statistics are strategically placed for effortless user engagement. Customizable features allow users to personalize their goals and preferences, adapting the app to their individual fitness journey and enhancing overall user satisfaction.
  5. Performance Analytics: Detailed analytics provide users with a deeper understanding of their walking habits and progress. Metrics such as average daily steps, trends over time, and comparisons between months empower users to make informed decisions about their fitness goals and lifestyle choices.

The Competition page is designed to inject excitement and motivation into users' fitness journeys through engaging challenges and incentives. Here’s an overview of how this page enhances user interaction and promotes active participation:

  1. Challenge Participation: Users can participate in various fitness challenges where they set personal goals and compete against others. These challenges may include activities like running, weightlifting, or specific workout routines. By betting a certain amount of money to enter these challenges, users have the opportunity to win rewards upon successfully completing their goals. This gamified approach not only motivates users to stay consistent with their fitness routines but also adds an element of excitement and achievement.
  2. Social Engagement: The Competition page encourages social interaction by allowing users to challenge their friends or join challenges initiated by others. This feature fosters a sense of camaraderie and friendly competition among users, creating a supportive community within the app. Users can track their progress, compare results with friends, and celebrate achievements together, enhancing overall engagement and accountability.
  3. Reward System: Successful completion of challenges results in rewards for users, reinforcing positive behavior and adherence to fitness goals. Rewards may include virtual badges, points, or incentives provided by Everlast or partner brands. This system not only acknowledges users’ efforts but also encourages continued participation and commitment to their health and fitness objectives.
  4. Gamification and Motivation: By integrating gamification elements such as challenges, rewards, and social interaction, the Competition page motivates users to push their limits and achieve new fitness milestones. This gamified approach leverages psychological principles to enhance motivation and enjoyment, ultimately promoting sustained engagement with the app's fitness features.

The Hydration page is designed to help users maintain optimal hydration levels as part of their overall health and fitness regimen. This feature allows users to track their daily water intake easily and effectively. Through intuitive interfaces and customizable settings, users can set hydration goals based on their individual needs and receive reminders to ensure they stay adequately hydrated throughout the day.

Key elements of the Hydration page include interactive tools such as progress trackers and visual representations of daily water intake. These features not only provide users with real-time feedback on their hydration habits but also motivate them to reach their goals consistently. By offering insights into their hydration patterns over time, the page empowers users to make informed decisions about their health and well-being.

The Socials page is designed to provide users with a personalized and engaging experience centered around fitness, boxing, and overall wellness. This page serves as a dynamic hub where users can discover curated content tailored to their interests and fitness goals. Leveraging insights from user activity history, the Explore page delivers personalized recommendations, including articles, workout routines, nutrition tips, and motivational content. Visually appealing thumbnails and previews make it effortless for users to browse and explore new information, while intuitive categorization and filters allow for targeted content discovery based on specific topics.

Furthermore, the Socials page facilitates social interaction and community engagement through interactive features such as likes, comments, and sharing options. This encourages users to connect with others who share similar fitness interests, fostering a supportive environment within the Everlast community. Additionally, the page integrates seamlessly with Everlast products, enhancing the user experience by enabling direct association with recommended content. Users can tap to discover and explore Everlast products featured in content, such as workout gear or equipment used in recommended exercises. This integration not only enriches the browsing and discovery process but also facilitates a streamlined path from content inspiration to product consideration.

The Shop page is crafted to offer users a seamless and engaging shopping experience tailored to their fitness and boxing needs.

  1. Product Organization and Navigation: The Shop page features a well-organized layout that categorizes Everlast products into distinct sections. Users can easily navigate through categories such as boxing equipment, workout apparel, accessories, and more. This intuitive structure allows for efficient browsing and helps users quickly find products that align with their specific fitness preferences and needs.
  2. Personalization and Recommendations: Leveraging user preferences and browsing history, the Shop page provides personalized product recommendations. These recommendations are tailored to each user’s interests, previous purchases, and fitness goals, enhancing the relevance of product suggestions and facilitating informed decision-making.
  3. Wishlist and Favorites: Users can create wishlists and mark favorite items directly on the Shop page. This feature allows users to save products for future consideration, track availability, and receive notifications for price drops or special promotions. The ability to curate personalized collections enhances user engagement and facilitates seamless shopping journeys.

The Profile page in the Everlast mobile application is thoughtfully designed to provide users with comprehensive control over their personal settings, social interactions, and content sharing. This page serves as a centralized hub where users can manage various aspects of their app experience seamlessly.

Users can easily access and adjust their settings from the Profile page. This includes updating personal information, managing privacy preferences, and configuring notification settings. The intuitive interface ensures that users can quickly find and modify their preferences, enhancing their overall user experience and satisfaction with the app.

In addition to settings management, the Profile page features a dedicated section for messaging friends. This integrated messaging functionality allows users to communicate directly with their connections, fostering a sense of community and support within the Everlast app. Whether coordinating workout sessions, sharing progress, or simply staying in touch, the messaging feature enhances social interaction and engagement among users.

The Profile page also includes an option for users to post new content. Users can share their workout achievements, fitness tips, motivational quotes, or any other content that aligns with their fitness journey. This feature encourages users to actively participate in the Everlast community, share their experiences, and inspire others. By enabling content sharing directly from the Profile page, the app promotes a vibrant and interactive user community.

The add to cart button is animated to provide visual feedback, dynamically responding to user actions and confirming their intent to proceed with the purchase. This animation not only enhances interaction but also reassures users that their transaction is being processed smoothly. Clear and organized shopping cart interface, users can easily review their selected items and adjust quantities as needed.

Once users proceed to checkout, address and shipping details can be conveniently entered, with options for selecting preferred delivery dates and tracking orders in real-time. Then, they are presented with secure payment options, including credit/debit cards and digital wallets. Throughout the checkout process, clear communication about shipping costs and estimated delivery times maintains transparency and helps users make informed decisions.

After confirming their order, users are treated with a place order animation, visually signaling the completion of their transaction and adding a delightful touch to the overall experience. This animation reinforces user confidence and satisfaction, providing immediate feedback that their purchase has been successfully processed.

Integrated with social messaging capabilities, the Month Steps feature allows users to share their achievements directly with friends within the app. This functionality fosters a supportive environment where users can celebrate milestones, exchange encouragement, and engage in friendly competition. Sharing monthly step counts and milestones through messaging helps users stay connected and inspired, promoting a sense of community around fitness goals.

Personalized notifications further enhance user engagement by reminding individuals to celebrate their achievements and share their progress with friends. These notifications serve as positive reinforcements, reinforcing healthy habits and encouraging ongoing participation in the app's fitness tracking features.

Material property, Rectangle, Font