All projects

Work out Work Down

Find Personal trainers in your postcode

Live Project

world a better place

Find Personal trainers in your postcode

Work out Work Down

Find Personal trainers in your postcode
Works
Asterisk

Work out Work Down

Find Personal trainers in your postcode
arrow down
Client overview

The client ''Work Out Work Down'' is a UK-based startup. They requested to design a mobile application for fitness professionals and gym members. The app was aimed at helping people to find personal trainers in various gyms and book a session without being a member of a particular gym. Users would be able to browse for the nearest available trainers, gyms, or group classes via a map or a list sorted by distance and closest start time. Moreover, the app could be useful for fitness instructors as a tool for managing clients. Also, it allows users to log all of their physical activity data in a simple user interface, As well as track and design a diet plan for you based on your workout data using artificial intelligence.

Client

Work Out Work Down

Service

Branding, Web Design, App design

Completion

2022

project overview
The challenge

When I started designing the brand identity and the app for "Work Out Work Down," one of the significant challenges I faced was integrating all the diverse functionalities seamlessly. The app needed to serve multiple purposes, from helping users find personal trainers and booking sessions to managing clients and offering fitness tracking features. Balancing these various functions and ensuring a cohesive user experience was a complex task. Additionally, incorporating artificial intelligence for personalised diet plans required careful planning and implementation. It was essential to ensure that all these features worked harmoniously while maintaining a user-friendly and intuitive interface.

The outcome

The result of my efforts in designing the brand identity and app for "Work Out Work Down" was a comprehensive and user-centric fitness platform. The brand identity reflected the essence of the app: dynamic, accessible, and motivating. The app itself provided a seamless experience, allowing users to easily find personal trainers, book sessions, and manage their fitness journey effortlessly. The incorporation of artificial intelligence empowered users to receive personalized diet plans based on their workout data, enhancing their overall fitness experience. The platform successfully bridged the gap between fitness professionals and gym members, promoting a healthier lifestyle and more accessible fitness options.

The approach

The approach I embraced for designing both the brand identity and the app for "Work Out Work Down" was a comprehensive and user-centric one. In crafting the brand identity, my journey commenced with thorough market research to gain insights into the ever-evolving fitness industry and understand the nuanced preferences of the target audience. This research served as the compass guiding the creation of a brand identity characterised by vibrancy, motivation, and accessibility. The selection of colours, typography, and the design of the logo were meticulously chosen to convey these qualities, ensuring the brand's immediate recognisability and resonance with fitness enthusiasts and professionals alike. Consistency was paramount, and I meticulously formulated brand guidelines to ensure uniformity and professionalism across various media channels. For the app design, a user-centric approach was paramount. I began by crafting detailed user personas and meticulously mapping user journeys to unearth their needs, pain points, and motivations, thus shaping the app's functionality. Wireframing and interactive prototyping were essential steps, offering a tangible visualisation of the app's layout, flow, and functionality, all geared towards creating a logical and intuitive user experience. Translating the brand identity into the app's visual design demanded meticulous attention to detail, maintaining visual harmony between the two. The incorporation of artificial intelligence for personalised diet planning was executed through a collaborative effort with AI experts, involving rigorous testing to ensure precise data analysis and diet recommendations. User testing, a pivotal phase, was conducted to garner invaluable feedback, leading to iterative improvements, ensuring optimal usability. Throughout this journey, close collaboration with developers was upheld, guaranteeing the seamless implementation of design elements and features. In sum, my approach centred on harmonising the brand identity and app design with user demands and industry trends, emphasising user-centricity, visual coherence, and the seamless integration of AI, resulting in the creation of a captivating fitness platform.

the process:

The process I followed to design the brand identity and the app for "Work Out Work Down" can be broken down into the following steps:

Brand Identity Design:

  1. Initial Research: Conducted in-depth research into the fitness industry, identifying key competitors, market trends, and user preferences.
  2. Client Collaboration: Collaborated closely with the client to understand their vision, values, and unique selling points.
  3. Concept Development: Created multiple brand concept ideas, including color palettes, typography choices, and logo sketches.
  4. Feedback and Iteration: Presented concepts to the client for feedback and made necessary revisions based on their input.
  5. Finalization: Finalized the brand identity, including the chosen logo, color scheme, typography, and design guidelines.
  6. Brand Guidelines: Created comprehensive brand guidelines to ensure consistency in the use of brand elements across all materials and media.

