Prototype

I. Wireframes

Many design decisions were made as we experimented with different information architecture, content layout and structure in our initial wire-framing phase.

Desktop Interface

We decided to design a desktop interface because our users enjoyed being able to see their friends while they exercised, and a phone screen is not large enough to comfortably house multiple video streams. A larger screen size also allows users to follow along exercise tutorials more easily.

Top tabs + Sidebar

For our navigation system, we decided to include main navigation tabs at the top of the screen. The “Friends” sidebar is persistent throughout nearly every screen because the essence of our concept is “social fitness”. 

Modals

We felt like this design pattern was best suited for our system because modals effectively constrain and focus user actions without navigating them away from where they were. Additionally, modals have the added benefit of keeping navigation eminently recoverable.

II. Visual Design Language

Colors

Our color palette emphasizes the concept of “social fitness” and “wellbeing”, while aligning with our non-functional requirement of making the interface “friendly and inviting.” We chose purple as the primary (brand) color because it synthesizes the invigorating vibe of red and the stability of blue, evoking a sense of calmness and motivation. To add a cheerful and energetic touch, we decided to use a warm yellow-orange as the secondary color. Since orange and purple are complementary colors, this pair is not only pleasing to the eye, but also they contribute to the friendly, vibrant, and modern look of the interface.

 

Typography

We chose Roboto as our primary (and only) typeface because of its legibility and versatility. Since we are presenting a lot of information, it is crucial to use a clean and easy-to-read sans serif typeface. Fortunately, Roboto not only has a geometric form, but it also features organic curves. Since our goal is to make a friendly and inviting interface, the humanist nature of Roboto conveys a sense of openness and flexibility. Moreover, Roboto is very versatile in that it has different weights (from Light to Bold), which makes it easier to create visual hierarchy and to present an abundance of information more effectively. Finally, Roboto works well on a high resolution screen such as the computer, which fits our system and its context perfectly.

Space + Grid

We used a 10-column grid because it allowed enough flexibility while avoiding presenting too much information at once. Since our design has a “Friends” section on every page, we’re left with 8 columns for curating the content. This layout helped us maximize the usage of empty space on the screen, and supported the notion of centered alignment throughout the interface.

 

Texture

We used shadows for the card elements, videos, and pop-ups in order to bring more contrast to the key contents and background. Card with drop shadow is an effective way of grouping relevant information together. Especially since we have a lot of textual and visual information on the interface, using bounding boxes for grouping and categorizing information can feel visually heavy and cluttered. Drop shadow, on the other hand, is more subtle and adds visual depth to the overall design.

 

III. Prototype Walk-through

Onboarding

Home Page

Join a workout

• Join your friend’s on-going workout session
• Preview tutorials for the workout session
• Adjust video and audio settings

Ping a friend

• Invite friends who are active (and “idle”) on the platform to start a workout session together
• Start a workout session spontaneously rather than scheduling in advance

Accept an invitation

• Accept friend’s invitation for scheduled or spontaneous workout session(s)

Tutorials Page

Exercise with tutorials

• Select tutorial(s) to follow along in your workout session

Save a tutorial+ View saved tutorials

Progress Page

• View daily and accumulated workout progress
• View past workout logs (workout types, duration, tutorials, workout buddies)

Schedule Page

Schedule a workout

• Schedule a workout with your friend
• Support recurring workout sessions to help users form a more consistent routine
• Encourage friends to hold each other accountable for health-promoting behaviors