Fitter
Sneak Peak@2xSneak Peak@2x

Discovering User Types and Influences

We initially set up a survey to gauge people’s fitness and tech habits to get a sense of the target audience for Fitter. Even though the company is targeting athletes as their early adopters and evangelists we wanted to know who our target users were, how often they actually participate in events, and what influences them. 

Create a Simple but Clear Taxonomy

We were also initially presented with a list of four categories and a ton of subcategories. When we started interviewing people there was confusion about what was in each category. Our team conducted an open card sort to find out how people categorized the events themselves. In the end, we added one more category and adjusted “Outdoor” to “Outdoor Adventures.”

______________

“Design an interactive onboarding process that is fun and intuitive for users. It must not only help users understand the app but help Fitter find the right events.”

______________

A Multi-Purpose Solution

In order to best serve both the users and Fitter, we have to make the onboarding dual-purpose. We need to not only gather some basic information for the suggestive algorithm to work, but educate the users to use the card-swiping that Fitter is interested in using. We must do these two things while also making the experience enjoyable so we don’t lose our users early on.

Understanding User Needs

Through our research, we found that we had three main types of users that we would need to focus on. Initially, we knew we needed to appeal to the “Proactive Type” user shown below, but more importantly, we also found that the real power user that is going to be very important to Fitter is the “Yoga Enthusiast.” This user is booking many more events and going much more frequently that all other user types.

Persona Podium@2xPersona Podium@2x

Feature Prioritization

As we started to ideate and wireframe the app we quickly realized we had too many features. Not only did we not have the time to design every feature but Fitter needs to be able to implement these features and release quickly to start getting users. We diagramed our minimum viable product and started to see what features we would cut from our scope. One of the first to go was the deep social integration.

Feature Prioritization@2xFeature Prioritization@2x

Branding & Logo Development

In order to make sure Fitter was positioned for success in their initial launch, we wanted to make sure all their design collateral looked cohesive and professional. The previous asterisk style logo proved to be a bit confusing to people in testing and we realized it needed a little more personification. Our team designed several new options of the logo for the company. The result is legible in large sizes as well as super small sizes for social media and in-app branding.

Iterative Process

Our team started off developing several paper prototypes and tested them as a small group to find the  major issues. After several paper iterations, we developed digital versions in Sketch and made an InVision prototype. This proved to find more small issues, but the main problem was the lack of interactions which was such a strong component of our design. We then built our app in Flinto to prototype the interactions. With this new prototype, we were able to conduct much deeper usability testing.

Usability Testing

As we tested our interactive prototype we discovered several eye-opening insights. The first was that people were swiping so fast through the onboarding they never stopped to read any of the text which gave directions. So we needed to make everything visually explanatory.

 We also noticed that little visual details make a huge difference in the way people comprehend the interaction. People generally read left to right in our culture and therefore ended up swiping many cards to the left which translates to a “No.”  With this knowledge, we knew we needed to educate users on the functionality more clearly.

Lastly, we realized we need two different methods of searching. When a user is focused on finding a certain type of event they are likely to use a filter or search to narrow the results. On the other hand, when a user is casually browsing they tend to look at everything there is to offer. Our design needs to support these two types of searching methods.

Intro

The app opens with a short sequence of images. Each of screens of the intro sequence represents the different key user types to quickly communicate what the app offers.

Functionality

After signing up users are taken to a short tutorial on how card swiping works. We designed this as part of the onboarding flow after noticing testers needed an introduction to Tinder style card swiping.

Onboarding

Once users understand the functionality they are then asked to choose their interests. This will help Fitter train their algorithm to find the right events, but since we set this up as cards, this will also further educate users on the functionality.

Interlude

Once users have successfully completed onboarding we wanted to give a moment of pause while the app searches its database for events. This animation adds a bit of enjoyment and gives the app a moment to curate the events. For returning users, this becomes the opening screen.

Events Home

The main landing page for the app will be the Events page. Users are presented with a stack of cards for events that they can then swipe through. As users swipe yes and no the suggestion engine learns about the user and curates better events.

The Filter menu is also available here for users focused on finding a specific type of event.

 

Profiles

The profile page for the user keeps a visual record of the event category preferences and lets users update them at any time. It also gives access to personal info such as permanent location and payment info.

DSCF1832DSCF1832