MLB Station Application: UX/UI, Product Strategy, Design System, Visual Design

In 2008, Earthrise Multimedia was founded with a focus on serving a specific niche within the web development space. Since then, we have been dedicated to steadily evolving our suite of technologies, making the process of creating specialized web services more efficient and user-friendly. In addition, we have actively leveraged advanced technology to develop our own robust Content Management System. Our client base has continued to expand, and as a result, we have begun integrating many of these innovative solutions into the services offered to our existing clients.

• Spearheaded strategic design and user-experience decisions related to core functionality and innovative features

• Pioneered user research initiatives and formulated use cases to validate technology and design decisions for future vision

• Executed the delivery of design, wireframes, user stories, user journeys, and mockups optimized for a wide range of devices and interfaces

• Championed the development of a digital style guide with functional, user interface, and user experience standards to be implemented across all devices

In 2015, our team was commissioned by Earthrise Multimedia to undertake the redesign of STATION, a team sports application, with the aim of improving the user experience and visual aspects for our client. STATION’s primary function was to provide users with access to team statistics, player profiles, latest news, and live game action, facilitating the ability to follow preferred teams and create personalized profiles.

Upon evaluation, it became apparent that the existing STATION app faced several usability challenges. The overall flow of the product was found to be ambiguous, and the user interface suffered from clutter and inconsistency. Users encountered difficulties in navigating the app, and the content failed to effectively cater to primary audiences. Furthermore, the overuse of video, intended as an interactive feature, impacted the efficacy of the ‘Live Score’ function.

Our client’s primary requirement was to strongly emphasize enhancing the app’s discoverability. They highlighted the need for the application to be easily accessible without requiring user registrations or assistance.

As a result, the redesign centered on developing a visually appealing and user-friendly interface, aiming to entice users to explore and interact with the app without needing to go through mandatory sign-up procedures.

1. User Research

Wireframing

The first crucial step in the project involved meticulously crafting a wireframe for the product, a process that entailed breaking down tasks and meticulously mapping out the user flow. Our primary objective was to identify potential areas for process enhancement and optimization.

We encountered a particularly intricate challenge when it came to integrating favorite teams and their associated tasks, requiring us to delicately balance the layout choices in order to accommodate a wide-ranging feature set while preserving a streamlined, user-friendly interface.

During this phase, I drew upon my prior experience with Omnigraffle and Sketch while working on projects for other clients, ultimately opting to employ Sketch and InVision for this specific project due to their robust capabilities that aligned with the project’s requirements.

1. User Research

Wireframing

The first crucial step in the project involved meticulously crafting a wireframe for the product, a process that entailed breaking down tasks and meticulously mapping out the user flow. Our primary objective was to identify potential areas for process enhancement and optimization.

We encountered a particularly intricate challenge when it came to integrating favorite teams and their associated tasks, requiring us to delicately balance the layout choices in order to accommodate a wide-ranging feature set while preserving a streamlined, user-friendly interface.

During this phase, I drew upon my prior experience with Omnigraffle and Sketch while working on projects for other clients, ultimately opting to employ Sketch and InVision for this specific project due to their robust capabilities that aligned with the project’s requirements.

UX and Visual Design

When considering the design aspects related to global control areas, I made a deliberate choice to maintain the dark shading that was present in the previous design. This decision was aimed at providing a sense of continuity while ensuring that the focus remained on the essential control elements. To create a more open and adaptable overall application, I utilized a UI library that offered the necessary flexibility to accommodate potential future iterations of the app.

In order to enhance the user experience, I opted for a white color scheme without incorporating any animations. This approach was taken to facilitate easy locating of controls and to ensure that the user’s content remained prominently visible and legible, regardless of the device’s form factor.

To address readability concerns, I deliberately selected a simpler and more open font. I found that the heavier condensed font posed challenges when displayed at smaller sizes. The decision to minimize ornamental elements and limit the use of colors, aside from indicating buttons with a subtle dusting of color, was made to maintain a clean and uncluttered visual presentation.

During the design process, I prioritized structuring and laying out the interface elements. As a crucial step, I incorporated sample user content to validate that the design functioned seamlessly under real-world usage scenarios, ensuring a holistic approach to UI/UX design.

I created a redesign that embodies a “show-don’t-tell” user experience. I leveraged infographics and interactive elements to reinforce the product’s strengths and offer users key insights, enhanced by user interaction.
 
Upon reflecting on this project in retrospect, I would have handled several aspects differently. For instance, I would have opted for lighter icons to enhance clarity and accelerate user adoption instead of burdening the design with an excess of text and tiny icons. In hindsight, I wish I had maintained the cleanliness of the existing icons. This is a personal view, and I believe it’s important to share our individual perspectives, even when we lack the funding for additional research to validate post-release ideas. It’s these personal insights that can often lead to the most innovative solutions.
 
This project has solidified my belief that Sketch is an ideal tool for power users. It facilitates initial design, wireframing, and final production. The ability to generate precisely sized design elements and seamlessly connect with InVision made the process remarkably efficient.