App Design:

  1. User Persona Creation: Developed detailed user personas representing different types of app users, including gym members and fitness professionals.
  2. User Journey Mapping: Mapped out the user journey to identify touchpoints, pain points, and opportunities for engagement.
  3. Wireframing: Created wireframes to outline the app's layout, structure, and functionality, focusing on user flow and ease of navigation.
  4. Prototyping: Developed interactive prototypes to visualize the app's interface and gather user feedback.
  5. Visual Design: Designed the app's user interface (UI), incorporating the brand identity into UI elements, such as buttons, icons, and graphics.
  6. Integration of AI: Collaborated with AI experts to integrate artificial intelligence into the app, enabling personalized diet planning.
  7. User Testing: Conducted usability testing with real users to identify issues, gather feedback, and make iterative improvements.
  8. Development Collaboration: Worked closely with developers to ensure the smooth implementation of design elements and AI functionality.
  9. Final Testing: Performed extensive testing to ensure the app's functionality, security, and performance met high standards.

Throughout the process, communication with the client and collaboration with developers were essential to ensure the project's success. User feedback played a crucial role in refining the app's design and functionality, resulting in a user-friendly and visually appealing fitness platform.

THE web design
PROCESS

For me, steps to design a website requires 7 steps:

  1. Goal identification: Where I work with the client to determine what goals the new website needs to fulfils. (for example, what its purpose is).
  2. Scope definition: Once we know the site's goals, we can define the scope of the project. I.e., what web pages and features the site requires to fulfils the goal, and the timeline for building those out.
  3. Sitemap and wireframe creation: With the scope well-defined, we can start digging into the sitemap, defining how the content and features we defined in scope definition will interrelate.
  4. Content creation: Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages, always keeping search engine optimisation (SEO) in mind to help keep pages focused on a single topic.
  5. Visual elements: With the site architecture we can start design the UI of the website following the brand identity guideline (if there is one).
  6. Testing: By now, we've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works.
  7. Launch: Once everything's working beautifully, it's time to plan and execute your site launch! This should include planning both launch timing and communication strategies .

For me, steps to design a website requires 7 steps:

  1. Goal identification: Where I work with the client to determine what goals the new website needs to fulfils. (for example, what its purpose is).
  2. Scope definition: Once we know the site's goals, we can define the scope of the project. I.e., what web pages and features the site requires to fulfils the goal, and the timeline for building those out.
  3. Sitemap and wireframe creation: With the scope well-defined, we can start digging into the sitemap, defining how the content and features we defined in scope definition will interrelate.
  4. Content creation: Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages, always keeping search engine optimisation (SEO) in mind to help keep pages focused on a single topic.
  5. Visual elements: With the site architecture we can start design the UI of the website following the brand identity guideline (if there is one).
  6. Testing: By now, we've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works.
  7. Launch: Once everything's working beautifully, it's time to plan and execute your site launch! This should include planning both launch timing and communication strategies .

No items found.
the results

The result of our collaborative efforts was the meticulously designed prototype of Ernest's website, crafted using Webflow. This prototype now stands as a dynamic representation of our shared vision, ready to be brought to life when Ernest is prepared to proceed. The prototype effectively communicates the website's aesthetic, functionality, and user experience, providing Ernest with a tangible preview of the final product. With this foundation in place, we are poised to embark on the next phase of the project, where we will transform this prototype into a fully functional and captivating online platform that aligns seamlessly with Ernest's storytelling and objectives.

Do you have

a project in mind?

Contact me & let's
have a chat about it

Websites that grow your startup and make your brand stronger

Contact me
All projects

Work out Work Down

Find Personal trainers in your postcode

Client
Work Out Work Down
Category
Branding, Web Design, App design
YEAR
This is some text inside of a div block.

Overview

The client ''Work Out Work Down'' is a UK-based startup. They requested to design a mobile application for fitness professionals and gym members. The app was aimed at helping people to find personal trainers in various gyms and book a session without being a member of a particular gym. Users would be able to browse for the nearest available trainers, gyms, or group classes via a map or a list sorted by distance and closest start time. Moreover, the app could be useful for fitness instructors as a tool for managing clients. Also, it allows users to log all of their physical activity data in a simple user interface, As well as track and design a diet plan for you based on your workout data using artificial intelligence.

The goal

View the live site

The result of my efforts in designing the brand identity and app for "Work Out Work Down" was a comprehensive and user-centric fitness platform. The brand identity reflected the essence of the app: dynamic, accessible, and motivating. The app itself provided a seamless experience, allowing users to easily find personal trainers, book sessions, and manage their fitness journey effortlessly. The incorporation of artificial intelligence empowered users to receive personalized diet plans based on their workout data, enhancing their overall fitness experience. The platform successfully bridged the gap between fitness professionals and gym members, promoting a healthier lifestyle and more accessible fitness options.

The process I followed to design the brand identity and the app for "Work Out Work Down" can be broken down into the following steps:

