Published on | Prototyping: From UX to Front End — Medium Dilip Pitchika http://ift.tt/2mRhe5c

Sports is a collaborative viewing experience, we all want to find that perfect sports partner. For those of us who have found them we always want to watch a game with them, but today we might be miles away from that partner. Do we still feel like watching the game that we love or do we just check for highlights after the game is over rather than watching alone.

My app bridges the divide and ensures interaction among fans in a way that no love is lost for the game.

We love to encounter the thrill, the challenge, the risk, the emotions associated with the game but not alone. My app is here to take the individual who loves sport to provide an authentic collaborative viewing
experience.

I understood to start this project, first I needed to feel what I was stepping into hence the research phase

Before User research, Here’s what I was planning about the app

Features of app:
1. We find fanatics for you to connect with
2. Find your friends and connect with them
3. Chat with friends using GIFs, match highlights, stats and commentary
4. Attend a game watching nearby
5. Host a game watching

User research phase

I understood to start this project, first I needed to feel what I was stepping into, hence the research phase commenced. I started with the best available place for research common rooms of KGP and since the market was based on youngsters and sport enthusiasts i feel it was the perfect place to start.
So I walked into LBS common room, hall rooms where people were watching in Hotstar and sat with them. I encountered a lot of new people in my hall (whom I’m now friends with) and expressed my opinions while I sat in their room. I was able to contribute to their discussions fast and hence I easily became part of new tribes.
I closely watched interactions among people during the game and then I started asking questions that I wanted to know answers to
1. What role does sports play in your life? How has it helped you?
2. How do you interact with others while watching a game?
3. Would you use my app? Why and Why not?

I could have simply asked the questions first and get back to designing the interface, but I believe that there is a huge difference between what people say and what they do so it was essential to watch the game with them to get to know better.

After User research phase

Now the features of app had changed to accommodate user needs
1. Find friends and connect with them (people you already know)
2. Chat using minimal interactions during the game
3. While chatting enable predictions and validate them
4. App finds fanatics based on your interests and preferences then helps form new friends
5. Share everything about a match from match centre in app
6. Attend or host a game watching

Personas

While interacting with potential users, everyone said they would love if this service was integrated with already existing social (fb,whatsapp) or sports platforms (Hotstar, cricbuzz). Now since it is a personal project I don’t think it’s necessary to think on those lines and I expect the same from the reader.

With all this User research in my mind I split my users into 2 broad categories with the help of personas.
1. Roshan Badjatia, 22, Software dev in Mumbai
2. Amal Augustine, 27, Engineer in BOSCH

Here’s the complete profile on them. These personas help me stay focused to their goals while designing interactions.

User journeys and app navigation

For any given scenario the user flow, gaps must always be taken care of first. I sketched out a basic user flow using the best and cheapest resource available for me. The pen and paper. I was doing this in a class so it might not be in it’s most presentable format but you get the idea.

User flow mapping

Site navigation was the next step after the user flow. Sketch symbols are by far the easiest way to build a site map and I found a great resource to build a site map fast enough.

Site Navigation 1Site navigation 2

Sketches and wireframes

Now with the users and the navigation in my mind, It’s GAME time.
The biggest problem for me was that I was not iterating faster and was being easily satisfied with a few concepts. I chose to use this as an opportunity to use a technique from Google’s Sprint i.e sketching 8 ideas in 5 mins. It worked out great. Check out my sketches.

For the landing and signup screens, I just went with one ideaFor the friends page I iterated to find better solutionsSimilarly for the events page, I created a few sketchesThe crucial messaging service of the app is laid out here

Now I had fair share of how each screen felt. I started to wireframe in Sketch because I did not want to move to visual design with ambiguities in my mind. I created a low fidelity wireframe in Sketch using a great resource.
Side note- Sketch has a lot of free resources for rapid prototyping for beginners in here. (I’m never using Photoshop for prototyping again :p)

Oh and yes, I named by app *SPORTACUS* based on the movie 300 (or Spartacus :p) to promote the fact “ United we stand” for every enthusiastic and motivated fanatic. Don’t worry much about the name it’s just a personal preference not much research based.

Landing and Sign up wireframesFinding and add new friends wireframeAttending and hosting an eventMatch centre screens, Sharing any information from screen is very important

I want to explain a particular feature of this app “Predictions”. This is what we do when we are sitting out to watch with our friends and boy we just love doing it don’t we. Now Imagine what if the predictions we make are validated and then reported to us at the end of match. I mean with this I’d always have a reason for teasing my friends. So how do we implement this. Check out the Video below to see how this feature works.

Prediction service in messages

(Disclaimer — I have shown this feature only for Cricket as It is widely popular in India, I’m still working out on this feature for Football and Tennis. I would love your suggestions on this)

I know it’s cool.(Shh, Don’t leak this Idea.Please)
It’s fast and minimal interactions for so yeah GOAL accomplished.

Now the dessert

Visual Design — My app’s visuals has been inspired from a lot of spaces, from cheers in Borussia Dortmund to the meditation medium Headspace. To reflect energy into the app I choose the colour Bright Orange and the font Circular to depict strength and collaboration. Here are a few screens from the high fidelity prototype.

I made an invision prototype to test how fluent the interactions are, check it below. Be sure to explore the messaging platform to see how good predictions are in high fidelity version

(http://ift.tt/2mw0Ft7)

Concluding remarks

I believe that sports is one big way out of depression and loneliness and with the decreasing no.of grounds and the increasing love for sports watching them is a big boost towards positivity and expressiveness. To be inspired by the likes of Sachin, Jordan and Pele feels magical and push a refreshing amount of faith into our lives, but it’s the teams that bring a sense of togetherness a feeling that “You’ll never walk alone”(Go Liverpool).

Hey, I would love your feedback on my work and am also looking for new projects in UX design. Hit me up at http://ift.tt/2mRnPfW

Break the love button if you liked this post. Cheers.

Collaboration for compassion, here’s how sports made me a better designer was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Collaboration for compassion, here’s how sports made me a better designer

Cool stuff, every week

More Articles