top of page
Fitted-Homepage.jpg
Fitted-Logo.jpg
PROJECT OVERVIEW

Fitted! is a fun, informative responsive website that can keep you motivated, help you get a great workout, track your progress, and let you have fun while doing it!

MY ROLE

UX/UI Design, Branding, Visual Design

TOOLS

Sketch, InVision, Flinto, Photoshop, Pen & Paper

THE CHALLENGE

Health, fitness, and exercise are three things that are very important to me on a personal level, and I’m quite familiar with a few existing fitness apps. Unfortunately, most of these apps are geared toward hardcore workout buffs that don't really represent the realistic goals of the average person. Comparing your results to those of a professional fitness model can be unrealistic and frustrating. But what about a fun, informative site that can keep you motivated, help you get a great workout, track your progress, and let you have fun while doing it? That's where FITTED! comes in!

​

​I opted for a Responsive web design that allows FITTED! to look great no matter the viewing size, giving the website an app-like feel that works for all devices. With that, FITTED! afforded me quite a bit of flexibility in my design style choices where I could lean toward a more “fun and whimsical” motif, because working out CAN be fun!

INFORMATION ARCHITECTURE

Information architecture can be defined as the science of "structuring the content of websites and mobile applications for ease of use."

​

My goal was to organize the content in a way that users would intuitively recognize the usability of FITTED! and find everything they need, without ambiguous, questionable functionality. It was important for users to be able to indicate their fitness goals and have workout programs suggested to help them reach those goals. I also wanted the users to be able to research and learn new exercises based on their goals, with instructions on how to execute those exercises properly, all done in a fun way!

WIREFRAMES

After determining the basic content and structure of FITTED!, I started on the design process. While it's important for the site to be unique and stylish, it's essential that it also be practical and useable. "Ease of use" is priority #1, because few things can be more frustrating than having to stop and navigate through multiple screens while in the middle of a workout!

UI-1_edited.jpg

RESPONSIVE LAYOUTS & GRIDS

Grids have been applied in design since they were first used to arrange handwriting on paper. In fact, simple column grids can even be found in the Dead Sea Scrolls where they served to organize text into readable blocks within a long, rolled-up document.

 

Today, grids help designers build better products by tying different design elements together to achieve effective hierarchy, alignment, and consistency.

​

As FITTED! is a "responsive" website (as opposed to a mobile app), a fluid grid system was implemented with 12 columns, a gutter width of 9px, and a column width of 22px, perfect for desktop, tablet, and mobile viewing.

*Click to expand

VISUAL HIERARCHY

Visual Hierarchy can be described as "the arrangement and presentation of design elements (in order of their importance) to influence the way the human eye perceives the information being displayed."

​

For FITTED!, I specifically chose a color palette, design elements, and arrangements while being cognizant of the Hierarchy design principles of "color and contrast," "size and scale," "alignment," "proximity," "spacing," etc., for the most pleasant and beneficial online experience. 

*Click to expand

UI DESIGN PATTERNS

At its core, UX/UI Design is about identifying and solving problems. Design Patterns save designers from having to "reinvent the wheel" in their design efforts and allow them to keep focus on solving problems instead. They can save time by having a pre-built, reusable design idea that's been optimized for the purpose it was intended for. 

​

While it is certainly true that common design patterns were implemented in the UI design of FITTED!, every project has its own unique problems and solutions, and no one design should ever be considered a "one size fits all" fix.

*Click to expand

MOODBOARDS

The purpose of FITTED! is to create a unique, festive, whimsical alternative to dry, technical workout apps and websites, and I wanted its Mood Board to reflect that sense of "fun."

​

From the color palette and the "characters" to the font choices, users will recognize that FITTED! will give them a unique workout experience.

TYPOGRAPHY

There are three certainties in life: Death, taxes, and there is no shortage of fonts available on the internet. For FITTED!, like all apps and sites, it's absolutely essential for text to be clear and legible. That said, there's ample opportunity to implement fonts and lettering that represents the fun and whimsy that is FITTED!

*Click to expand

COLORS

I wanted a color palette that matches my concept of a lighter, more whimsical design (think shades of “the Flinstones” meets “The Brady Bunch” in a modern workout site.) Somewhat retro and fun, I believe the colorful yet slightly “muted” color palette matched the feel and character of my design approach.

*Click to expand

IMAGERY

While FITTED! will feature primarily illustrations, I found many images that would fit the fun, colorful, uplifting visual approach to the design. Smiles, laughter, camaraderie, friendship... These are the feelings and emotions that my images of choice would convey and be appropriate for FITTED! 

​

For this design concept, images that would be deemed inappropriate would be the dark, serious, weighty black and white/greyscale images that are so popular in hardcore workout apps of today. Now, these images are great, but they just do not fit the whimsical vibe of the “Fitted” site.

*Click to expand

CUSTOM ICONOGRAPHY

Iconography is a visual language used to represent features, functionality, or content. Icons are meant to be simple, visual elements that are recognized and understood immediately.

​

For FITTED!, I chose to create simple "line art" icons, as well as full-color icons based on the color palette and overall stylistic feel of the site.

INTERACTIONS & GESTURES

Action Gestures such as "Tap" and "Swipe are clearly laid out and defined to alleviate confusion when it comes to the site's functionality.

*Click to expand

STYLE GUIDE

It was essential to create a Style Guide that could be used as a clear reference for developers, clearly laying out all of the design elements (buttons, typography, color, navigation menus, etc.) and interactions that occur within FITTED! are organized in a clear, concise fashion.

*Click to expand

DESIGNING FOR BREAKPOINTS

When considering breakpoints, it's important to keep in mind that breakpoints should be as "fluid" as possible. I believe that what happens in between the breakpoints is as important as what happens at the breakpoints. Starting with rough sketches, I chose a minimum of three breakpoints, one for each type of device (mobile, tablet, and desktop), designing for the smallest viewing device (mobile phone) first. 

*Click to expand

MOCKUPS

For clients and stakeholders, presenting a digital mockup can be best the way to go as mockups give you a realistic perspective on the overall look of your site or app. Visual hierarchies, that show the differences between design elements such as fonts and color, are finalized at this phase of the design process. 

​

The mockups for FITTED! affirmed a cohesiveness with the design colors, fonts, characters, and visual hierarchies. 

*Click to expand

FINAL DESIGNS & DEVELOPER "HANDSHAKE" (NOT HAND OFF)

Per "usability.gov," the "Best Practices for Designing an Interface" are:

​

  • Keep the interface simple. 

  • Create consistency and use common UI elements. 

  • Be purposeful in page layout. 

  • Strategically use color and texture. 

  • Use typography to create hierarchy and clarity. 

  • Make sure that the system communicates what’s happening. 

  • Think about the defaults.

​

The FITTED! interface design hits every one of these marks. I believe the best user interfaces are "simple." They do not contain overly complicated or gratuitous elements. Instead, the feature necessary elements that are succinct and make sense. Clean, consistent, and user-friendly interfaces are the name of the game with FITTED!

​

It is important to remember that UX/UI Design is a collaborative effort between designers, product owners, and stakeholders, however, that collaboration does not end when the files are passed on to the development team. There are many tools to help designers and developers work together, but the best tool is clear communication and solid relationships.

*Click to expand

CONCLUSION

Simple, stylish, fun, and effective: This was my goal throughout the FITTED! interface design process. Users are humans, and with that frequently comes short attention spans and a limited cognitive load. It was important to create a fun, exciting workout site with a clean, intuitive design that didn't get bogged down with a lot of unnecessary content and confusing interface design, 

*Click to expand

bottom of page