Brand Identity Design:

  1. Initial Research: Conducted in-depth research into the fitness industry, identifying key competitors, market trends, and user preferences.
  2. Client Collaboration: Collaborated closely with the client to understand their vision, values, and unique selling points.
  3. Concept Development: Created multiple brand concept ideas, including color palettes, typography choices, and logo sketches.
  4. Feedback and Iteration: Presented concepts to the client for feedback and made necessary revisions based on their input.
  5. Finalization: Finalized the brand identity, including the chosen logo, color scheme, typography, and design guidelines.
  6. Brand Guidelines: Created comprehensive brand guidelines to ensure consistency in the use of brand elements across all materials and media.

App Design:

  1. User Persona Creation: Developed detailed user personas representing different types of app users, including gym members and fitness professionals.
  2. User Journey Mapping: Mapped out the user journey to identify touchpoints, pain points, and opportunities for engagement.
  3. Wireframing: Created wireframes to outline the app's layout, structure, and functionality, focusing on user flow and ease of navigation.
  4. Prototyping: Developed interactive prototypes to visualize the app's interface and gather user feedback.
  5. Visual Design: Designed the app's user interface (UI), incorporating the brand identity into UI elements, such as buttons, icons, and graphics.
  6. Integration of AI: Collaborated with AI experts to integrate artificial intelligence into the app, enabling personalized diet planning.
  7. User Testing: Conducted usability testing with real users to identify issues, gather feedback, and make iterative improvements.
  8. Development Collaboration: Worked closely with developers to ensure the smooth implementation of design elements and AI functionality.
  9. Final Testing: Performed extensive testing to ensure the app's functionality, security, and performance met high standards.

Throughout the process, communication with the client and collaboration with developers were essential to ensure the project's success. User feedback played a crucial role in refining the app's design and functionality, resulting in a user-friendly and visually appealing fitness platform.

PROCESS –
PROCESS –
PROCESS –
PROCESS –
No items found.

Conclusion

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Read the full case study
The result of our collaborative efforts was the meticulously designed prototype of Ernest's website, crafted using Webflow. This prototype now stands as a dynamic representation of our shared vision, ready to be brought to life when Ernest is prepared to proceed. The prototype effectively communicates the website's aesthetic, functionality, and user experience, providing Ernest with a tangible preview of the final product. With this foundation in place, we are poised to embark on the next phase of the project, where we will transform this prototype into a fully functional and captivating online platform that aligns seamlessly with Ernest's storytelling and objectives.

Detailed reporting and analytics to track payments and expenses

Reel Pay's reporting and analytics feature offers contractors a comprehensive view of their business performance. With this feature, contractors can easily track their revenue, expenses, and profit margins, as well as identify areas for improvement.

a person using a laptop

Option for freelancers to set up their payment preferences and view payment history

The payment history feature in Reel Pay is a convenient tool for contractors to keep track of their financial transactions. It allows contractors to view a detailed history of all their payments, including information on the payment date, amount, and client.

a person using a laptop

Integration with popular invoice and project management tools

Reel Pay seamlessly integrates with popular management tools, making it easy for contractors to streamline their workflow. With this feature, contractors can connect their Reel Pay account to tools such as calendar, invoicing, and project management software.

a woman sitting at a table with a laptop
a person using a laptopa person using a laptopa woman sitting at a table with a laptop

If they make you satisfied. why not satisfy them?

Happy freelancers lead to better quality work and increased productivity. Investing in the satisfaction of your freelancers can ultimately result in a more successful and profitable business.

50%
Of contractors get paid late or less than agreed
70%
Of hirers lose track of payments

Set up recurring payments for ongoing projects

The recurring payments feature in Reel Pay streamlines the payment process and eliminates the need for contractors to manually send invoices and follow-up on payments each time, saving them time and effort.

Illustration showing notifications of payments

Integrate with your favorite tools

Reel Pay's integration with other tools simplifies work management by connecting to calendars, invoicing and project management software in one platform.

famous integration tools logos.

Detailed analytics and reporting

Reel Pay's reporting feature provides contractors with a comprehensive view of their business performance, and allows them to make data-driven decisions.

analytics illustration

We believe that contractors deserve 100% of what they work for

Paying contractors 100% of their earned pay is a sign of respect and fairness. It demonstrates that their work and contributions are valued, and it helps to build trust and loyalty.

Fast Trasnfer

Reel Pay's fast payment processing feature ensures that contractors get paid quickly and efficiently. With this feature, contractors can invoice their clients and receive payments in a timely manner.

Secured payments

Secured payment feature ensures that all transactions are safe and secure. The platform uses industry standard encryption techniques to protect contractors' and clients' sensitive information.

Automated invoicing

Reel pay make it easy and intuitive to schedule invoices, in advance, to be issued automatically at a specified date and time, or on recurring basses for ongoing projects.
Never stress about invoices again!

DRAG
Liam standing on a city street corner in New York City, wearing a tan monochromatic outfit.