PART I LIVE-SCOREBOARD DESIGN
Objective
Here's an example of upgrade work; primarily the web-client moving from Flash to HTML5 and an opportunity to bridge the legacy design towards an upcoming platform rebrand later in the same year.
Overview
Full-Scoreboard HTML5 application from Sketch to FED code. This rather complex project had some unique constraints to build into planning. Partial data was known to be made available from the data-feed at the beginning of the project which made the MVP hard to accomplish at phases of development.

Work was done in parallel with the development team sprint but meant constant alignment checks were needed to ensure that code-cuts match UI and FED functionality.
Content was devised into Primary, Secondary and Tertiary ranking; loosely coupled with the order in which development were able to expose the data to be styled.
There was also pair-development in the context of improving speed, performance and less processing resource. Some SASS Mixins previously authored to handle conditional output was transferred to AngularJS to reduce CSS overheads and improve visual maintenance of the underlying code.

CSS talking to Front-end
It was important to have the presentation independent from the front-end code. So that future changes can be implemented without the need to re-architect the code structure.
The below final designs were only successful due to the ability to phase release features from the UX solution given the unknown availability of data from the third-party feed.
        
        variable == condition ( expose class : css property )
        }
First phased release design for LIVE Football scoreboard
First phased release design for LIVE Baseball scoreboard
First phased release design for LIVE Basketball scoreboard
Prototype of Portrait Orientation using InvisionApp
Positioning required data
After defining the data envisaged to be available at release, designing familiarity in layouts required a combination of understanding recognition patterns and content priority. The below wireframe mimicked elements of a real tennis scoreboards.
Balsamiq wireframe of Tennis Scoreboard containing the data displayed in the screenshot of the public-facing scoreboard
The above is one of many series of wireframe iterations used to communicate content and for the stakeholders to collaborate business objectives.
Desktop Expanded-view scoreboard
Desktop Scroll-mode scoreboard
Evolving Theme
Design progressively evolves around mitigating between the UX founded principles and the needs of business, that all ultimately serves their customers. The MVP concluded the final design to use the Brand-ID colour palette and for the mobile version to be released in phase 2. The above sample were earlier iterations going with the idea that its independent identity or profile as a Live feed precludes it from standard content.
Mitigating Prototype Code Risk
The handover of the hi-fidelity prototype, to Development Team, included the defined HTML5 markup and CSS3/SASS presentation layer which was built external of the production app but part of the same environment build.
This meant that during the prototype development, the code was within the scope of the same data used as the pre-production environment. This saves on any technical debt and alleviates code optimisation (as far as the framework markup), at the development stage. Reducing the code testing from the reuse of the HTML templates with more focus on the construct of the functional spec.
This was achieved by establishing a close relationship with the Front-end team; integrating with their Agile Practice and contributing to the SCRUM planning for the UI phase of the prototype development. The UX Research and ideation stages are afforded an independent process with the elected methodology adopting the UX Lean Approach and where appropriate a Kanban daily release.
        {
         ( Research : UX Scope )
         [ PERSONA/ANALYSIS/MAP/PROTOTYPE ]
          _______________
           Technical Biases3 
        }  - {  
          ( Delivery == Time )
          _______________
           UX Scope >= Sprint3
           [ IDEATION/REVIEW/TEST/ITERATE ]
        }
Reusing Findings
Technical ability influences the velocity in which a UX strategy progresses, invariably the steps required are the same and only differ in proportion (Legacy apps vs Innovation). Proceeding projects have the affordance of the previous Research findings and as that data matures; patterns emerge that allow for predictive models to form.
Consequently, future ideations have lesser risks and innovations are built from solid foundation enabling personalisation (relevancy, timeliness and search-ability), to lift the overall product experience.
Notations of viewport cut-off points for components
Results
One of the exciting things to literally come from the UX stage is the conversion to reality. What makes a great design is the thought process prior; invariably that may be delivered in stages or even transform during development but its incubated from a well founded basis. The conversion is essentially upgrading the prototype to its highest fidelity - the balance of usability and modularity.
We're defining the code to be transparent and reusable (DRY). Configuring the views for each targeted device, while ensuring what presentation components remain familiar or purposed for that particular viewport dimension.
The experience is continually tested during code review and monitors implemented to track post-release interaction. In fact, testing never really ceases; continual design iterations evolve the system and may play several roles in personalising experiences or indeed innovate new ideas.
DISCLAIMER: Please note that this particular story is intentionally descriptive on the process while vague on the research artefacts and methodologies. While I feel the steps are typical of a solution delivery method, the aspects of its how are protected by NDA.
Need a lift?