Description
Review Hudl.com's library screen and provide a written assessment and solution proposal including any deliverables of my choosing.
Project scope is relatively undefined and insight brief was not prepared. The primary purpose of this project is to portray my design process,
approach, and capabilities for consideration for an employment opportunity. It is understood that the length
and insight required to develop a real solution is not fundamental to the expected outcome of the project. Therefore, the project is to be
reviewed under the stipulations that it shows competency in the general field of User Interface Design and User Experience Design, while invariably
lacking in other more specific subject matter expertise which would be acquired while working for Hudl on a long-term basis.
For reference, refer to the project brief provided by Hudl on February 24th.
Timeline
While the timeline was left open to accomodate my schedule, I made it a point to work on this in a fashion that would most closely resemble the
expected turnaround time for these deliverables in a real working scenario. Given access to an internal network, knowledge of the product, and a
working system and method based on experience with the employer, I estimate that this project could be turned around 50% faster. I made it
a point to show an evolution of thought from sketches, to wireframes, to comps, in order to provide
an accurate assessment of my skillset. For most projects, time spent on these steps would be skipped.
Process and Time Spent
Total time spent was 18.5 hours. This is a fairly rough estimate based on me looking at my clock after I was done and trying to remember exactly when I started.
Time is broken out between the stages in the tables below.
Study the Product
| Time Spent |
Around 1 hour |
| Tasks |
Clicked on everything I could, visited most pages in the I.A. Made note of bugs and quirky things. |
Examine Library Screen
| Time Spent |
1-2 Hours |
| Tasks |
- Used all features
- Took screenshots
- Wrote up bug report
- Analyzed strengths and weaknesses of interface design.
|
Sketching
| Time Spent |
2 Hours |
| Tasks |
- Imported screenshots onto iPad with Dropbox.
- Imported from iPad photos into Adobe Ideas as a photo layer.
- Traced basic structure with stylus. Hide photo layer and play around with different concepts.
|
Wireframing
| Time Spent |
6 Hours |
| Tasks |
Continue to flesh out sketches in Adobe Illustrator and annotate with specs. |
Comps
| Time Spent |
2.5 Hours |
| Tasks |
Screengrab and organize in Adobe Photoshop |
Documentation
| Time Spent |
5 Hours |
| Tasks |
Create web pages and styles to submit proposal |
A Very Thoughtful and Specific Application
Hudl's Library page has some really great features that I can tell set it apart — telestration tools, data reporting and presentations.
Thse features cater to Hudl's niche market and make this product more than a simple video watching software.
The Library page makes use of helpful tooltips and access to tutorials for novice users. This is important, given that the goal should be to
graduate novice users into expert users who have a long lasting relationship and loyalty to Hudl.
Furthermore, care is taken so that most interactions happen within the context of the library screen through modal or transient layers. This reduces the
burden of page refreshes on the user, preserving the statefulness of the app, and mimicking a more native desktop like system.
Lots of Room for Improvement
Overall, this page is really struggling. There is a lot of room for improvement, but it will require an evolution to move it forward to it's
next stage.
Information Architecture
The I.A. and taxonomy may be difficult for novice users to understand. For instance, what is the difference between Dashboard, Library and
Manage? What is the difference between library and Manage > Library? The taxonomy is too vague. In fact, although it seems silly, a label such as
"This is where you watch your video" would be more specific and
preferred to the current labeling. Even changing the label "Library" to something like
"Film Room", or "My Video and Reports" should see great improvement for novice users.
Hudl's site taxonomy could be too general for novice users.
Efficient Use of Space
Most of all, the primary struggle with the library page is its inefficient use of space during the course of a user's interactions.
The interface fails to acknowledge the movement of the user through specific tasks, preserving spaces that remain "dead" for all intent and purposes,
until the user switches tasks. The mark of a truly great interface is one that devotes the maximum amount of screen real estate
to the primary task of the user at any given time. Instead, Hudl's Library screen forces users to adapt to "hot zones" during use, remaining either
hot or cold depending
on the task. Furthermore, there is no margin between these zones, nor between zones and the browser window, making for areas that are hard to
distinguish from one another. In addition, multiple scroll bars are used at once in order to manage these zones.
The preservation of these zones creates an odd backwards triangle pattern of motion through the interface. This is not a natural and scannable
flow for the user. Studies show a strong left-side bias on the web with the tendency to scan and scroll down for further detail.
The movement of the user through the interface in order of task sequence (presumed)
In addition to this odd scannability, controls are found in unconventional areas of the interface. Pagination is at top
left for instance, while helpful functions like "Edit View" have a tenuous cause and effect relationship with the data table below. In order to keep
thse functions within the viewport, they've become too small,
unnoticeable and oddly placed, even to the extent that they must overlay the primary function of the site — watching video.
Dead spaces in the app during phases of use.
Common Patterns and Metaphors Ignored
In addition to the inefficiency, the interface fails to capitalize on common patterns. The spreadsheet of data is a layer of abstraction in between
the user and their video. A more direct relationship with the video objects is preferred.
The patterns used here have have outlived their era. Common patterns for video interfaces, such as sites like Hulu and YouTube, should be utilized.
Popular video portals are using consistent patterns for displaying and filtering video objects.
Features
Although impressive, the telestration tools are somewhat difficult to use. Some are draggable, such as Spot Shadow. Some are not, like the Arrow
and Blocking tools. There is no erase tool for freeform scribbles. I found myself trying to drag the arrows I drew to a different place only to leave
new marks on the video where I did not intend.
Whoops! Trying to drag an arrow only resulted in another arrow being drawn with no way to step back once.
Context
In addition, several controls with different behaviors are too close in proximity to one another. There are no obvious clues that some controls are spring-loaded (Slow Forward and Reverse),
some are modal (Share, Presentations), some are transient (Reports), and some are hyperlinks (removing the user from context and
transporting them to another page, such as Manage). The predictability of features is one of the keys to providing a discoverable interface for users.
A good example of this are apps for iOS. Most functions and features in these apps preserve the statefulness of the app. Common use of interface elements such as popovers assure the user that uncomfortable page refreshes will not be experienced. The net result is a
user who is more willing to explore features and graduate from a novice level to an expert. Hudl's interface could improve in this matter. I can see some users in the current interface
deciding to stick with basic features rather than exploring the unknown for fear of experiencing the undesired result and disorienting removal from context.
Controls with different behaviors in too close of proximity.
Interruption
Although thoughtful, an abundance of tool tips and layers means frequent and expert users must suffer through triggering help features from accidental mouse movements.
These may be better located in a settings panel where an expert user can switch them off.
Helpful features for novice users get in the way of expert users.
Text
A heavy reliance on Verdana at small pixel sizes is hurting and crowding the interface. More miles can be covered with Arial, which at larger
pixel heights can still have shorter line lengths due to its more condensed nature. This could even mean an extra column worth of data can be
presented without scrolling.
A quick tour in Firebug makes this interface instantly more readable. Changed from Verdana to Arial.
Modality
The interface relies too heavily on the mouse and is not effectively keyboard optimized. There are too many scrolling areas and
mouse movements required for even the most basic features. This poses an ergonomic problem especially for older coaches, as well as minimizing the
user's ability to achieve a state of "flow" (Csikszentmihalyi) where the interface matches their ability without overwhelming them.
Trying to navigate the Edit Data tools by keyboard was frustrating.
Datapoints
Read more here in my list of datapoints.
Getting Started
My first step in the sketching process was just to create some basic templates. I decided to use Adobe Ideas on iPad. This way I could take screenshots
from my PC, upload them to Dropbox, download
using the Dropbox app for iPad, and import them into Adobe ideas as a Photo layer that I could sketch over. Adobe Ideas allows you to create duplicates of
your sketches. I used this to create a template sketch first, that included the features of Hudl I didn't change, like the navigation bar at the top. From there,
I could duplicate the template and start sketching out various ideas that came to mind on how to approach the problems I discovered when using the app.
Exploring Ideas
What I wanted to do was sketch out ideas on how to create better sequencing in the app for users and allow the real estate of the app to adapt to
the natural flow of a users task. I also wanted to play around with leveraging common conventions for video portals and for video controls that users would
find natural and familiar.
I had some general ideas about what users would discover when first arriving on the library page, but I needed to work backwards from the inevitable
playback state in order to make sure my ideas for initial state of the page would work. So my sketches concentrated on the design of the video tools
after having picked a game to watch.
Desktop Style Controller at Top with Video Portal Pattern Below
This sketch was inspired by iTunes, Windows Media, and popular video playback software. The bottom portion uses a set of thumbnails
for the intial load of the page, and an AJAX style loader for new video to replace pagination.
iPod Style Controller at Right with Tool Carousel
This sketch was inspired by portable media players. These have obvious built in physical affordances that can be harnessed
for rapid recognition. The carousel allows the telestration feature to scale easily as new tools are added.
Collapsable Game Picker
This sketch was me reconsidering if there was a way I could just make the current layout more effective. Here, a collapsable
area holds the game list and slides right when a game is chosen to reveal the playback and telestration tools.
Scope
As is written in the design review, my assessment was that there were some very foundational things that needed attention here. I would
not expect most projects to take on the scope I've outlined here, but the way I've approached the project is intended to show that I understand the foundational issues
involved. However, any of the datapoints or items mentioned in the review of the current library screen could be addressed individually for small scope optimization
— for instance, font size optimization, telestration tools, or keyboard accessibility could all be chunked up as small projects.
Process
I will often bypass either the comp stage or the wireframe stage depending on the project. This one was big enough with hundreds of function points that I wanted to
play around with it in Illustrator first where I could freely move and scale the vector objects while working on multiple screens at once.
Key Areas of Focus
The key focus was to reorganize the layout for better interactive momentum, reducing the
amount of moving around the dead spaces that users are required to do. I wanted to make the tool seem like a hybrid between what a desktop app and a web page offers. A
best of both worlds if you will. This focus meant that some objects, like the video player, are invisible to the user until they choose to watch video.
I had a hard time with the blank video area just sitting there doing nothing before a video is chosen from the list. I also found it concerning that a user must
mouse right, then down, then back up again in a backward triangle formation to use this screen. I wanted a more straight up and down layout. Something a user
could just use the scroll wheel on their mouse to navigate.
Start Up
You'll notice in the wires, that the page starts with a thumbnail view of videos.
Not only does this better show what the videos actually are, it can even mean the difference for a coach or an assistant who doesn't really need to watch much of the video,
but is rather the one tasked with filling out the data. I understood watching the video, telestration and sharing with your team as discreet tasks potentially separate from the
task of tagging the video and adding data and filters. The thumbnail views, and the quick scrub feature as shown, allow someone like an assistant to quickly go through and just
tag the basic data like ODK without even watching video. If a user can see from the thumbnail what the formation is, whether it's offense or defense, or who the opposing team is, they can
fill those things out rapidly.
Watching and Editing Video
This is really the fantastic part of Hudl. I didn't do much here but just reorganized the placement of things and some visual treatment suggestions. I don't have any feature
introductions here, except for the last 5 and next 5 clips controls. Although, there are currently previous and next controls, I wondered if it wouldn't be better as "last" and "next". It
might be challenging to keep track of what play was previous or next from a filtered view, but it's easier for users to remember "that last one I watched".
Good God, just show us the damn wires already!
Okay, you can find them here. Ironically, there's a bit of scrolling required.
