By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
An essential video player for an iOS app. Engage users with fitness-specific features.
iOS
Feature
Scenario
The fitness iOS app offers users a variety of workout routines and fitness programs in written form. To enhance the user experience and engagement, the app needs to include a video player feature that will allow users to follow along with workout videos. The videos should be accessible both online and offline. The video player should be intuitive, responsive, and provide users with controls and features that enhance their workout experience.
Metrics to improve
DAU and WAU (Daily and Weekly Active Users): New video experience should encourage users to work out more regularly and come back to the app for each training.
Engagement: Provide users with more a more interactive experience that will encourage them to use the app throughout their whole workout.
UX Objectives
Integrated experience: The video player should co-exists with the written workout plan so users can both follow the video and see the workout overview at the same time.
Essential video player: Include the essential features needed for a video player in fitness context. Find the right balance between simplicity and meeting expectations.
Accessibility: Ensure the video player is accessible to all users, including those with disabilities, by supporting features like closed captions.
Offline Functionality: Allow users to download videos for offline use, ensuring workouts are accessible without an internet connection.
Tasks / Scope
Desk research
Research the most popular applications that provide video players to establish the baseline for included features. Go outside of fitness industry (YouTube, Vimeo, Netflix, etc.)
Research other fitness apps that provide video workouts. Compare UX solutions and create a comparison table.
Read comments, reviews, and feature requests for those apps in the App Store to find out what users love about the and what’s are missing.
User research
Talk to 5 users of fitness apps or people who used video content for their workouts. You can source them online or from your friends and family. Find out what their flow is, how they use video for workouts, what they like about the products they use, and what could be improved.
Prepare a research scenario to help you perform the interviews.
Sum up your results and create a summary of key findings.
Prepare problem statements and user stories based on your research results.
Low-fidelity exploration
Create low-fidelity designs to explore different ways of approaching the problem. Choose 2 leading ideas and use digital tools, like Figma or Excalidraw, to finalize those sketches.
(Optional) Get feedback from other Designers or people you interviewed to choose the better solution to move forward with.
High-fidelity design
Create pixel perfect high-fidelity mockups for your chosen idea.
Create a clickable prototype that you’ll use for usability testing. Proposed (minimal) flow: Selecting a workout, opening the workout page, viewing the video, viewing the written workout plan, experiencing additional features, complete the workout.
Usability testing
Test your prototype with 5-6 people. You can meet them in person or use video conferencing to perform this research.
Prepare a usability testing plan. You can use this template.
Take notes from your interviews, and identify key areas to improve.
Summarize your usability testing in a 1-2 page long document.
Make corrections to your design based on research findings.
Measuring success
Examine how you would measure the success of this project. What metrics would you track to ensure that your designs perform well.
Acceptance criteria
Platform compatibility: iOS
Industry standard video player: The video player must support playback of all standard video formats used by the app and provide basic controls (play, pause, rewind, fast-forward, volume).
Offline Playback: Users must be able to download videos and play them without an internet connection.
Accessibility: The video player should be responsive to touch with controls easily accessible on all screen sizes (correct element size for touch).
Experience: Video player co-exists with the written workout plan so users can both follow the video and see the workout overview at the same time. Consider how written workout plan would be accessible both in regular and full screen video view.
Visual design: If you’re designing a video player for an existing app align with its design system. If not, create a visual language unique for this application.
Nice-to-have
You can go outside of the brief and think about workout-specific features that can be useful. Confirm your choices with the research and move forward with ideas that you could validate. Here are some examples to get you started:
Interactive Features: Implement interactive elements like workout annotations or the ability to mark completed exercises within the video player.
Audio Controls: Provide options to adjust the audio balance between the trainer's voice and background music.
Community Integration: Allow users to share workout progress or favorite videos within a community feed or social media.
Personalized Recommendations: Suggest related videos or workout plans based on the user's viewing history.
Multi-language Support: Offer language options for closed captions and audio.
Celebration: Emphasize the moment of finishing the workout with visuals, sound, or interaction.
Portfolio presentation tips
Compare industry standard video players with your design. Point out similarities and differences. Explain why you’ve made certain design decisions.
List key areas that users love about current apps they use and what they would like to change, together with how you’ve responded to those needs in your design.
Show the ‘before & after’ from usability testing. Show initial design, and next to it present the improved designs. Point out difference with annotations.
