Duotone Academy App — A UX Case Study
As part of the Rapid Prototyping module at Hyper Island we were asked to choose an existing app, review the user journey and identify points of friction to improve. A keen kitesurfer myself, I chose to focus on Duotone Academy App.
Duotone Academy is a free app for kitesurf progression. It provides high-quality content of over 150 lessons, featuring all the core techniques and tricks for beginners to experts.
From my own experience of the app, I saw an opportunity to make the user journey to access lessons in training more efficient.
The goal
The goal was to test my initial assumptions through scenario based usability testing. Then, from the insights gained, create a high fidelity mockup with my recommendations. In this case, a fast, intuitive and customized way to select, train and complete lessons.
I followed the Double Diamond framework to structure my design process. This was an individual project and therefore my role covered all stages of the project. I will take you through my journey and learnings below.
Creating a storyboard
To understand the problem space, I started by creating a storyboard to empathise with the user and visualise use in context. This method takes a holistic view and includes all relevant channels and touchpoints, from engagement through to achieving the intended goal.
In this case, the user is a kitesurfer who would like to learn a new trick and therefore downloads the Duotone Academy App to access lesson content.
Identifying the problems
From the storyboard I identified 4 key points I believed will cause friction for the user:
1. Time taken to arrive on Home Screen
There are 6 different product images after the splash screen, before a ‘start’ button appears to enter the app. The Doherty Threshold states that if system feedback should be within 400 ms in order to keep users’ attention and increase productivity. This is currently over 600ms.
2. Risk of irrelevant content on the Home screen
The carousel of suggested lesson content is based on skill level only. It does not consider board type.
3. Access to lessons in training
With progression as the primary goal of the app, lessons in training are 3+ clicks away.
4. Use in context — uploading videos
Video uploads to engage with voting feature and discussion board features. It takes additional effort to arrange this in the context of kitesurfing.
I mapped the assumptions identified in the storyboard on a matrix to guide my decision of where to focus.
To remove that friction for users to find lessons in training would be the priority to validate and resolve.
To recreate the actual user context of creating video footage and later uploading that would be difficult to validate is the test environment for this project. However, I could assume from an analysis of the available app data that low engagement in this feature did not appear to detract users from interacting with the lesson content and completing lessons without uploading a video.
Based on these insights, I decided to focus on access to the lesson content, and discuss a video uploads hypothetically, for the user tests that followed.
Developing the concept
To test my assumptions I developed a low-fidelity, interactive prototype in Axure. This prototype replicated the user journey of learning a specific trick in the existing app. You can find a link to my prototype here.
Scenario driven usability testing
I conducted 4 user tests over Zoom, where participants were asked to share their screen and ‘think aloud’. The research participants were given a series of small tasks to follow to achieve their end goal. This involved exiting and reopening the app on multiple times, to account for time that would be spent to practice the trick on the water.
From the scenario driven usability testing I was able to validate assumptions and draw insights from the data.
Framing the problem
Users find the app slow and counterintuitive to find and select lesson content, whether a new lesson or a lesson in training. This problem is woven throughout the user journey, from entering the app, to the recommendations and the
Winning points for trick progression is another key feature of the app, however for the scope of this project I focused on the core function — trick progression, and therefore to provide support to users with relevant, efficient lesson content.
The design challenge
“How might we create a fast, intuitive and customized way for users to engage with lesson content and achieve trick progression.“
Ideating
Having validated the assumptions from my storyboard, and considering further insights from the user testing, I started to ideate on possible improvements.
After exploring some different formats to improve the user experience, I decided to implement the following:
As a core function of the App, access to lessons in training becomes more efficient and goes from 4 to just 2 clicks away.
Adding a link under the recommendations on the Home page, allows users to customize the content they see by board type. These preference are managed on the ‘Me’ page. As lessons are already grouped by board type, so this should be relatively straightforward to implement.
This still allows Duotone to advertise new products, but without the risk of the user getting frustrated. Additionally, as the user has actively opened the App from their phone, there is no need to press another button to access the home page. To do so adds unnecessary friction without any user value.
Perhaps this is a technical limitation imposed by the app’s own loading time and the developers used ads to mask it? If so, a contextual animation such as a countdown or progress bar to enter the app would give necessary feedback to the user.
In addition to this, relevant buttons are highlighted in different colour, to show importance and make more memorable, to encourage users to explore this feature.
Building a hi-fidelity prototype
Familiar with the patterns already present in the app from building the wireframe, I created a high-fidelity style guide, and uploaded the element into the Sketch library in order to build the prototype as efficiently as possible.
I built the hi-fidelity prototype with a 8x8 pixel grid as a guide for consistent spacing. You can click through the improved user flow here.
Accessibility Improvements
I made three changes to improve the accessibility of the mobile app — sub heading text colour (updated from light grey to dark grey to achieve contrast ratio of 7.4 (previously only 1.5)), button size ( increased in size from w:139pt x h:36pt to w: 248pt x h: 44pt to achieve minimum tappable area, navigation bar on home page (replaced with background colour, rather than transparent, to prevent contrast issues from certain images.)
Extending app engagement and support
To give users additional value and support in their learning journey, and knowing that recall is harder than recognition, I created an Apple watch extension. This allows users to engage with the app while on the water, where they can access the 3–4 key moments from the lesson content — helping to trigger visual memory. This takes the format of glanceable screens with a similar structure to iOS workout app for familiarity of use.
Reflection
Key Learnings
Storyboarding is a great framework to help to notice gaps in your thinking, by engaging with the context of which a user may perform certain tasks. Where I used Storyboarder to create the sketches as a way to test the tool, a key learning here is to not be precious with the quality of the images, as long as they achieve the intended goal — a visual representation of the user journey.
Scenario testing is an efficient was to validate assumptions and extract valuable insights.
Repeating cards / patterns in the design of a product, and creating a style guide in advance, makes building the prototype, and actual app, much more efficient.
What I would do differently next time
I found it challenging to focus on a single improvement, and therefore bundled a number together from the same user journey. Assessing the proposed improvements on an impact v effort matrix would help to prioritise what to do, and in what order. However, as this was a school project, I did treat this as an opportunity to extend my practice and also include a wearable (apple watch) extension.
For the storyboard I would aim to reduce the text used to make a more a tool for visual communication. As an extension of this, a comprehensive customer journey map would add more detail to highlight the pain points following the user testing.
For the scenario based usability testing, as the task to learn a trick is completed over an extended period of time, it would have been a more accurate reflection if there was an actual time-break for test participants between tasks in the user testing. It would be interesting to see if this has an impact on the results.
I would also conduct another round of user testing on the hi-fidelity prototypes, to see how the improvements to the user experience perform, and make a round if iterations based on that feedback.
