Published on <a href="http://ift.tt/2mRt8fr">| Prototyping: From UX to Front End &mdash; Medium</a> Dilip Pitchika <img alt="" src="http://ift.tt/2mvU4i9"><a href="http://ift.tt/2mRhe5c">http://ift.tt/2mRhe5c</a>
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
<h3>Before User research, Here’s what I was planning about the app</h3>
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
<h3>User research phase</h3>
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.
<h3>After User research phase</h3>
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
<h3>Personas</h3>
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.
<img alt="" src="http://ift.tt/2mw0HRL"><img alt="" src="http://ift.tt/2mRhfGi">
<h3>User journeys and app navigation</h3>
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.
<img alt="" src="http://ift.tt/2mvKR9T">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 <a href="http://ift.tt/2mRtIKc">great resource</a> to build a site map fast enough.
<img alt="" src="http://ift.tt/2mvX12h">Site Navigation 1<img alt="" src="http://ift.tt/2mRtJOg">Site navigation 2
<h3>Sketches and wireframes</h3>
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.
<img alt="" src="http://ift.tt/2mvVFEY">For the landing and signup screens, I just went with one idea<img alt="" src="http://ift.tt/2mRhgdk">For the friends page I iterated to find better solutions<img alt="" src="http://ift.tt/2mw0RIX">Similarly for the events page, I created a few sketches<img alt="" src="http://ift.tt/2mRpodU">The 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 <a href="http://ift.tt/1ukPDT1">great resource. </a> 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.
<img alt="" src="http://ift.tt/2mRr1bO">Landing and Sign up wireframes<img alt="" src="http://ift.tt/2mvMrs3">Finding and add new friends wireframe<img alt="" src="http://ift.tt/2mRpphY">Attending and hosting an event<img alt="" src="http://ift.tt/2mvKOLf">Match 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.
<img alt="" src="http://ift.tt/2mRu4Az">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.
<h3>Now the dessert</h3>
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
(<a href="http://ift.tt/2mw0Ft7">http://ift.tt/2mw0Ft7</a>)
<iframe src="http://ift.tt/2mRfMA6" width="428" height="866" frameborder="0"><a href="http://ift.tt/2mw4WfY">http://ift.tt/2mw4WfY</a></iframe>
<h3>Concluding remarks</h3>
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 <a href="http://ift.tt/2mRnPfW">http://ift.tt/2mRnPfW</a>
Break the love button if you liked this post. Cheers.
<img src="http://ift.tt/2mw5suv" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2mRqUwI">Collaboration for compassion, here’s how sports made me a better designer</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> 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

Top Stories