TurfChamp
- Danny Pineda
- Jan 27, 2019
- 14 min read
Updated: Jan 31, 2019
Football
Considered the worlds favorite game and a game that I grew up loving. The history of football can be traced back to the year 1863 when a branch of the English rugby football association branched off and turned into the first football association in England. Football is a historic game that has been enjoyed for thousands of years as many enjoyed kicking the ball, I know that I did when I used to play kickball in Elementary school. Football is a game that requires a lot of skill since you are required to use other parts of your body besides your hands. Mastering football with your feet is not an easy task and requires time and experience to master.
Project Overview
For my final project at Ironhack, I decided to concentrate on the sport that I grew up playing in Miami Beach. Just like in my prior projects, I will be executing the Design Thinking process. The Design Thinking process evolved from User Center Design (UXD) and works in conjunction with other design methodologies. One which resonates often with UX/UI designers is the User Experience Design (UXD). UX/UI is a user-centric approach, the UX portion focuses on how it works and how people interact with it, the UI portion, on the other hand, concentrates on the look, feel and the layout.
For a more detailed explanation of the design thinking methodology please read “An Introduction to Design Thinking Process Guide”.
Increase in participation rates meant that municipal parks had to deal with more maintenance on soccer fields. Eventually, parks began to close fields for maintenance more frequently and in some cases banned people from playing on the fields. This led to a dilemma that many soccer players had to deal with here in South Florida. Where do you go to play?
Our Client: Soccer Maniacs
Soccer Maniacs is soccer apparel company based in South Florida with a total of 9 locations across South Florida. I met the owner Dave Batista at a tech-related networking event and spoke about our passion for soccer. One of the topics that we discussed was in relation to the increased number of soccer fields operating in South Florida and how technology is almost non-existing in that market. We exchanged information that evening and parted ways.
A few days later, I received a call from Mr. Batista’s secretary requesting to set up a meeting to discuss the development of an application centered around soccer fields and pick up games search with an option to pay ahead of time.
After meeting up with Mr. Batista and his associates, I began the UX process of the project.
The Problem
With no application available for soccer field reservations, soccer players are required to interact directly with the field renters by calling in to make a field reservation. This becomes a problem, because of operational hours and peak hours. During peak hours employees are interacting with customers and accepting individual field payments. Taking payments individually creates a waiting queue and worsens when games end at the same time.
The other option besides calling the field renter is using their proprietary website if any to make the booking. Field reservation is a time-consuming process that doesn’t guarantee that there will be fields available and could end up being a demoralizing experience.
Project Overview
We will begin the project by focusing on verifying if there is a market for a soccer application with the capabilities to reserve and book a field and search for pickup games and reserve your spot. Verifying the market for applications similar to ours will also provide us with valuable information about our competitors. The verification process will be taking place in the Empathy phase of the Design Thinking process.
Similar to other projects that I have posted, this will follow the same pattern of empathizing, defining, ideating, prototyping and testing.
User Center Design and Research
One of the main goals of designing is understanding who you are designing for and many techniques are used to accomplish that goal. Research plays a key role in understanding the needs, goals, and motivations of the user. Using Research ensures that you are solving a problem that actually exists in peoples lives and allows you to understand the big picture. User Center Design is an iterative process that will continue to be in play throughout the whole length of the project.
A big percentage of research happens at the beginning of a project and continues in small doses throughout the rest project. There are many combinations of tools and methods that are used to gather raw data. Some of those tools and methods include interviews, focus groups, and qualitative and quantitative surveys. Once the raw data has been collected, it enters the data analysis stage, where trends are identified and a consensus is formed.
Market Research VS UX Research
One key difference between Market Research and UX Research is the sample size of people you are surveying. A large sample size of data doesn’t need to be collected for UX Research to obtain insight into how people use a product and what people do with the product. Compared to Market Research, Market Research welcomes a large sample size to understand what people buy and say. Less is better in this scenario since it provides deep and focused insight for UX Research.
Soccer Field Research
According to the Synthetic Turf Council, there are between 12,000 to 13,000 synthetic turf fields that were installed in the United States by the end of 2013. Installations were calculated to be happening at a rate of 1,200 to 1,500 fields per year and in South Florida, there are over 180 synthetic turf fields currently operating. Synthetic turf fields have become a big business for many entrepreneurs and the change in soccer field culture can be verified by doing a quick online search for turf fields on google. The Synthetic turf field demand has overtaken the natural grass fields, mainly because many soccer players were pushed out of natural grass fields by municipal parks.
Empathize
The increasing popularity of synthetic soccer fields within the soccer player community in South Florida is undeniable. In the Empathize phase of the Design Thinking process, we will focus on obtaining detailed research by conducting quantitative and qualitative research to have a better understanding of what users are experiencing at the soccer fields. To generate both surveys quickly and efficiently, we utilized Chris Thelwell’s Lean Survey Canvas. The Lean Survey Canvas allowed me to focus on the insights that were needed to validate my hypotheses and create concise survey questions.
Quantitative Survey
Using the Lean Survey Canvas, I was able to create an 8 question survey that is more concise, clear and actionable. This was exactly the same approach that I implemented in the BloomBox and Wellness projects. For TurfChamp, we decided to focus on these 8 questions:
How many times a week do you play soccer?
What type of soccer field do you play in?
At which South Florida locations do you play soccer?
How many soccer groups do you have?
How do you communicate with the group?
Have you had players cancel last minute?
Would you ever consider making a reservation for a soccer field through an application?
In the time of need would you be open to allow a random soccer player to fill an open position?
Analyzing The Data
There were several key questions that provided us a lot of insight into confirming our hypothesis. Question number one provided us with insight into how many times a week do soccer players play soccer? About 80% of soccer players played soccer more than two times a week thus confirming that there is a demand in field reservations.
Now for question number 2, we wanted to find out exactly the type of fields that they were playing soccer in?
Soccer players who currently played on artificial turfs made up 87.5% of the market and the next biggest competitor was natural grass, which made up only 8.3% of the market.
Question number 7 was a very direct question and we wanted to know if they preferred to make field reservations through an application instead of by phone. We weren’t surprised by this response since smartphones control 47.5 % of the market Vs. personal computers.
Organization
Being able to keep yourself organized and cataloging ideas and data is very important for User Research (UX) and User Interface (UI) since you have several components under User Research, Information Architecture, Interaction Design, Visual Design and Prototyping happening through different phases of a project. To maintain control of the deliverables for this project, I used Trello also known as Affinity map to keep myself organized throughout every phase. The other function for the affinity map is organizing your data that was obtained from the research. Ideas, opinions, issues and any other type of data is organized based on their relationships within the Affinity map.
Interviews
With quantitative research, we were able to obtain results of “What people do” and now we move on into understanding “How people think”. Understanding how people think can be accomplished with the assistance of qualitative surveys, discovery interviews, and usability interviews.
Interviews are performed with stockholders, subject matter experts (SME’s) and users to find pain points and opportunities. The Who, What, When, Why and How format serves as an outline for qualitative surveys. When conducting an interview there are a few things to keep in mind and those are:
Explain your purpose
Create small talk and ask easy questions
Don’t be too formal
Focus on pain points
Let the interviewee lead
Be engaged
Ask open-ended questions
Have a guide ready but don’t be afraid to improvise
Ask follow up questions
And always ask WHY?
The more detailed the answer the more beneficial it will be in helping to identify pain points and opportunities.
Qualitative Surveys
In this section of the project, we focused on interviewing administrators who manage and control online soccer chat groups. Administrators of soccer groups perform multiple functions and one of those important functions is field reservation. We went ahead and interviewed three administrators individually in the comfort of there homes and found out about their experiences with field reservations.
From the qualitative survey responses there seem to be a consensus on one pain point which constantly kept appearing within the responses for multiple questions.
Payment of the field after the game is at the core of the issues for both field payment and field reservations. Not having players pay for their share of the field after the game is a pain point for the administrators. It becomes more of an issue when payment tracking is done with a notepad and a pen. Players whose name is on the list get crossed out once they have finally made the payment. With the advancement of technology, this has become an archaic method of tracking player payments and places a higher liability on the administrators and the players who paid for the field.
Lean UX Principles
Lean UX principles will continually be on display through the project. Projects are going to be approached almost exactly in the same manner. first by performing research, understanding users, analyzing data and drawing paper sketches. It is recommended to use UX methods and tools in between to help you test your hypothesis, build prototypes and test. The whole process is broken into smaller chunks or done incrementally plus the process is iterative.
Lean UX Steps:
Declare assumptions
Create an MVP
Run an experiment (user test)
Feedback & research
Revise assumptions, declare new assumptions, and repeat.
Define
Lines begin to blur between phases towards the end of each one as you begin to transition from one to the other. In the define phase, we begin to “process and synthesize the findings in order to form a user point of view that you will address (Ironhack, 2018)”. With interviews and data collected, we should have a better understanding of what type of user we are designing for by synthesizing research into actionable information.
Brainstorming
Mind mapping is a non-linear tool used during a brainstorming session, where you concentrate on the main topic, which is located at the center and you begin to branch out to other ideas. Mindmaps encourage idea generation by either writing or drawing the idea on a piece of paper or you can even use XMind mapping software to map your ideas. I was able to understand what happens when stress converts into depression. Mind mapping helped me understand the cause and effect of stress and how to it can be minimized. The ideas collected from Mindmaps are then organized into related groups on the affinity diagram.
User Personas
“Personas are composite archetypes based on behavior patterns uncovered during the course of our research, which we formalize for the purpose of informing the product design (Ironhack, 2019)”
In User Research, we build these composite archetypes to know exactly who we are designing for. Research has led me to create the embodiment of our ideal user type named “Jean Paul The Mid Fielder”. Jean Paul the Mid Fielder is the non-generic persona that will create a psychological effect of knowing who you are designing for even though it’s a fictitious persona. Making that connection and realizing the group of people that you are targeting instead of focusing on everyone is an advantage because different users have different behaviors and goals.
Empathy Map
Empathy map was created by Dave Gray and has become a part of the User Center Design. The purpose of this framework is to assist the designer in developing empathy and understanding your users. This is accomplished by placing yourself in the user’s shoes after analyzing your research and writing down your understanding of how they think, feel, hear, see, say and do. Pain points and gain/goals are written down and then the empathy map is tested to make sure they represent your targeted user group.
User Journey
Ideate
“Now that we have Defined the problem and have a clear idea of who our users are (their frustration, goals, and motivations), we will use a series of tools and exercises that will help us generate ideas on how to design a product that will help users accomplish their goals (Ironhack, 2018)”
In the Define phase of the Design Thinking process, we were able to generate ideas quickly by conducting a brainstorming session by creating a Mindmap of ideas. Similar to Mindmapping there are tools and exercises that can be used to quickly “focus on a small part of the problem and explore a specific feature or go broad and think big picture in the Ideation phase (Ironhack, 2018)”. Above we have crazy 8’s, which I have used in the past to rapidly create a solution to a problem and obtain different concepts of the solution from fellow colleagues.
Concept Sketching
Concept sketching is the wisest most cost-efficient, time-saving and quickest way to test a solution without getting emotionally attached. I began ideating TurfChamp field reservation app within the confined of an iPhone 6 template and then began testing my application using the low fidelity sketches. Using a little-known application named Marvel, I was able to take pictures then upload them to the app, created hot-spots to interact with and tested the flow and feel of the application.
Here is a sample of the Marvel app in action for my soccer reservation app.
Advantages of low fidelity prototypes are:
high-level brainstorming and exploration
working through the problem
concept testing
collaboration
After testing your low-fidelity prototypes with users, it’s time to obtain constructive feedback of their experience with your product. Constructive feedback needs to be meet three criteria and those are actionable, specific and kind. Actionable feedback that was received for this project included deleting the screen requiring age, height, and weight of the user since that information could be inputted at a later stage and not on the on-boarding process. Specific feedback was directed at shortening the on-boarding experience and avoid asking personal information from the beginning. Instead, let them provide the information when they are ready. Feedback is not always going to be positive, so don’t let negative feedback get to you.
Obtaining feedback has one purpose and that is to help you improve your product and the more feedback received the better. Eventually, you will start noticing patterns from the feedback that is obtained and use it to make improvements.
Prototyping
With every build of a prototype, testing is needed for validation, and we must continue to analyze and evaluate everything that was done in prior phases and current. Below is a list of everything that has been accomplished up to this point.
Surveys and interviews with results and conclusions
Affinity Diagrams
Brainstorming sessions and mind mapping results
Problem Statements + Personas
Empathy maps of your Personas
User and customer journeys
Story Boards
The results of the ideation exercises
User Stories
Your concept sketches
Concept Testing
Through every version or iteration of your product. concept testing will be taking place. Concept testing has been happening for low fidelity prototypes, mid-fidelity prototypes, and high fidelity. I have been able to perform usability testing consistently with the help of classmates, friends, and family. In usability testing, we are gathering quantitative and qualitative data by observing, listening and taking notes. Concept testing is a cheap and fast approach to identify poor concepts and make necessary changes and improvements.
Flowcharts have multiple ways of displaying how you want a task to be accomplished. You can depict a flowchart by focusing on a single flow to complete a specific action or a user flow. User flows don’t take a linear approach and branch out thus providing a more detailed approach to the journey you want the user to encounter. Flowcharts can also be taken to another level by using wireframes and turning those wireframes into Wireflows. Wireflows provide more context on the interactions that are happening within your application or website. Read more about flowcharts on this medium article: UX Glossary: Task Flows, User Flows, Flowcharts, and some new-ish stuff.
Understanding the flow of your application is important right next to knowing how you want to structure the content, this is where sitemaps come into the picture. A sitemap is made up of reference category at the top and is followed by sub-categories. You want to keep the sub-categories under 7 and anything beyond that point needs to be grouped together under another category.
Human Interaction Design
I’ve been focusing almost completely on the User Research and haven’t spoken much about User Interface. User Interface has been in full effect through a practiced called Interaction Design (IxD). “ Interaction design borrows theory and technique from traditional design, usability, and engineering disciplines; but it is greater than a sum of its parts, with its own unique methods and practices (Cooper, 1995)”. The interaction between the user and the user interface is what is being tracked through the process of testing.
As a UX/UI Designer, you will ask yourself if the user is enjoying the interface of the application or website? are they having any difficulties? IxD follows 5 principles and those are:
Good Interaction Design is ConsistentGood Interaction Design is VisibleGood Interaction Design is LearnableGood Interaction Design is PredictableGood Interaction Design provides Feedback
Things to keep in mind is that “UI Design is about how it works before I touch it and interaction design is about how it works when I touch it (Ironhack, 2019)”.
In the 1980s the term human-computer interaction was introduced and with the advancement of technology this relationship has become even more important for a designer. We can’t any longer just focus on the ergonomic feel of a product, but we must also have an understanding about the colors since color blindness exist. Designing isn’t a linear approach as we consider the different ways a user interacts with a product including colors, hearing, touch and the human memory.
User Interface
In the realm of User Interface, there are many principles, concepts, frameworks and practices of design in effect. User Interface is made up of:
Low fidelity SketchesMid-fidelity WireframesInteraction DesignHuman Interaction DesignDesign PrinciplesUI Design ElementsDesign PatternsUsability Process and FrameworkHigh fidelity WireframesPrototypingTesting
Moodboards
“Mood boards can be a great way to convey your design idea, win pitches, and get an early sign-off (Ironhack, 2018)”. By conveying your ideas with a moodboard you are able to establish a theme for your whole team to follow. Included in the moodboards are:
Color schemes
UI examples of Typography, Iconography, and Layout
Photography
People, places, spaces… anything that helps convey your message
Brand attributes (concept adjectives)
For Turfchamp, we decided to go with colors and images that illustrate soccer as a whole.
“A style Tile provides a bit of more emphasis on individual component details (like typography, font size, and button styles) while still capturing elements of the overall look and feel (Ironhack, 2018)”. Similar to moodboards you have a list of core elements of your visual design. Core elements include:
Typography
Example of Header, Subheader, Body text
Font names, sizes, colors
Examples of Button styles
Color Swatches (with Hex Codes)
Example of Text Link
Any other assets that are relevant to your product
Using style tiles through the whole design process provided us with consistency and saves us a lot of time since we were on the same page.
Final Prototype
The final prototype for TurfChamp will be focusing on one flow instead of multiple. At the beginning of the project, the main goal was to reinforce the idea of creating an application for field reservation and validated the idea with research. In South Florida and in the United States, there is no application similar to TurfChamp and this creates an opportunity for Soccer Maniacs to enter development and eventually publish the application to the public.
Besides users being able to make their field reservations at thousands of field rentals and pay for the field from their smartphones. They are also capable of joining games that are searching for players. Liability was a huge issue with field reservations and that problem will be solved with players having to pay pre-game through the app making players accountable. There will be no more tracking down someone who didn’t pay or keeping a list. Everything will be done automatically within the application.
Below, I have attached a video of how fields are searched and booked. There will also be an additional link that will allow you personally interact with the prototype.
Comments