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.
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.
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.
- 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.
I led the team in conducting online research. The findings were quite compelling and helped shape the design process.
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.
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.
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.
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.
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.
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.
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.
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.
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 TestingIn 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.
- 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.
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.
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.
*presenting the Miami Vice Soccer mobile app prototype in Miami, June 2018, at Wyncode Pitch Night.