Sportish

Sportish

This was a proof of concept that I ran with during the fall of 2014. If you are an app developer who would like to see this idea come to fruition, contact me and let's see if we can make this work!

Sportish is a social network mobile app that allows friends who participate in amateur sports to organize matches and find other people to compete with. This idea came about when I've had an itch to play tennis, which isn't the most popular sport, and it's definitely one where you need a partner to even do a simple rally, let alone play.

I needed an easy way to find other people without relying on hit or miss options such as Facebook groups, but have found no digital products out there that make this easier. So I began developing the idea of a social network app that makes finding potential players easier. As I gave the idea a little more time to percolate, I wondered if just finding other players is a little too niche and instead expanded upon it to be a hub for any amateur level athletes who want a place to organize their competitions.

So with this idea, I approached several people who have an interest in playing sports, whether they were currently active or interested but not sure where to start. From there, I assembled three personas based off of common threads I've heard from them.

personas

The personas illustrated three distinct user-types that would be the basis for the overall design. There's the active college student who wants a way to keep things organized with the current people he plays with. There's the young business professional who isn't aware of what the local area has to offer for sport, but definitely wants to play. Finally there's the middle-aged professional who want to get back into fitness but concerned about only being matched against experienced and/or extremely fit twenty-somethings.

Aside from the obvious expectation that the app needed to be simple to use, it also needed to be inviting to currently active athletes and those who, say, haven't picked up a basketball in decades.

With the personas in hand, I was able to extrapolate the key actions they would like to perform and avoid, as well as set the foundation for the desired overall experience. Journey maps would help establish the flow of key tasks.

journeymap1
journeymap2

The journey maps were iterated upon frequently. Ideas that appeared early may have been cut later, but this gave a fairly comprehensive breakdown of what artifacts would be needed for the users to get the most out of the site. Many of the cut ideas inevitably lead to more practical options.

With enough information on the flows and journeys, from there I began filling sketchbook pages of layout ideas.

sketches

I come from a visual & UI background, so this was second nature to me. Many of the sketches were crude and short, usually spending no more than 30 seconds on a thumbnail and moving on to another idea.

I was not only illustrating full screens, but important widgets as well, such as the box scores and footer elements, and abstracted those out when doing a full page ideation.

sitemap

While sketching, some patterns began to emerge and I was able to iron out a site map. It had gone through some iterations, as some proposed features or functions were cut. One feature that was eliminated was a function tentatively labeled "My Playing Card" which would allow users to upload a photo and have it placed in what appeared to be a playing card format, complete with their present stats. This opened up the possibilities of offering a physical product they could purchase. For the time being it seemed to be too much extra fluff to be considered a nice UI touch and was getting in the way of the app's original purpose.

A key feature, if not the most important, that arose from this process was Matchmaker, and a flow for this needed to be developed. As the name implies, this allows users to set up matches against each other, and is where the bulk of the app activity derives from. Users will determine if they want a normal match, a tournament, or even have the app automatically set a match for them based off of their settings and other user settings (like availability, preferred sport, skill level, etc.). The concept is very similar to how many video games set up online matches.

Short of developing a sentient yet impartial referee-bot, determining a winner would be based on an honor-system agreement between the players in the competition. If players cannot agree, the match result will be listed as a "No Contest" or "No Record", and there's the option to unfriend the opponent if things turn sour. The app needs to ensure that winning & losing is not going to inhibit players from participating further, however. This would be done through the voice of the site, and ensuring that a message that the more important thing is participation.

After many sketches and finally getting the site map in place, I began wireframing the key screens.

wireframes

Shown here is a small sample of the wireframes that were built. Each page was given detailed annotations, which sometimes helped illuminate problem areas and even pointed out problems of their own.

The wireframes were also instructive in layout issues that sketches were too primitive to handle. Areas such as font-size, line-length, element alignment, etc. which are trickier to illustrate via sketches were laid bare here.

With those tweaks, I built a small prototype based off of the wireframes and presented them to a few of the interview subjects from the beginning. I found this was handy in pinpointing some layout issues, but at the same time it may have been wiser to have relied on lower fidelity, sketch-like mockups (such as with Balsamiq), which give greater credence to the "This isn't done yet" nature of the prototype.

As the wireframes were winding down, I began working on a visual language for the app, starting with an identity system. I don't profess to be a great logo designer, but I'm happy with the results here!

identitysystem

I went predominantly with green to really hit home the 'outdoors' nature of the app. An icon system was setup to showcase the featured sports at launch, with the intent of expanding upon this in the future.

With an identity system in place and the wireframes in a good state, I began working on the visual mockups.

appscreenshomescreens

I began with the home page to help set the tone for the rest of the app. I originally had a plan to show an explainer video here, but 1) with the app already downloaded, it's a good idea the user already knows at this point what it's for, and 2) a video is heavy and unnecessary. Instead, I used simple photos of playgrounds, courts, fields, etc. along with the accompanying logo for that image. This would rotate periodically.

appscreensprofiletomatch

I moved onto the profile page and tried to get a representative sample of what it would look like at any given time. The green is used predominantly but red on occasion to indicate a loss. In practice, that's a case where I would A/B test to make sure the red wasn't adding insult to injury since fair play and continued engagement is a key driver for the app. Again, I didn't want to discourage other players who may be more self-conscious of not winning all the time.

I mocked up several of the Matchmaker pages as well.

appscreensmatchmaker1
appscreensmatchmaker2

From here, I took a basic prototype with these mockups out to the same individuals who tested the wireframes and got a very positive response.

This is where the app sits to this day. Some key considerations that are not as obvious from the screens were related to creating a safe space for users. This relates to the physical and digital space. Users can disallow to show in search results, where they can use the app strictly with the people of their choosing and not allow others to search them out, as well as keeping match data hidden from other users.

Again, if you are an app developer and would like to see this realized, get in touch and let's make it happen!