KADA New Sprite Center
Providing a more engaging project-building experience with Sprites inspired by our users’ favorite NetEase video games and more!
Role: Lead UX Designer
Sprite is familiar to every Scratch project maker and it is very important to making their project stand out from the crowd. Native Scratch has its own Sprite Center and users can access it from inside Scratch. Based on tracking and analysis of users’ feedback, having more and various kinds of Sprites has been one of users’ most expected features.
In one recent online research process (outcome shown as Figure 1 below), we collected valid feedback from 120 students. In terms of content demands, more FREE and COOL Sprites are on the second tier (the top tier is the need for tutorial). The Teaching and Learning Research Team’s primary responsibility was to make tutorials. Due to the time necessary to make tutorials, we decided to prioritize the “FREE and COOL Sprites.”
This project lasted about two months and was divided into two stages:
Stage 1: We created the new Sprite Center on the site where users can easily browse and save Sprites into their collection as a MVP;
Stage 2: We added features to unify the browsing and collecting experience, both on the site and inside Scratch. We also enhanced the experience of exploration (fun) and provided a personalized management (utility) feature.
I worked closely with a Product Manager, several Software Engineers, and Marketing Specialists throughout the entire process.
Figure 1: Data visualization shows high demand for more FREE and COOL Sprites.
Left: “素材 (Sprite)” on the left side of “SCRATCH”, “教程 (Tutorial)” on the right top-corner of “SCRATCH”;
Right: The circle on the left bottom corner shows the need for “素材 (Sprites)”
Finding an Opportunity
In Q4 2018, our team was fully devoted to finding new growth points for the upcoming “examination month” and “winter break” periods. During these periods of time, students will limit their access to computers and spend more time reviewing textbooks, which would hurt our MAU, user retention, and cause churn user.
We needed to come up with a plan that not only can help to maintain user engagement within the community, but also encourages users to keep creating and making new projects. We also wanted to show our users something big and new for the upcoming new year to let them know that what they wanted mattered to us.
In addition, we made sure we were not acting simply on competitive pressure, so we conducted more research with our users to explore if there would be further value we could provide. We talked to 10 students during one week, and here is what we learned:
Opportunities
• They thought the Sprites that come with Scratch looked out of date and ugly
• They loved to play NetEase video games, and many of them were very familiar with those games
• Many of them downloaded pictures online and edited them as their own Sprites by using software like Photoshop and saved them locally
Existing Problems
• As the size of the Sprite Gallery grew, usability problems emerged: users felt it was difficult to find Sprites they liked and could not save them for later use
• The categorization of Sprites was confusing to some users
• They expected new KADA exclusive Sprite update to happen more frequently with better quality
Based on the data that we collected from users, our team decided to introduce NetEase Game IPs to KADA via exclusive Sprite collections. In terms of functionality, we 1) created a Sprite Center on kada.163.com, which kept users updated about the latest available exclusive Sprites; 2) provided advanced functions, like uploading self-made Sprites to the cloud and creating folders for personalized Sprite Collection and Management.
MVP
While our marketing team reached out to NetEase Games Department to make sure everything went smoothly, our design team was working on the interaction and UI design.
Based on the conversation I had with users who created their own Sprites and their user journey, I mapped out what the Sprite Center user flow looked like.
Throughout the stages of Skim → Find → Use → Share, users had different needs and habits to finish tasks in order to get what they wanted. As a designer, I needed to follow users’ intuition. I also realized that, besides user acquisition, I had to consider user activation; retention; referral; and, even, revenue during this process. As a next step, I sketched out what were the overarching objectives and opportunities present in every step of the maker’s experience—from the moment they decided to look for new materials for their upcoming project until they found what they wanted:
Figure 2: Overarching objectives and opportunities uncovered during “Skim, Find, Use, and Share” stages
Figure 3: English translation of Figure 2
Once our team agreed on these objectives and opportunities, I proposed a rough user flow with wireframe sketch to show more details about the interaction design.
NetEase Games is famous for its great concept design team with great aesthetic sense of what the young generation likes. So, I wanted to show off these beautiful images and let them become the best CTA design on the interface.
Figure 4: The wireframe sketch features the Sprite Center Page, Branded Sprite Page, and other details
Here is the wireframe with interaction details which were created in close collaboration with our product manager, and software engineers to make sure the function was well defined, the experience was spot-on, and the execution was able to help KADA Community reach the expected growth.
Figure 5: The wireframe for Brand Listing
Figure 6: The wireframe for Branded Sprite Page
As I mentioned above, the first version only provided limited features. I worked closely with the visual designer to figure out the best visual presentation while maintaining the familiarity of searching and saving pictures online. Along with our marketing specialists, we tracked users’ reactions online and the site’s data performance to ensure we could manage expectations and escalate issues when necessary.
The reactions from our users were highly positive along with requests for future additions. Some users mentioned they wanted saving and sharing features, which was the focus of our next iteration.
The first version was launched on Dec. 13th. Here are some comments from the KADA forum:
“Such a great feature :P”
“Hope I could upload my own Sprite and save it in the cloud or share it. ”
Advanced Version
In the second iteration (launched on Dec. 28th, two weeks after the previous version), we added several features that included adding a search bar in Scratch 2.0 & 3.0 (fuzzy search supported), a Personal Sprite Backpack feature in Scratch 2.0 & 3.0, uploading and saving private Sprites to the cloud, and batch management for Sprites inside Scratch 2.0 & 3.0. We worked through various iterations on key features and landed on something that the whole team was very proud of. Here are some wireframes of some key features with interaction design details:
You can find the final result at the KADA official website.
As you can tell, we offered a lot of features in the second version. Although users were excited to see these new features along with FREE and COOL Sprites, we also received considerable feedback about improvements and bug reports. In the following month, I worked with our engineering team to make sure all the practical improvements were implemented and the bugs were fixed.
Growth
We hypothesized that with the new Sprite Center and its related features, we would see an increase in the number of new projects (weekly and monthly), in weekly retention, and in user engagement. So, after the launch, we continued collecting and evaluating user feedback and site’s data performance. The outcome was encouraging.
Compared to the data performance during the corresponding period of time from the previous year:
• the average weekly retention rate was 19.28% in 2018; 30.51% in 2019 (our goal was not less than 25%)
• 123.78% more new projects had been made
• more than 100,000 Sprites collected during the first month
Eventually, more than 1 million Sprites were collected by the end of May 2019.
Postscript
Since the Sprite Center was all about content, we kept our users active and excited by listening to them about what themes of Sprites they wanted and then making them available. Of course, none of this would have been possible without our cross-functional teams. Specifically, our marketing and communication teams made great Sprites available on our platform.