Before we tackle the problems, let me tell you a little about WollenDance. WollenDance is a dance and fitness product. Its web product has existed since 2017, and the team wanted to extend the product into the iOS system so give users more flexibility when using the service.
WollenDance is a platform that works with dance studios across the United States to provide live streaming and pre-recorded dance classes for users who are too busy to make it to the studio on a regular basis, but are enthusiastic about dancing and want to continue working out. With the service WollenDance provides, they can easily cast their favorite studio classes on their TV or simply dance with their mobile devices anywhere and anytime.
iOS App download
Web product
When I joined the WollenDance team, the iOS app was under design development and prototype testing with our team members and some existing users, but the App was not live yet. The first project I started was redesigning the live page and the class detail pages in order to achieve two goals:
1. Have a more consistent style with the web product.
2. Help users quickly scan through and get the most important information about the live classes.
Since one of our goals is to maintain a consistent design style between the iOS app and the web product, so before I started to do the design, I took some time to look at the existing web product to find out two main reasons that the app seemed inconsistent with the website.
1. The WollenDance website is bright and colorful, but the app was dark.
2. The website uses different colors to represent different studios (color coding), so when all live classes are put together, users can easily figure out which classes are from the same studio. However, we did not incorporate this color coding in the app.
After identifying the two main factors, bright interface and studio color coding, I continued to evaluate the original design to find more areas that can be optimized in order to improve the app’s consistency with the website.
The original live page
The interface looked dark because of the thumbnails, they were screen captured from class videos. They also looked unprofessional.
There was a hidden feature from this page: when users long pressed the thumbnails, it would play a 5 second preview video for each class. However, no one knew this feature existed.
The thumbnails were taking up too much valuable screen space, and we hoped to show more classes to users without them needing to scroll.
The information on the cards was spread out, and lacked clear hierarchy, which was an inefficient use of the space.
Flow: clicking into a live class as a non-subscribed user
From the original live page, users were not able to know when the classes were live. They had to click on the class and see if it was playing.
For non-subscribed users, the class details page was disorganized, elements were overlapping on top of the video.
Live page vs. On-Demand page
The live page looked very similar to the On-Demand page, which could easily lead to confusion. Some differentiation was needed between them.
I tried to understand the users more before I started the redesign. Here are some takeaways I gathered from the existing WollenDance users.
"The most important information to me is the schedule and the title of the class."
"Love the idea of being able to preview the classes, but I didn't know this feature existed before you told me."
"I'm used to finding my favorite studio's classes by its color on the website."
Make sure the new design maintains consistency with the web product.
Improve users' efficiency of scanning through the page and finding class information.
Make the preview video feature easier and more obvious for users.
I identified the areas of improvement in the original design, while keeping users in mind, and worked towards the goals. I finally generated the design solution below.
The Live page
I took away the thumbnails from the original design to keep the interface bright and show more classes. It also creates a distinguished look from the On-Demand page.
I incorporated the color coding around the instructor's profile pictures in a subtle way to maintain consistency with the website.
I added a live icon to indicate to users that the class is currently live.
I created some hierarchy to the information on the card, to make the schedule and the title most prominent.
Flow: clicking into a live class as a non-subscribed user
With the new design, when users click into the class detail page, the 5 second preview video will automatically loop without them clicking on anything.
I reorganized the information below the video to optimize screen space and organize information better: combining "Instructor and Studio", and taking away the "Schedule" since it's shown on the video.
Elements are not overlapping on videos anymore. Both subscribe, and non-subscribed users can read the essential information without scrolling.
Prototype
I created a prototype to demonstrate the new design to users and conducted A/B testing with the original design before implementation by the engineering team.
According to the A/B testing results, we found that all users indicated that they prefer the new design because it's more intuitive and easier to find information. Users said that the interface looked cleaner and more organized. We implemented the design, and the iOS app finally went live on the App Store in March 2020. Within the first month the iOS app reached 2,000 users.
I'm currently working on improving the entire app design to provide a better experience to users.
