Stream

A web app for distributing and curating clips for video analysis.

Sportstec approached Tropixel wanting to improve the visual look of ‘Stream’, a platform for distributing Sportstec video content and data online. We quickly identified multiple flaws in their user flow and information architecture which lead to a complete redesign of how they distributed and curated video content online.

Responsibilities

• Wireframing
• Usability Testing
• Mockups of Rendered Design
• HTML Structure
• CSS
•  jQuery Development
• Post Development iPad Optimization
• Project Management

Prototyping

With Tiago Schardong (my fellow designer at Tropixel) we began by defining the heierarchy of the information Sportstec wanted to deliver to their customers. This was then followed by rounds of paper prototyping that we tested on people external to the project. We iteratively ironed out kinks that prevented users from completeing the core tasks of the app.

We used this project to also test out a method of using Illustrator with a two screen setup that required a Tester, Facilitator and Operator. It was based on the same techniques pioneered by the Nielsen Norman Group for testing prototypes. By using a two screen setup, the Operator was able to quickly modify and respond to user interactions. We discovered this technique greatly decreased the amount of time to test users, adapt to unforseen interactions and record interactions with a screen capture. We also had the added bonus of keeping the assets built in Illustrator for later use in wireframes.

We could then use the screen captures to begin a dialogue with the stakeholders and developers sooner and with more clarity of how we anticipate a user moves through their software at a wireframe level. This meant by the time we were rendering mockups, we had a lot less requests for changes to the interface.

The Beginning of the Post-PC Era

Development was wrapping up about the same time the 3rd generation iPad was launched. Usage of tablets, iPads in particular, were quickly becoming an established device for browsing the web. The trend was hard to ignore so Sportstec called on us to revisit the project before launch to adapt the design, not only for a smaller screen, but also fatter pointer – human fingers.

It was quite challenging as we wanted to have as minimal of an impact as possible on the structure of the HTML. Most of the changes made were purely CSS and jQuery to minimize the impact on development and testing right before launch.

Orientation was another huge factor I was able to solve quite easily with media queries and offscreen design patterns that not only made better use of the space afforded by a smaller tablet screen, but it made the experience much more focused for the end user when some of the clutter was reduced.