The site's first screen on black: three tall panels side by side, Motiny with a round M mark on black, Trainy with a diamond T mark on white and Sternfit with an S mark on black, and a menu bar under them
Team Sternfit

Team Sternfit

Web designUI/UXInteraction design

A recruiting site for Team Sternfit, the team behind three fitness projects: Motiny, Trainy and Sternfit. Sternfit is a platform where athletes view and share each other’s workout programs.

My role

Designer

  • User flow and wireframes
  • Loader animation and first screen
  • Main page and brand pages
  • Photo selection and treatment
  • Phone layout

Team

I worked with Roy Huang, Co-Founder of Team Sternfit.

First screen

Three brands on one screen

The site opens with a short loader: the line “Team up, we train.” between two thin rules on black. Then the three brands appear as tall panels side by side. Pointing at a panel makes it wider, and the menu under the panels leads to each brand’s page.

Motiny

What motivates you

An old black and white photo of a small child in boxing gloves sparring with a man. The mark is an M inside a circle, ending in an exclamation mark.

Old black and white photo of a small child in big boxing gloves facing a kneeling man in gloves
Motiny panel: the same photo darkened on black, under a white round M mark and the word MOTINY

Trainy

Team up, we train

A trainer stretching a woman’s leg, as a silhouette on white. Trainy is the only white panel of the three. The mark is a T inside a diamond, drawn with double lines.

Silhouette of a trainer in a blue shirt holding up the leg of a woman lying on a balance ball, on white
Trainy panel: the silhouette in grey on white, behind a black double-line diamond T mark and the word TRAINY

Sternfit

Be stern, be fit

A fighter kneeing a heavy bag, the same photo as on the site’s cover. The S mark is cut through by a diagonal line and also signs the cover and the footer.

Sepia photo of a muscular fighter with his arms on a heavy bag and one knee raised
Sternfit panel: the fighter darkened on black, under a large white S mark and the word STERNFIT

Other photos

Two more photos were picked for the content pages: a boxer at a bag with red hand wraps and an athlete resting on a bench in the gym.

A boxer with red hand wraps punching a black heavy bag against a dark background
A muscular woman in a pink sports top sitting on a gym bench with a water bottle, in a dark gym

Main page

The story under the first screen

Below the panels, the main page tells how the team started, in five blocks. Each block is a dark photo with a few lines of text in capitals. Two Get in touch buttons lead to the join form.

“It all started with a simple idea, can we build something extraordinary, besides getting a job at Wall St?”

Two columns of text on either side of a hanging light bulb, then “Seeking epic humans” and the first Get in touch button.

Block with a light bulb in the dark between two columns of text in capitals, and a Get in touch button with thin lines on both sides below it
“Turning an idea into reality can seem like magic.”

The same line as on the cover, over an athlete gripping a barbell plate. The left half of the photo is blurred to keep the text readable.

Full-width block with the line Turning an idea into reality can seem like magic on the left and an athlete gripping a barbell plate on the right
“But the people who make it happen are not magicians, they are humans.”

Half of an older man’s face in hard light, with the text in the dark half.

Block with half of an older man's face lit from the left and a short column of text in the dark half on the right
“Ideas don’t change the world. Humans that turn ideas into reality do.”

Centred lines over sparks, with some of the words in copper. Fainter copies of the lines sit above and below.

Full-width dark block with sparks behind three centred lines of text, some words in copper
“Seeking the crazy ones.”

The footer has the second Get in touch button, a line about the team, follower counts for Twitter and Facebook, and links to About and the three brand pages.

Black footer with Seeking the crazy ones, a Get in touch button, a short line about the team, Twitter and Facebook icons with follower counts and links to about, trainy, sternfit and motiny

User flow

From the first screen to the join form

The wireframes follow one visit: the first screen, About, the Motiny, Trainy and Sternfit pages, then the join form. Each brand page has its mark, its line and social links next to a photo. The form asks for a name, an email and two short answers.

Grey wireframes in two rows with arrows between them: the first screen, About with a large image and a Get in touch button, the Motiny, Trainy and Sternfit pages with a mark, a line and social icons beside an image, and a form with four numbered fields

Responsive

Phone layout

The layout works from 320px wide. On a phone the three panels stack, each as wide as the screen, and the menu moves behind a button at the top right.

A white phone lying at an angle, showing the Motiny panel across the full width of the screen with a menu button at the top, and the Trainy panel below it

Style guide

Type and colours

The site uses two typefaces and three colours. Everything else comes from the black and white photos.

Georgia specimen: the alphabet in capitals and lower case and the digits, in bold

Georgia

Titles and copy, including the TEAMSTERNFIT wordmark on the cover.

Museo Sans 500 specimen: the alphabet in capitals and lower case and the digits

Museo Sans 500

Interface elements and copy: the brand names on the panels, the menu, the buttons and the lines in the blocks.

Colours

  • Text

    #333333

    Text on white

  • Hover

    #888888

    Links and buttons on hover

  • Background

    #FFFFFF

    Page background