Miami Vice Soccer App
Greetings! I'm Drew
Junior UX Researcher/Designer
Made with

Miami Vice Soccer App

The Beautiful Game in the Magic City

We created a sports app that builds community.

There are countless sports apps on the market today. My team wanted to make one that is unique- so we added a community-building component to the mobile app. 

  • This is a mobile app prototype, not a fully functioning app.
  • We had 2 weeks to come up with the idea and create the prototype. 
  • My role was Lead UX Researcher, on a team of four.

Miami Vice Soccer App

UX Framework

We employed the User Experience framework to help guide us in the creation of the app and to keep the user at the heart of the process. 

Research

Miami Vice Soccer App

Surveying the Land

I created a simple Google forms survey to quickly assess potential interest in the app. In particular, I wanted to gauge possible features that could be included in the app. 

Survey Says...

  • More than 40 people responded to the survey.
  • One major takeaway was that over 80% of respondents wanted to have instant replays from multiple camera angles.  
  • Based on the results, instant replay became a prominent feature in our prototype. 


Miami Vice Soccer App

Desk Research

I led the team in conducting online research. The findings were quite compelling and helped shape the design process. 

"…our impact in the community and on South Florida’s youth will run deep."

David Beckham (Miami Beckham United Ownership Group)

Community-Based

Based on Beckham's quote above and similar ideas from other team owners, I concluded that the ownership is heavily invested in the local South Florida community. Alas, the app design and feature set would reflect the grass-roots nature of the team. 

690%
Increase in MLS followers across all social media platforms in the past 5 years
2nd
Sports Apps were the 2ND fastest growing segment in Mobile Applications in 2017.
3rd
MLS ranked 3rd in average-per-game attendance out of the 5 major sports in North America in 2016-2017.

The Numbers Add Up

As the data points above clearly reveal, there is overwhelming interest in Major League Soccer in the US. When paired with the rapid rise in popularity of mobile sports apps, the data reveals a potentially robust market for our app.  

Miami Vice Soccer App

Best in Class Analysis

Wrapping up the the research phase, I did a deep dive into the app market to see what inspiration I could gather from current apps. Through a Best in Class analysis, I looked at in-category, or other mobile sports apps, as well as out-of-category, or non-sports related apps.

Miami Vice Soccer App

HQ-Inspired

In the out-of-category search, I was enthralled with the HQ app’s use of delightful interaction and gamification. As our own design process unfolded,  I pushed for these elements to be built in to our design. 

Define

Building on the research findings, and continuing with the UX Framework,  we moved forward into the Define phase. At this stage, we essentially designated our target audience, potential features and content structure. 

Miami Vice Soccer App

Personas

I created 3 personas, or kinds of users, that would most likely interact with our mobile app

  •  First, Jessica the Socialite, who is not a huge soccer fan, but loves the vibrancy of her beloved Miami community and wants a sleekly designed app that will let her explore local businesses and volunteer with non-profit organizations.
  • Secondly, Frank the Youth League Soccer Coach, who is ecstatic about the proposed youth soccer academy that will be a part of the stadium. He definitely plans on using the app to promote his young players’ talent and connect them to opportunities offered by the academy.
  • Last but not least, Ricardo, the Die Hard Soccer Fan, who absolutely adores the beautiful game and can’t wait to see it live in his own city! He is eager to use the app to stay up to date on team stats, get live match info, contribute fan commentary and watch instant replays.

User Journey Ideation Session

I co-led a User Journey Ideation Session based on Hyper Island methodology - a practice for generating ideas. The goal was to collaborate with potential users in order to ideate on features that could enhance the user’s overall app experience.

We were privileged to have a diverse group of participants that included soccer fans, digital marketing executives, young professionals, software developers, fellow UX/UI design students & staff, and local community mentors and activists.

Miami Vice Soccer App

Design Pillars

After receiving and reviewing some amazing feature ideas, it was time to define the design. We based the design on three main pillars:

  • Engagement. We wanted users to habitually interact with the app by providing exclusive in-app content and up-to-date staple soccer info.
  • Community. We wanted users to feel connected to each other and to the team, as well as spotlight the youth soccer academy and showcase local non-profits and businesses.
  • Modern UI (user interfaces). Lastly, we wanted the app to be visually appealing, intuitive, purposeful and contain sleek design elements.

These pillars together formed the User Experience Strategy for the Miami Vice mobile app. The UX Strategy guided the information architecture and prioritization of the core features users would experience.

Design

Miami Vice Soccer App

Sketches

The design process starts with low fidelity sketches. This is an effective way to iterate through many design options quickly.

  • Each group member sketched on paper and presented to the group. 
  •  This type of brainstorming brought diverse ideas to the table.
  • We combined different elements and ideas from each others sketches before moving on to the next stage of design.

Miami Vice Soccer App

Wireframes

Working in Sketch, we created digital black and white wireframes for testing.

  • This was useful because it allowed us to test our ideas on users before advancing to final designs.
  • We created low, mid and high fidelity Sketches. 

User Testing

In the spirit of keeping users at the center of design, we tested our initial mock-ups with users at a community gathering, which you can see in the video playing above.

Tasks

  • I asked the user to look at the menu categories and assess if they were clear in leading them to related content.
  • Many users were not sure what they would find if they clicked on the Community category.
  • Our team reconvened and had a mini ideation session. Then we went back into the Sketch program to change the Community tab to Local Spotlight before testing again.
  • The user feedback radically changed. Users were able to fully understand what the category content would be and we felt proud that the Community pillar of our UX Strategy was met.


Miami Vice Soccer App

The power of rapid iteration in the UX process is truly remarkable in that it allows the design team to meet goals in the quickest way possible.

In Conclusion

As a life-long soccer player and fan, it was extremely satisfying to work on the Miami Vice Soccer app. Having something that you are personally interested in helps build enthusiasm in the project.  

As a group, we started off very strongly and were able to quickly make decisions and create collaboratively.  However, as we progressed, tensions began to mount over specific responsibilities. 

Fortunately, we were able to overcome the tension through direct dialogue. In the end, I realized that my definition of collaboration was different than one of my teammates. In order to move the project along, we needed to compromise and play to each others strengths.

Miami Vice Soccer App

*presenting the Miami Vice Soccer mobile app prototype in Miami, June 2018, at Wyncode Pitch Night.