Product:
HBO now is a video playing service that allows users to watch movies and series on demand. It provides users with instant and unlimited access to HBO's network library of original series, movies, specials, and documentaries. Among other functionalities, the current features include quick hits, featured content, favorites, and video playback.
My Contribution:
Heuristic & usability review, user scenarios, wireframing, competitive analysis, contextual inquiry, an interactive prototype with Axure RP 8, design of experiment, qualitative + quantitative analysis, and an iterated design made with Sketch 3
Duration: 3-4 Weeks
Team Members: Christopher Q. Nguyen, Chelsea Echiverri, Sanchay Mahuwale
Mock of my team's design
HBO Now Mobile Redesign
UX/UI
Background image source: David Caro
Background image source: David Caro
Introduction
Purpose
By adopting a user-centered design approach, my team created a user interface for new functionalities within HBO Now's iOS application. HBO Now's previous features were also assessed and evaluated for further improvements.
Goals
-
Increase efficiency by improving HBO Now's navigation for faster video browsing
-
Provide users with more customization and personalization for greater engagement
-
Improve the visibility of functions to decrease search time
Key Takeaways
-
Users reacted positively towards being able to swipe up to view next or previous episodes. Many users stated that it was efficient and easy to use.
-
Being able to "undo" HBO's recommended content provided users with more control and personalization.
-
When users ran out of content to watch, it was common for them to ask friends or family members for movies/series recommendations.
Design Process
Discovery
Analytics Review
Heuristic Review
Competitive Analysis
Contextual Inquiry
Wireframe
Brainstorming
Sketches
Lo-fi Mockup
Prototype
Brainstorming
Medium-fi Mockup
Axure prototype
Test + Evaluate
Script Development
Cognitive walkthrough
Usability Testing
Qualitative Analysis
Iterate
Identify actionable insights
Hi-fi UI with Sketch 3
Heuristic Review
Heuristic Evaluation
on the current HBO Now app
A heuristic evaluation was used to access the ease of use in HBO Now's current video streaming application. Our evaluation discovered usability violations of efficiency, visibility customization.
Usability "Hotspots"
Majority of usability violations were found on the home page, video player, and watchlist. Identifying usability hotspots allowed my team to apply design principles to the usability test script.
Home Page
Efficiency + Customization + Visibility Violation
HBO Now uses horizontal scrolling in an inefficient way in that one whole tab is dedicated to one category. This is problematic because it makes the vertical scrolling very long and limits the user's options for viewing multiple categories at the same time.
Other issues were that the homepage did not provide
personalized options for the user. For example, HBO Now doesn't offer recommended videos based on users browsing history or recently watched videos. Categories were also not easily visible. More categories were placed where the featured and quick hits were located (boxed in red). Users have to swipe left in order to see more options.
I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.
Lo-Fi Wireframes
Interactive Prototype
Axure RP
Medium-Fidelity Prototype
My team built a functional prototype to test our interactions on users. The re-designed pages were the home page, watchlist, and video player.
Matchdog iOS Design
Advanced Interaction Design
Mockup
Based on the heuristic review and goal based task observations, I created a lo-fidelity mock-up of new/improved functionalities.
Design of Experiment
Experimental Design
Involved an in-person goal based usability test. There was a total of 5 participants who were both novice and frequent users of HBO Now's mobile application. Participants were asked to perform a series of tasks along with answering a set of questions. Each task was chosen on the basis of having the most usability violations. The decision to test these tasks were informed by a mixture of user research methodologies such as a heuristic evaluation meant to discover usability "hot spots", a competitive analysis, and analytics review. The "think aloud technique" was also used to assess the participant's experience with my team's prototype. Participant's screens were recorded for any information that might have been missed during the usability test. Data was then collected and further analyzed.
Usability Criteria
-
Efficiency: Does the site, intelligently anticipate user needs to help them work better, smarter and faster
-
Personalization/Customization: Does the system allow the users to make preferences?
-
Visibility + Clarity: Does the site help users easily see and understand information confidently?
Usability Metrics
-
Success Rate: If a user was able to complete the task in under 15 sec., they were considered to have successfully completed the task.
-
Number of Clicks: Measured efficiency by the number of clicks that it took participants to execute a task.
-
Number of Errors: The number of mistakes made during the task. Errors are defined as clicks deviating from the navigation path of the task that participants were designated to complete.
Results
Evaluation + Improvements
My team analyzing participant results
What we did
-
Analyzed participant results by re-watching user video recordings.
-
Gathered insights and collected quotes to form iterations
-
Engaged in solution-focused thinking to solve specific issues found in the usability test
More
Efficiency
-
While watching content, users were able to simply swipe up to view and navigate to other content.
-
Greater utilization of horizontal scrolling on the homepage.
More
Customization
-
Implemented recommended content based on user behavior/prior use.
-
Users were able to eliminate artificial intelligent recommended content from the home page.
More
Visibility
-
Animated feedback was applied in response to user actions.
-
Appropriate labels and icons were applied to help guide novice users
Prototype Iterations + UI Comparison
TELL YOUR STORY
I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.
After
Re-vamped UI with Sketch 3
Design Process
Discovery
Analytics Review
Heuristic Review
Competitive Analysis
Contextual Inquiry
Week 1
Wireframe
Brainstorming
Sketches
Lo-fi Mockup
Week 1
Prototype
Brainstorming
Medium-fi Mockup
Axure prototype
Week 2
Test + Evaluate
Script Development
Usability Testing
Analysis
Week 2-3
Iterate
Identify actionable insights
Hi-fi UI with Sketch 3
Week 3-4
portfolio
iOS Application Re-Design
UX Design + Research
My Role: Lead Designer and Researcher
Developed experimental design, conducted user research, and built an interactive prototype
Canvas (LMS) Expert Heuristic Evaluation
UX Research
My Role: Lead Researcher, evaluated site through usability principles, created user research and moderated usability test.
eBay UX Internship 2017
The free, all-in-one place to manage and grow your business
Seller Hub UX Evaluation
Design Research
My Role: User Research Intern
Airbnb Competitive Audit
Discovery Research
My Role: Lead Researcher
Matchdog Mobile Design
Advanced Interaction Design
My Role: Lead Designer for mobile. Designed mobile framework, personas, and user interface
CHRISTOPHER Q. NGUYEN's interest in UX is equally rooted in his admiration for art, psychology, and science. Being inspired to succeed as a UX practitioner, he is currently pursuing a Master's degree at San Jose State University in Human Factors Engineering & Ergonomics. Improving his craftsmanship in graduate school Christopher aims to combine both studies of the liberal arts and engineering sciences to create impactful and meaningful technology. One day he hopes that his work can solve ways to provide equal education to everyone, create safer transportation, and develop more sustainable environments.
Furthermore, whether you are an employer, student, designer, a friend, aspiring UXer or just plainly an awesome person please feel free to contact him.
Contact Info
Email: Christopherng92@gmail.com
Phone: 1 + (858) 750-0545
Location: San Jose, CA
ABOUT
