DESIGN CHALLENGE

Project Definition

What are we doing?

Improve organizing, filtering, sorting and managing video

Why we’re doing it?

Managing videos & finding a specific video is difficult

What does success looks like?

Improve management of large videos libraries, video search & separate videos into teams

Competitive Analysis

What ideas can I gain from studying products with similarly large libraries to navigate? Click each logo to explore.

Key takeaways

  • Search icon top right with dedicated search page
  • Exposed & tabbed filters
  • Recent Searches & Suggestions

Sketches

Whilst reviewing the competitive analysis', I drew some quick sketches of an initial flow as a place to start for the wireframes.

The All Videos dropdown arrow is fairly subtle and limiting, so I opted for a search icon with a dedicated search page to make filter easy & obvious.

The text link to "Go Elite" took up prominant positioning & would be overlooked as it was just another text label. Instead I have moved it in line with the videos & highlighted it in orange to grab the users eye with the intention to increase conversions. This left the top left free for a select option for bulk editing, which felt right as the check box for each video is also on the left.

Recent results & suggestions were the ideal way to help the user quickly get to what they're after.

Sitemap

Similar to sketching the flow, creating the sitemap helped create a framework & is a good place to store and document ideas.

While creating the wireframes & designs I used the sitemap as a checklist to make sure I'm ticking off all the required features.

Wireframes

The wireframing stage helped flesh out the sketches and at this stage I included the 1st version of the tabbed filter & placed the calendar filter in the search bar.

I introduced the idea of quickly sorting through your videos using swipe gestures to Archive & Delete vidoes to help the user process the large amount of videos they may have acquired.

Also at this stage I brought the calendar, to drill down to a specific date, & teams but was in 2 mind whether to include a sub-category (eg divisions) to further filter down the results.


Design Notes

After a few iterations, I ended up exposing the tabbed filters to quickly jump between All, Mine, Archived & Date, as keeping them on the search page, became confusing and didn't give the user the simple experience I always aim for.

I added labels & cleaned up the select/bulk edit actions to keep consistancy.

I was always cautious to not make changes that would impact the rest of the app, as a redesign was out of scope and would affect the consistancy & users experience.

Prototype

Search Scenario 1 – Filter by Date

  • Use the Date filter to see who I recorded on the October 2nd?

Search Scenario 2 – Edit Video Details

  1. Search for Brody Maclean’s Slidinghint: you recently searched for it
  2. Edit the video from Oct 13, 2015 & add San Francisco Giants as the team in the video.
  3. Don’t forget to Save!

Search Scenario 3 – Favourite Albert's Video

  1. Search for Albert Nelson's Hitting videos – hint: type in “Albert” & see if theres a Suggestion to make searching faster.
  2. Favourite the video recorded at 9:49am on October 19.

Other

  1. Head to Videos > All
  2. Swipe right on the 2nd video to archive.
  3. Swipe left on the 3rd video to delete it.
  4. Tap the select icon in the top right to bulk edit.

Go to Brody.com/hudl in Safari on your iPhone (preferably an iPhone 6) to experience the prototype on your phone.

User Feedback

"Logical navigations were very easy to use to help me discover Hudl Technique. I tried the current app & think the prototype had an improved user experience."

Aaron – Senior Finance Analyst, Yahoo!7

"It was simpler to search for a certain person or technique with the prototype. Having 'tag' changed to 'technique' does make it clearer what that feature is for."

Kayne – Personal Trainer, Fitness First


Kayne also mentioned having swipe gestures, before he knew I introduced them to help delete/archive videos, so I am confident this is the right direction to go.

"Being able to tap, edit and favourite within a Search is great. The search is simple and intuitive to use."

Katie – Senior Designer, Digilante


Future Considerations

  • Date Range instead of Specific Date?
  • Local date formats – dd/mm/yyyy
  • Move from Helvetica to San Francisco
  • Increase touch gestures (concept below)
    • Swipe left for archive & delete
    • Swipe right for edit, favourite & share
    • Full swipe right to favourite
    • Tap to Play
    • Too complex? Where do Comments go?
  • Team & division to further refine search? (could be a pain if players often change divisions/teams)
  • Use search label as search field and have search occur in the same pane