Challenges

• Lack of product context. Design limited to small section of whole product.
• Limited UX resources. I assumed the roles of researcher, strategist and visual designer for this project.
• Lack of vertical screen space.
• Limited custom design and color choices in order to consider Material-UI framework: https://material-ui.com
• Limited beginning contextual knowledge (I’m not a soccer fan :shrug:)

My role

I was the lead UI designer for the MVP design, and had originally worked with a UX Strategist who provided the original wireframes. The strategist had defined the amount of vertical screen space that I was to work with, and defined initial control patterns that would work with his discovery to enhance the original score center space, including the original timeline and play-by-play.

I began with researching some competitor solutions in order to see what is possible, and also to confirm what might be competitive and innovative. I found that, although most competitors employed the use of a traditional timeline to supplement a play-by-play list, the most successful competitors removed the timeline for spacial consideration in the mobile view. Competitors also remove pitch graphics as well, or do not employ the use of animations on mobile.
‍
Next, I employed a rough sketch in lieu of digital wireframe in order to plan out strategy and components that made the most sense to use:

• To address spacial considerations, and to allow a micro-interaction to test the need for the pitch animation section, I decided to make the pitch a collapsible component.
• I replaced the larger toggle buttons with a switch component to increase real estate for Play-by-Play. A toggle to “Focused” allows the user to focus on major events.
• A re-design of the Play-by-Play list to a two-column solution made events more accessible, and more useable to how fans might need to digest the events in real-time.

Upon visual/UI execution, I considered interaction states, icons, and new component styles in Sketch. I used a new style for the button to show and hide the pitch, advocating for a more custom look in order to call more attention to this new pattern. I consulted with a UX Strategist colleague to confirm the viability of the layout that I used.

‍

‍

Retrospective

In the process of initially creating the MVP version of this screen, it had become clear that visual design had not been included early enough during the strategy phase. We tried remedying this in this enhancement phase. As we enhanced this feature, however, the need for further enhancements presented itself throughout the rest of the product, which resulted in some scope creep in the design process which bled into development time. From this experience, I learned that advocating for a full UX/UI assessment of a product in the enhancement phase might be more productive and efficient, instead of small sectional enhancements.