Client Need

The client had an existing online learning solution they had sitting on their website. They wanted to drive more traffic there but felt the experience was not delivering in terms of providing young music enthusiasts with the tools they needed to succeed. The solution they needed will still be a learning module built into their existing website.

Discovery Phase:

During our Discovery Phase, we went through the learning module in its entirety and found that there are many ways for a learner to exit the course unintentionally. Many links took the learner out of the course and 1-hour long videos/podcasts would detract from the learner experience by overwhelming learner’s with a long seat time. We also learned that we would be working with a contracted developer that was outside of our organization.

Our Solution:

• Reduce seat time by shortening longer videos/podcasts into short videos that highlight key topics/points and direct learners to other platforms like Spotify if they wanted to listen to the full podcast at their leisure.

• Reduce the amount of links that take the learner away from the module.

• Encourage learner engagement by adding interactions at key breakpoints to test learner knowledge via social learning tools like polls. We also used a plugin to house some learning content/interaction that was developed in Storyline Articulate.

• Since no actual scoring metrics can be captured during this module (since it exists online as a webpage anyone can access), we decided to capture user information at the beginning and end of the module to provide MFF with the user information they need to focus their efforts in other areas.

The Process

Design Phase:

During the design phase, we pulled inspiration from many music sites to help create an engaging environment to house our learning solution. At this point in time, we worked closely with a Developer to help figure out what is capable in the current structure of the webpage and what needed more effort. The first iteration of the design was approved by the project leads on the MFF side and was presented to their manager. Although the project leads were happy with the progress so far, their manager wanted a different approach.

Feedback Provided

• Overall, the flow felt great and the course felt shorter and less daunting to sit through (seat time was roughly 20-25 mins)

• Felt the design was too busy and distracting, wanted a more simplified approach and to reduce the amount of imagery

• The developer indicated that although having breadcrumbs to help navigate the course was a great idea, it was something he couldn’t develop in the timeframe allotted

With the provided feedback, we went back and revised the design of our module. Below is the before and after of the learning module.

Develop Phase:

During the Develop phase, the Contracted web developer began building out the website based on our Figma file that I had sent to him to review. I also provided him any images and artwork that was needed for the module. There were a few QA check periods with the MFF team and us, but overall development went smoothly once the final design was approved. Below is the Figma file that was sent to the developer to build the experience.

To best view the experience, please full-screen.

Lessons Learned

There were many things to learn from this project. The key takeaway I would highlight is to bring the key stakeholders in early so they can help guide you in the correct direction when designing and developing. Their input early on would have saved a lot of time and effort.

Thanks for your time!