Soccer Network

Research
Visual Identity
Information Architecture
UI Design System

Branding Research

As I wore my brand strategist hat while working on this project my aim was to research and be able to articulate the 'spirit' of soccer as a sport, as well as the intentions of the app as a service.

Understanding the Roots of the Sport

The Federation Internationale de Football Association (FIFA) points the origins of the sport back to China 2000 years ago. While there is some validity to that, I'm not sure they were the only, or first ones who figured it out.

In ancient Mesoamerica (1650 BC), there was a version of hitting a ball with hips and feet. I have a hunch that many cultures have played a version of the sport that rules out the use of hands.

You may have seen the Mesoamerican version of the sport in the animated film The Road to El Dorado. Hanz Zimmer composed the soundtrack, btw. That guy's music is in every good movie, I swear.

Drawing Parallels Between Soccer and MesoAmerican Rituals

The reason the Mesoamericans had for the game had to do with religious purposes. They made a ritual of the sport and it united the entire people group. It may have been full of superstition and somewhat barbaric but hey, it worked to unite an entire people group.

As part of their religion, their pyramids allowed them closer access to their deities. An extremely important and, in my opinion an immensely powerful symbol.

Branding Visuals

Once I felt like I had enough of a grasp on the essence of where the brand was heading, we began to give words and visuals to the mushy parts in the form of mood boards, color choices and typography.

Moodboarding

In this mood boarding phase, I saw the pentagon was a common shape, but was not satisfied as it did not have the harmony I was searching for.

The direction for a vibrant green was a straightforward choice, as it provides a feeling that is full of energy and growth.

Reducing Down to Basic Elements

Pentagons felt like an inappropriate choice for something I felt required more symmetry. Playing with tessellation magnets with my kids and nephews helped me play with shape that felt more correct.

::Trapezoid and Hexagon have entered the chat::

Typography

In a desire to be bold and clear, I opted for a sans serif with a heavy weight. This choice could easily cut through the visual noise in any situation it found itself in. Similar to the way a referees whistle can cut through crowds shouting and the sound of an atheletes labored breathing.

Each typeface is in the grotesque family thanks to their geometry. Each has a playful, friendly shape and rhythm, making Sporting Grotesque and Basic Sans a great pair.

Color Palette

A basic color range of whites, greens and blacks allowed enough flexibility for logo variations while still providing sufficient contrast.

Playful Sketches

Reminiscent of a coach jotting down a play on a dry erase clipboard, my design partner created sketch elements to help draw visual interest throughout marketing and would eventually be used as a background element in our cards within the app.

Information Architecture

Extracting, Discerning and Documenting how someone is intending to structure something is always a challenge without a shared language. My skills were flexed here when I was able to take what felt like ramblings and established a clear hierarchy of information and user flows that were easily actionable.

Understanding the Structure

Establishing Architecture

UI Design System

As the development team were most familiar with Google's Material Design System MUI, we sought to customize the MUI system to work with our brand colors.

Material Color Theme

Once we realized the full breadth of the M2 design system was going to be overkill, we quickly pivoted and opted to just import a .json file after the developers were done, this export would have only the theming necessary and ended up saving the entire team time and effort. Would this create a development or design debt? Likely, but going from 0 to 1, tech debt is inevitable. I prefer my designs be incomplete and compelling and perfect and never see the light of day.

Custom Iconography

Requiring icons that allowed us to continue expressing the visual identity made for a fun path to go exploring and design a filled/outlined set of icons.

Map Styling

As our map styling was going to be addressed by development, I sought it best to share recommendations via MapBox Studio. The basemap would be a dark variation of the monochrome template style with a prominent hierarchy of Parks, Schools, and Sports fields over other Points of Interest, and a smart usage of Public Service Locations as landmarks for someone unfamiliar with the area.

What Would I Do Differently?

While our designs did move quickly, I would have created the game plan of key screens more closely with developers. Their insight combined with other stakeholders could have helped us save time adjusting the theming of the M2 Design System. Thankfully our partnership with the Founder/Main Developer was strong and we caught this potential time sink before it ended up taking more of our time. Our approach shifted to having the developers use the unstyled system to get start developing, working out any bugs, and while that was happening we would import a .json file with design styles that were mapped to their existing framework. Basically, we decided to build and establish the user experience first then adjust the interface visuals secondarily.

Everyone would agree that building partnerships within your team is important, but I've learned that interdepartmental collaboration can provide even more momentum that comes from different perspectives.