Greenergym is a Fitness Mall which compromises three distinct domains (GreenerGym, GreenerFoods, and GreenerWear) that complement one another, delivering a holistic, ideal fitness experience — a comprehensive package for fitness and environmentally conscious enthusiasts.
This three-month study project allowed us the freedom to choose our subject matter. Working as a team of three, we initiated the process by coming up with an innovative brand idea and concept, then proceeded to shape its corporate identity from the ground up. Our responsibilities included creating print materials and conceptualizing and designing a user-friendly app and website, which included various UX-Methods, such as Wireframing, User Persona Creation and Customer Journey.
The business idea, corporate design guidelines, customer journey development, and print material ideation were collaborative efforts within our group. While one team member focused on the realization of our print media concept, my other partner and I jointly worked on the User Experience Design process for the website and app, equally sharing responsibilities for wireframe creation and page design.
We began by developing the business concept, the name and a slogan for Greenergym along with its target audience, a clear mission and vision statement as well as the brand's core values. We then developed corporate design guidelines ensuring they resonated with Greenergym's audience and subsequently designed corporate printed materials including flyers and a business card.
Then we strategically planned the digital part of our brand. We laid the groundwork for that through creating wireframes and an information architecture that defined the digital landscapes - an app and a website. Alongside, we created personas, understanding the diverse needs and preferences of our audience and traced the customer journey, identifying the specific roles that the website and app fulfill within it.
With the blueprints in hand, we transformed our concept for Greenergym's digital presence into reality during the design phase. Here, we crafted user interfaces for both the website and app on the basis of the wireframes, information architecture, and the earlier established brand identity. This phase represented the climax of our creative journey, receiving the utmost attention and thorough detailing, making it the most extensive segment of our project.
At the start of our project we were in the position of a founding team with the task to develop the idea for a brand from scratch. Our brainstorming efforts led us to conceive "Greenergym," a concept that integrates fitness with environmental awareness. Recognizing the common absence of sustainability practices in traditional fitness studios, we designed our brand to prioritize eco-friendliness and self-sufficiency. This vision was further realized through the concept of three interconnected sub-brands: GreenerGym, GreenerFoods, and GreenerWear.
focuses on providing an eco-friendly fitness experience. It is the heart of the Fitnessmall where all the sport-activities take place. GreenerGym ensures that all training equipment is made from sustainable and recyclable materials, free from harmful substances and plastics. Using high-quality, durable materials like stainless steel, iron, and solid wood instead of plastic ,and generating electricity by harnessing the power generated by their cardio equipment, which is then used to operate the fitness mall, are part of their environmentally friendly self-sustainability concept. In addition Greenergym offers a mobile app that allows users to track their workouts and earn rewards for generating electricity.
is a part of Greenergym that emphasizes sustainable and healthy food options, striving to combine clean and healthy ingredients with amazing taste and high protein content. To include options for every preference, they offer vegan, vegetarian, and gluten-free alternatives. Greenergym grows their own vegetables and fruits in an enclosed area of their outdoor space, which are freshly harvested and used in the delicious and nutritious GreenerFoods dishes. While not all ingredients can be sourced from their own cultivation due to seasonal variations, Greenergym ensures that the rest of the ingredients are obtained from organic and regional sources. They also partner with sustainable snack manufacturers to reduce packaging and offer unpackaged options.
offers sportswear made from recyclable, recycled, and fair-trade materials. The sportswear collection of Greenergym's apparel branch "GreenerWear" includes items made from organic cotton that stems from controlled organic farming and fibers derived from PET bottles. They prioritize sustainable and ethical production practices and aim to expand their own production while also collaborating with partner companies. The items from the clothing store can be obtained locally as well as in the online shop or the app.
To understand the competitive landscape in which Greenergym would operate, we conducted a comprehensive market research. By defining and examining the competitors, we gained valuable insights into the unique positioning opportunities and differentiation chances of Greenergym, allowing us to further detail the brand concept and unique selling point. On the basis of this Market Analysis the following aspects could be worked out as the unique positioning of Greenergym.
In the process of building the Greenergym brand, the steps outlined earlier, which involved understanding our target market, audience, and the industry in which we operate, played a pivotal role in defining our brand identity. Drawing from this foundational comprehension, we crafted our brand's values, mission, and vision statement. These guiding principles steer our design choices, guaranteeing that our brand and user experiences genuinely encapsulate our fundamental principles.
We celebrate the joy, energy, and positive impact that sports bring to individuals and communities and believe in the power of sports to uplift and unite people.
We deeply care about the health of our planet and recognize the connection of the environment and sports. We integrate sustainability into every aspect of our operations and inspire others to do the same.
We prioritize the well-being of individuals, understanding that personal health and the health of the planet are intertwined. We strive to create a world where everyone has access to clean air, clean water, and a safe environment for physical activity.
We constantly seek innovative solutions and strive for excellence in everything we do. We aim to set new benchmarks in sustainable sports practices and inspire others through our actions.
At Greenergym, our mission is to bridge the gap between fitness and environmental responsibility. We are dedicated to offering innovative fitness experiences that inspire people to make eco-friendly choices and contribute to a healthier planet.
Our vision for the future is to revolutionize the fitness industry by seamlessly integrating physical well-being with environmental consciousness. Our goal is to take a pioneering role in the green fitness industry nationwide, driven by our mission.
The flyer of Greenergym seamlessly integrates scientific design principles with branding strategy. It maintains a cohesive visual identity with our project by adapting the color scheme, incorporating black and various shades of green as accent colors, all while demonstrating our commitment to sustainability through reduced use of dark ink.
From a branding perspective, the flyer preserves brand integrity with a consistent logo, color palette, and design. The visuals are strategically structured to follow principles of visual hierarchy. They guide the viewer's gaze from the prominent Slogan and icons representing the three segments of Greenergym, leading to the logo, a captivating image, and a call to action for a trial training session, to the social media reference.
For viewers seeking more in-depth information, a concise yet informative text is presented below the heading. Typically, this text becomes the viewer's main focus only after their attention and interest have been piqued by the other elements.
Greenergym's business card adopts a minimalist and straightforward approach by featuring only the logo, the slogan, and the icons representing the three segments of the Fitness Mall on the front side. To conserve ink, the back side has a white background and presents contact information using icons. The abstract shapes used on the card aligns with Greenergym's overall corporate design, which is also consistently employed across the website and app. Additionally, a QR code is provided for convenient access to the website, enhancing the user experience across Greenergym's media channels.
The design process for the website and app was kickstarted with a clear definition of their roles in the customer journey. This user-centric approach ensured that each platform had distinct objectives, avoiding confusion and unnecessary overlap. This initial step guided the wireframing and information architecture for both media, setting a solid foundation.
The website primarily serves an informative function, providing users with an introduction to the company, its products, and services.
The website aims to familiarize users with the brand, educate them about the offerings, and guide them towards a conversion or rather a specific action, such as signing up for a membership or ideally physically visiting the fitness mall.
The website acts as a touchpoint at the earlier stages of the customer journey, capturing users' attention, generating interest, and providing the necessary information to make an informed decision. It plays a central role in the conversion stage of the customer journey.
The app focuses on providing interactive and personalized experiences to users who have already shown interest or become customers.
The app aims to enhance user engagement, facilitate access to specific services or features, and enable ongoing interaction with the brand. It serves as a central hub for committed users, allowing them to track their energy generation, create workout plans redeem rewards, shop for eco-friendly products, and more.
The app and enhances the customer journey by providing exclusive features and engagement opportunities for users that are already members of GreenerGym. It plays a central role in the Retention and Engagement Stage of the customer journey, reinforcing committment to the brand.
To gain a deeper understanding of our target audience and align our digital user interface design with their needs, we created two different proto-personas, representing the core traits and preferences of our users - fitness and sustainability. Chris, primarily drawn to the fitness aspect of the mall, technology-savvy, with a strong emphasis on self-development and improvement; and Sophie, an advocate for climate, feminism, and other charitable social causes, who strives to incorporate environmental consciousness into her daily life, including her physical activities.
Given the distinct requirements and functionalities of both the app and website, we chose to lay the app's UI design foundation through wireframes and comprehensive information architecture due to its complexity and vague specifications. Meanwhile, the website, with its simpler scope, relied solely on wireframes. Thus, we're showcasing graphical representations of the app's wireframes and information architecture.
Upon downloading the app, users will be led through a five-step tutorial, which provides a clear understanding of the core features of the app, including creating workout plans, tracking workouts, collecting rewards, checking the current food offers at GreenerFoods, and the online shop feature of GreenerWear. To ensure an optimal user experience, the tutorial is accompanied by illustrations, and users have the flexibility to skip it at any time for a smooth and uninterrupted experience.
The dashboard initially includes a circular progress bar, which is part of Greenergym's Payback system. Users have the opportunity to regularly earn rewards for producing energy via the cardio equipment at GreenerGym, awarded in the form of vouchers for GreenerWear or GreenerFoods. This circular progress bar visually displays the amount of wattage users need to generate before unlocking their next reward. Below this feature, essential events and information are presented including scheduled workout sessions, daily statistics, and the current offerings at GreenerFoods restaurant. These elements also serve as shortcuts to various sections within the app.
The GreenerShop page serves as a navigational hub to access the GreenerWear and GreenerFoods stores. These stores are separated to provide a more intuitive user experience, enhancing user orientation and clarity within the shop. Once users are in their chosen shop, they have the option to select from various categories, perform keyword searches, review their shopping cart or wishlist, and access further product details on the product page.
The cardio tracking feature enables users to connect with gym cardio machines and view real-time measurements of different parameters. These measurements are subsequently stored in the user's profile statistics section. Upon scanning the QR code on the respective machine, the app initiates cardio workout tracking. Should the user choose to select the Pause button, access any menu item, or use the back arrow, the app will request confirmation before redirecting them to the alternative screen. In this scenario, the tracking process stops. Users can access this feature by either tapping the green "+" button in the menu or selecting "Cardio" from the workout option screen.
Users can access a variety of workouts in the selection screen to add to their plan or start instantly. In the header, workouts can be filtered by training type. The personal plan is fully customizable on a daily or weekly basis, with a progress bar showing daily completion as a percentage. Users can start pending workouts as preferred. Additionally, starting a workout provides comprehensive guidance for each step.
Selecting the rightmost option in the navigation bar provides users with a weekly list of food offerings at GreenerFoods Restaurant, resembling a cafeteria-style plan. In the header, they can switch between days of the week using a displayed calendar view to explore daily food selections. Additionally, they can customize choices based on dietary preferences, like gluten-free, lactose-free, vegetarian, or vegan options. Multiple daily alternatives cater to these diverse dietary needs. Clicking on a dish reveals detailed information, including a description and nutritional data, such as calorie count, macro-nutrients, and their distribution in percentages.
Users can access their profile from anywhere in the app by clicking on the avatar in the upper right corner. Inside the profile, however, there's a hamburger menu in the same spot that takes them to the settings. In the header section, users can view and edit profile information, including their username, profile picture, and subscription status. Below that, there are different views to choose from. The Training View displays average statistics for registered workout sessions, offering weekly, monthly, and yearly perspectives. In the other available views, users have the option to track body measurements such as BMI, weight, and body fat percentage, manage rewards, or initiate and monitor various personalized challenges.
On the Greenergym homepage, users are initially introduced to the three-part concept of Greenergym. Each of these areas has its own dedicated section, providing users with an initial overview and linking to specific subpages within the website via a corresponding button. To provide a dynamic and excellent user experience, users have the opportunity to swipe through products from the GreenerWear online shop via an image carousel in the designated section. As users reach the end of the website, a call-to-action encourages them to explore the Greenergym app.
On the GreenerGym website, users gain insight into the gym's ambiance through a gallery of images and detailed descriptions. Additionally, the page introduces them to the GreenerGym's personal trainers to foster a more personal connection and sense of familiarity. Users can also explore our range of classes and access information regarding subscription prices and their respective benefits. These can be conveniently purchased by clicking on the respective Call-to-Action button from this page.
The online store is divided into two subpages, 'Foods' and 'Wear,' where customers can browse products available for shipment from GreenerWear and GreenerFoods. Within these pages, users have the option to add items to their shopping cart and mark them as favorites for easy access later. At the top of the product listings, a search bar allows for targeted product searches and filtering based on criteria such as product type, flavor, nutritional content, and dietary preferences. Additionally, products can be sorted by rating, new arrivals, price range, and package size to tailor the shopping experience to individual preferences.
Within the GreenerWear subpage, which is also part of the online store, users have the ability to search for specific sportswear items using the search bar, add them to their favorites, place them in their shopping cart, and apply various filters and sorting options, much like in the GreenerFoods section of the shop. As the online store spans across both the "Wear" and "Food" subpages, the contents of the shopping cart and wishlist are synchronized seamlessly across these pages.
Similar to the Greenergym app, the dishes available at GreenerFoods restaurant are displayed on the corresponding page for the entire current week and users can switch between individual days through the calendar view. Icons in the top left corner of the dish images indicate whether the specific dish is gluten-free, vegetarian, or vegan. However, the nutritional display and distribution are an exclusive feature of the app, which is referenced at the bottom of each page on the website, similar to all other pages.
The "About Us" page's main objective is to showcase Greenergym's brand identity and philosophy while simultaneously establishing an emotional connection with the site's users. While the statistics section offers percentages of internal electricity generation, self-sourced food share, and overall self-reliance, users gain further insights into Greenergym's company philosophy, mission, and values in the section below. Additionally, each team member contributes to building a personable, relatable, and welcoming atmosphere by sharing personalized introductions.
For excellent customer service and an optimal user experience, website visitors have the option to easily contact Greenergym through multiple channels provided on the Contact page. They can choose to get in touch either through a contact form, via email, or through Greenergym's social media channels. Furthermore, the physical address of the Fitness Mall is also provided here for those seeking directions to our location.
Over three months, we developed Greenergym from a blank page into a complete brand experience spanning print, web, and mobile. While proud of how the final design integrates technology and ecology, the project was a masterclass in balancing vision with feasibility. Financially, our sustainability goals would need stricter MVP-prioritization for a real-world budget. On the product side, several UX flows—such as workout customization and core e-commerce features—require further refinement.
Ultimately, my biggest takeaway was the power of a shared, documented UX foundation to align a team and justify design decisions.
With sufficient startup capital, the concept could realistically be brought to market: the business idea is innovative and distinct, the branding and storytelling are cohesive, and the digital and print media are already fully developed.
Prior to launch, however, every facet of the project—from the underlying business model to the visual design—should undergo deeper research to replace assumptions with user-validated data.