• Add to Collection
  • Tools Used

    Tools

  • About

    About

    We designed a social network to help you find sport partners and events in your local area.
    Published:
WHAT IS GOTRAIN?

While the past few years has changed the way how we take care of ourselves by tracking each step we take, what we eat, how we sleep; getting bored or having not enough motivation is still a thing. No matter how much you want to stick with your resolutions, doing this alone is no fun. That's where GoTrain comes into the game.

GoTrain is a micro social network to help you find sports partners and events in your local area. The challenge was to create personalized experience while keeping it simple, so the user wouldn't feel lost between too many options. Having the MVP from the client, we designed a dynamic and fun to use interface and a prototype for their first release.
DESIGN GUIDELINE

All sports are challenging by nature and requires strength; hence we created a bold, high contrast and dynamic user interface. We used Avenir for headings and Proxima Nova for body texts - both with a wide range of weights to ensures you won't lose the strong identity with the different font sizes. Using black and white as base colours also helped with the high contrast look.

We also believed using environmental colours could help motivating users to go out, so we went ahead and assigned a particular colour for each category. Red for running, blue for swimming, green for cycling etc...
ONBOARDING

Although it looks like a simple step, we know the drop off ratio during the on boarding screens are often too high. That's why we came up with a simple approach and let the user sign up by filling only two inputs. User tests on this screen showed us 60% of the users would continue with their Facebook account anyway, but almost all of them mentioned they'd prefer having the show password feature instead of an extra confirmation field. Right after signing up, users are given a list of categories to choose their interests so they wouldn't see the events they would never join.
ACTIVITY FEED

After onboarding, users are taken directly to their personalised feed with a collection of all favourite events – which can be filtered by the quick filter tab with a single tap. Specific informations such as date, location and the duration of the events are given at first sight to give a quick view without going into the details.

Users can also create a new event or search for a more specific event without getting lost in the navigation
SMART SEARCH

We know that it isn't only about which sport you do but also how you do it – after all everyone has a different style. That's why we came up with this smart search concept to drill down the options. The users are first asked to choose the event type they are looking for and then given a list of tags to find exactly what they are looking for. As user makes these choices, a search summary is created on the top of the screen to show everything in one place and amend if needed.
GETTING SOCIAL

Okey-dokey, it's time to go out there and move it move it. 🏃

We know not everyone is a big fan of push notifications, that's why after you join an event GoTrain allows you to add it to the Calendar. We also noticed unexpected weather conditions can be a good excuse to sit at home so we give that information from the first second.

And of course GoTrain isn't only made to meet new people but also allows you make plans with your friends, hence we designed this simple invitation screen to invite your contacts or share on social media.
CREATING A NEW EVENT

Lastly, just like the rest of the app, we created an easy to use experience for creating a new event - where the user is not taken from one screen to another and can complete the flow with less than 7 taps under a minute.
Thank you for scrolling!

Need a design team and liked what you have just seen?
You can send an email to hello@misto.co or visit our website to see how awesome we are.