A person interacting with a cardio machine.

Project Disciplines

01
Research
02
Brand strategy
03
Graphic design
04
UI/UX design
05
Web Design
A desktop mockup with a web design of a product page.

Dynamic User Experience For Fitness Equipment Innovators

Circle Fitness, a manufacturer of fitness equipment for over 20 years, appointed ArtVersion to lead the creative direction, design, and development of its brand identity.

Circle Fitness needed a digital presence that incorporated a new design language that innovatively captured their equipment. ArtVersion redefined its design language and brand ecosystem to highlight Circle Fitness’s positioning in the industry. The team also designed and developed Circle Fitness’ brand guidelines to align with the new brand identity.

A front cover for a brand guideline book.

Color Palette

To modernize its digital presence, ArtVersion infused the brand's palette with new colors that exuded vibrancy and energy. The color narrative was designed to seamlessly complement their signature red while introducing elements that added modernity. The palette, featuring deep hues like grey and black contrasted against lively tones of teal and yellow, achieved a cohesive look while adhering to accessibility guidelines.

Energetic Green
#78F0DB
Lively Yellow
#E6E97B
Dynamic Gray
#414042
Calm Gray
#A7A7A7
Passion Red
#E71A0F
Poppins Thin typography.
Poppins
Thin
Poppins light typography.
Poppins
Light
Poppins regular typography.
Poppins
Regular
Poppins medium typography.
Poppins
Medium
Poppins bold typography.
Poppins
Bold
Poppins italic typography.
Poppins
Italic

Typography

ArtVersion selected Poppins typography for Circle Fitness’s new typeface. The sans-serif font added a contemporary feel with its lean line strokes while maintaining versatility across various formatting styles. Poppins was selected as it aligned with the overall graphics on the website as well as for its clean readability style. 

A brand guidelines "Colors" inner spread for a fitness manufacturer.

Custom Graphic Design Elements

The graphic design team crafted graphic elements and overlay patterns that vividly represented movement and dynamism—evocative of a fitness brand. These were incorporated into the newly enhanced photography assets across the website. This integration became a key component of Circle Fitness’ new design language, adding an extra layer of visual intrigue.

A custom graphic shape overlapping with an image of a person running up steps.
A man exercising with a medicine ball and a graphic over the image.
A book mockup of a voice and tonality section for brand guidelines.

Logo Design

ArtVersion enhanced the Circle Fitness logo by creating both light and dark versions, adding depth and dimension to its design. This adaptation ensured the logo maintained proper contrast in all forms of communication, aligning seamlessly with the ongoing improvements in the brand's ecosystem, where every detail was purposefully considered.

Three different logo designs stacked on each other.
Logo guidelines for a client.
A book mockup of a brand guide's page flipping.

Iconography

In addition to refining the color palette, typography, and graphic elements, ArtVersion also created bespoke icons that encapsulate fitness themes. These icons were strategically used for microinteractions across various sections of the website. Their line thickness and style were carefully matched with other graphic design elements, ensuring a cohesive and purposeful aesthetic throughout the site.

A dumbbell icon.
A treadmill icon.
A water bottle icon.
A kettle bell icon.
An icon of a hand strengthener.
An icon of jump rope.
A icon of a bench press.
A smart watch icon.
An icon of a running shoe.
An icon of a exercise bicycle.
An icon of a person flexing.
A bicycle icon.
A mockup of a brand guide showing lifestyle imagery.

UI/UX Development

With a design language set in place, ArtVersion designed and developed the user experience with a web design that showcased Circle Fitness products.

ArtVersion’s content strategy team curated copy that described each piece of equipment, along with content related to their legacy and mission. The website featured interactive user journeys, complemented by bold headers and striking images, reinforcing Circle Fitness’s image as a cutting-edge fitness brand.

Additionally, the web design’s visual hierarchy emphasizes the advanced technology of Circle Fitness equipment through rich, optimized visual assets and persuasive, conversion-oriented copy, all working together to deliver a seamless and compelling user experience.

UI Screens

Web Design
A home page web design for a fitness company.
A web page design featuring text and various logos and icons.
A timeline design for a website.
An image of a runner stretching with an overlay of text.
A product page design for a treadmill.
A mobile and desktop UI appears side by side.

Responsive Design

Mobile
A mobile web design with an image of a seat for an exercising machine.
A mobile web design for an athletic clubs section.
A mobile design for a treadmill product page.
A mobile web design for exercising equipment.

Development Guide

In conjunction with collaborative sessions, ArtVersion compiled an extensive development guide regarding the website's backend.

This guide included a step-by-step manual detailing best practices for website content implementation and instructions on accessing various features. This initiative empowered the Circle Fitness team to effectively manage and update their website, ensuring they had the necessary insight to maintain and enhance their digital presence as their brand continues to evolve.

Multiple tablets spread apart showing a development guide.

Catalog Design

ArtVersion covered other areas of the brand ecosystem with supplementary collateral materials.

The team designed, developed, and wrote content for a printed catalog. This catalog presented the specifications, technology, dimensions, and other key details of each piece of equipment for prospective buyers. The catalog struck a balance between visual allure and informative content, to align with the newly established brand system and overall Circle Fitness brand identity.