Fitties Landing Page

The Solution

Research

In order to know who I was going to be designing for, I conducted three exploratory interviews. My goal was to determine what people like most about their existing fitness habits, what they find most challenging about their fitness habits, and what role they see technology playing in their fitness journey. All interviewees were a range of fitness levels and ages 29-35. All used some form of technology to enhance their fitness experience, including apple watches for health and activity monitoring, and MyFitnessPal for food tracking. One interesting note, was the use of PlantNanny to improve consistent water consumption throughout the day, essentially training a habit.

Those with the strongest fitness levels worked out at a consistent time everyday and relied heavily on apps and tracking. They estimated 15-30 minutes of tracking daily. The most common reason one wouldn’t work out would be because work ran late or something interfered with their routine. Another common problem was losing interest in the app. No users in the interviews had problems with notifications and they liked when the interactions with the app were quick and simple.

Creative Brief and Branding

Based on the interviews, I created a creative brief that would inform the mood boards, persona, and overall design. I created multiple mood boards with a different emphasis. The first was aggressive and sporty with implied strength and speed, using imagery like cheetahs, rockets, and strong bold fonts. Another concept included peaceful and mindful motifs, with a soft and gentile pastel pallet. The one the client chose, shown below, focused instead on a quirky look, with playful characters, fun colors but ones that inspired the idea of health, and round and inviting text.

Wireframes

Once we had a general mood and style direction, and the components of the landing page were clear, I got to work creating wireframes. I started with simple impressions to get a rough idea of structure, blocking out where I thought headlines would go and where I thought images would go. I tried to stick to the essential sections: navigation, hero, benefits, how it works, testimonials, and a footer. Here is an example of the header section in web and mobile side by side.

Since this was a landing page promoting the app, I thought the app should be front and center. The hero section features an app screen and call to action to download the app. Just above the fold, I tease out the benefits section, though more and more users are expecting to scroll to more content if they are intrigued by the hero.

For the layout grid, I went with a 12 column grid. I felt it gave me the flexibility of being able to add a section with two, three, or four side by side sections without breaking the grid. Since mobile was going to be a condensed experience, I reduced the columns to 6. While I did many versions of the benefits section, I eventually stuck to a layout with two sections. I felt this gave the content much more breathing room and let the benefits stand on their own.

Here’s a look at that section at the start.

From where I started in the wires to where I finished, I saw that this was too condensed vertically, which is why I expanded it down. I had also originally thought I would be expressing these benefits through photography, but found it was a jarring departure from the rest of the page, given how animated it was. Instead, I went with illustrations, almost iconography, to show each of the benefits. I tried to stay consistent, though I found the steps in habit development needed more weight to them then the border of the clock, which was decided by feel. All fit into the same module template. You can see the final version below.

Font Test

I did a test of different font and button combinations in order to find a set that worked well together. each little card had different fonts, sizes, weights, and buttons. I wanted to keep in mind of making this fun and playful, inviting, but still clean and modern.

I was looking for a font with a softer rounding as I thought that would be less intimidating than other sports focused font choices. I still wanted some strength in it, which meant a square letter shape and medium to high line height. I wanted it to be clean and modern, which in this case, meant favoring a medium sans serif font. I ended up choosing Poppins as my headline font and Graphik as my paragraph style. I thought Filson would have been a great option as well with its quirky tails, but it wasn’t in the budget for this project. I thought Graphik was more readable since the ascenders rose higher and made the letters more distinct. I created a style guide for this once the fonts were selected.

Color Test

I played around with different color combinations based on my mood board direction. I used sample wireframes to see what these colors would look like in practice. I wanted to maintain that playful sensibility of the app but still build something you could trust as a health-driven person. I found the final combination, the deep blue and teal to be the best to convey this notion. They seemed to provide a clean healthy look while the teal offered some playfulness and approachability. I put together a color guide to refer to when developing the pages.

Illustrations

One of the key functions of the app was demonstrating the fitness journey through the progress of the avatars. Since these didn’t exist yet, I designed my own characters. I started with a core shape and proportion and adapted them based on the anatomical differences of the animals they were referencing. The bodies, arms, and legs are the parts that change over time so I wanted to start with a body that was a little softer. I felt that the user would better identify with something that was still reasonably in shape as opposed to round. Given more time and resources, I would have tested different body styles and shown them to users to see what they preferred.

Here is what the cast of characters looked like as a starting point:

As you can see, the characters share a similar body type and some other shapes that make up the rest of its features. In addition to creating a batch of characters to use in this design, I wanted to demonstrate how this could be expanded for the app to give users more options to choose from. Maybe a user is able to choose a shirt color, or maybe there are several types of bears with slight differences. I wanted to allude to the dynamic nature of these characters. You can see the evolution of how these characters over the course of the fitness journey in the ‘How IT Works’ section below.

Hero Image and Header

Lastly, I used the resources I created to build a hero image and header section of the page. I used the font and color styles for the title and subtitle copy. I started with the frames of the characters and then changed them slightly for a new composition, mostly moving limbs which was a simple task, but also rotating the head, changing the eye direction, and shifting the balance. I wanted people to know this was an app right away so I included clay device templates and a stand-in splash screen, along with buttons for downloading at the Apple or Google Play store. On the mobile version, I supposed this would be recognized in the device data and it could show the appropriate link automatically.

For the navigation, I was supposing this was an existing gym, as per the original brief, so I wanted to imply a style closer to what a studio based gym might look like. I thought the colors could stay the same, but I included sharp patterns like the shape above and below the selected menu item, the hamburger menu, and the improvised logo. I also used a taller, more aggressive font - Antonio, though I used Poppins for the app menu item and the ™ symbol to help it stand out across the rest of the site. This is what the header and hero ended up looking like.

Conclusion

Overall, my project was well received by my classmates and instructor. I was happy with how the project worked out and would even be excited to eventually build an app like this. One piece of feedback I received was that it would have helped to see the app to see how the styles carried through, which I completely agree with and would include in future versions.

I especially liked digging deeper into the design process, iterating on different modules of we page, experimenting with colors and fonts, and illustrating the little characters. Though I believe they are all areas where I can improve, It’s been promising to see the progress I’ve made along the way and I’m excited to see what I might come up with next!

Full Landing Page

Full Mobile Landing Page