Vidcode
Making gamified learning more fun and tracking students’ performance easier.
Background
Vidcode teaches JavaScript through lessons built around creative video projects. It also offers up-to-date teaching resources, toolkits, and activities for educators and librarians who have little to no experience. Educators use vidcode to explore, plan, and manage their teaching activities inside and outside of the classroom.
Deliverables
Wireframes
Mockups
Clickable Prototypes
User Research Documentation/Reports
User Testing Documentation/Reports
UX Design Guidelines
Rebranding Designs
Toolkit
Sketch
Adobe Illustrator
Axure RP
InVision
InVision Studio
Principle
Procreate
Objectives
Educator Side
Enable educators to evaluate and present their students’ performance faster and easier in a data-rich and visually rich way. Persuade them to share.
Student Side
Encourage students to explore, create, and share more by offering a celebratory and exploratory learning experience on vidcode.
UI Design and Rebranding
Update vidcode’s UI/brand identity to reflect a celebratory and exploratory learning and teaching experience.
My responsibilities:
I was the only designer in a cross-functional team with 1 PM and 2 developers to create design solutions end-to-end.
Led a complete redesign of vidcode’s web platform and brand identity. This included, but was not limited to, designing the deliverables for: section content discovery and online IDE experience, progress page for educators, project showcase page and sharing experience, landing page for vidcode.com, rebranding design and its semantics, UI design guidelines, and more.
Conducted user interviews/research, competitive research, user journey analysis, personas, wireframing, prototyping, testing and QA. Contributed to product strategy and product design.
Planed and conducted remote user interviews via a range of online tools, analyzed and reported on findings from the data collected.
Worked with engineers on a daily basis to ensure that designs were technically feasible and the work was being implemented to meet our users' diverse requirements.
Holistic UI design.
I started my work by deploying initial user interview sessions while also getting familiar with vidcode. I did this to avoid the Curse of Knowledge and to be as empathetic as I could. Here is some of the feedback I received:
Challenges our educators are facing
Feedback from our users about the website
Students were very polite to me. When I ask them “What do you think about vidcode?” most of them replied with positive thoughts. So, I switched the perspective a bit and asked “What’s your expectation about vidcode?” “Games” and “Fun” started popping up.
I asked them “What apps do you play with?” Many of them mentioned TikTok and that they liked to share videos. So, I asked them “Have you shared your vidcode project on your social media”? Unfortunately, most of the answers were “No. “
Assumption:
When participants shift from giving short answers to longer ones or even respond with a question, watch out! They are talking about something they care about!
Assumption:
We clearly have failed to make our users feel like their projects are good enough to share.
UX design thinking driven process
Before I started my design process, I determined that in order for us to improve our user engagement, sharing activities, and deliver our promised value to our users, I had to understand the users better. I also needed a set of principals to adhere to as we set out to ensure that all of my product experience redesigns were consistent:
User-centered, period.
Consistency. Will this solution meet users’ expectations? Even better, does it feel like it represents vidcode’s values well?
Mind the curse of knowledge! Always be eager to question, learn, and improve myself.
Beside the several main takeaways I got from the interview process I mentioned above, there was so much more that I discovered. I turned this information into notes with questions, assumptions and ideas, and eventually transcribed these dots onto Post-It Notes. I put them on the wall and grouped them by topics and keywords and ups and downs. Eventually, I found patterns and trends that led to areas of opportunity.
One more thing, remember how I mentioned “consistency” as the second-most important principle to guide my design process? I needed one tool to ensure that I achieved that principle. I needed something like a magnifying glass to help me double-check my design decisions to make sure that I considered ideas that could result in something fundamentally consistent in terms of value creation.
In a nutshell, I wanted my design to redefine our users’ impressions about vidcode from a learning tool they could use to a partner they trusted to explore together, celebrate together, and share together. When users use our product, I wanted them to feel like a living person was saying to them “YOU, YOU” and not like a chatbot beeping “THIS, THAT.”
What methods do educators currently use to track the feedback they provide to students?
Teachers today have a wealth of digital tools to help them inside and outside of the classroom. The user research process reveals some interesting insights.
When I heard the poster tracking system during the interview process, I followed up with the question: “What was your class’ reaction to this?” Her answer was expected:
“They loved it. Students are very much engaged and passionate about what they have created… it’s much more effective if the whole class can see it. ”
The class reporting tools and reports generated by them were used by our coding teachers, but they weren’t effective in larger scenarios like the classroom, on job evaluations, or even online. As you can see in the screens to the right, they look dull and tedious. They do not show coding classes as an open, creative, exploratory, and “learning while making is fun” experience. Most importantly, these tools are made for all kinds of teaching activities in general — the data structure and evaluation system does not match the quality and excellence of the code learning and growing process.
Vidcode enables students to freely express their creativity by making interactive videos with visual effects, filters, memes, and more. Visual expression is essential to vidcode’s learning and making experience.
There is a Chinese proverb: Consider the past, and you shall know the future. Failing to provide an informative, educational, and celebratory report would be a missed opportunity for students to engage with the reflecting and learning processes and for educators to be proud about how much they have done to encourage their students keep up the great work. Students even motivated themselves!
The before state
I joined the team at a pivotal, transitional time in vidcode’s life cycle. From the interaction and UX design perspective, the whole product had not been updated for more than couple of years. Vidcode promised to do a lot for teachers, but didn't actually fulfill their needs, and it required a holistic update for future improvements and possibilities.
First things first
One of the first things I did as UX/UI designer was perform a comprehensive audit of the current product in order to identify our strengths, weaknesses, and areas of opportunity. Here are some of the things I learned:
Legibility issues
The progress report is a long list of charts with repetitive dots. It causes visual fatigue with poor legibility. As students number grows, this page becomes very long which makes it less usable and effective.
Navigational and usability issues
Being able to jump to an individual’s performance from the classroom progress list is nice, but when users attempt to return to the classroom progress list, it incorrectly sends them to the roster list. An ever-changing vertical navigation bar makes the user flow hard to track and inefficient. Showing how many times an activity was completed also does not match most educators’ mental models or students’ behaviors.
User journey is not completed
Celebrating the learning experience is part of a learner’s journey. To persuade users to share and celebrate, we needed to make users feel that the projects they created were personally relevant, and most importantly, fun to share. Not having a learning report gives users the wrong impression that we do not care.
Outdated interaction design
The exclusion of several interaction design modules (modals, dropdown menus, paginations, etc.) makes the overall user flow clunky, disorienting and, ultimately ineffective. It also makes the content delivery process completely laborious and with little structure or organization.
Learning report: it is more than the numbers
Numbers are absolute, dry, and flavorless. I wanted to spice them up so our users felt more related to them. So I began to think through the numbers our users expected to see, the numbers we showed to our users, and those we could show but never have shown to our users…
I also began to think about how the brand and the storytelling could be matched to these numbers with vidcode’s desired celebratory and exploratory voice and tone.
I started broadly and then created groupings based on themes.
Fun Cards to Read:
Through several subsequent prioritization exercises, I was able to distill the three most important concepts for vidcode - cosmic (would be equally interesting by boys and girls), mystic (exploratory) and fun (celebratory). Next step, I started hand drawing illustrations on Procreate. Eventually, I made a series of cards to demonstrate the concept to the team to make sure that the tone and voice was consistent and accurate. I also tested them with our student and educator users during later interview/testing sessions. I presented some conceptual visual designs (cards) to demonstrate the idea. The positive reaction from them convinced us to decide to take this path.
Interactive Report:
The “Poster” idea from one of the users that I mentioned above inspired me during the learning report redesign process. I asked myself, what can I do to make our users to be more engaged with the report? One of my answers was having a section called “Featured Projects” with embedded QR codes on each project.
Seeing is believing
Not convinced enough by the report itself? Don’t look away. You can find user’s featured projects on the report by simply scanning the QR code. Try them out by yourself, right on your palm! Don’t forget to like and share!
At the same time, I began to do some sketching and low-fidelity wireframing, which we tested with teachers and evolved iteratively. This was comprised of mostly remote tests through online interviews, Axure RP, Sketch, InVision prototype tests with Zoom or Skype, and follow up conversations.
The Progress Report Page
The Before State
Since the “Progress” page was one of the most frequently visited pages for educators on vidcode, when I tested this feature, I noticed that the data structure on the page had some major usability problems:
Data structure was inefficient. Every chart represented one chapter with activities, which repeated the same roster throughout the page. As the number of students went up, the whole page became less and less usable.
Poor legibility. Lack of visual clues (dots in colors presented different project statuses) easily caused visual fatigue as the amount of data grew.
The vicious spiral. Poor data structures led to repetitive data presentations, which caused educators to feel as if there was an overwhelming and unnecessary amount of data. As a result, legibility further declined.
The After State
Visually Rich Infographics
Instead of showing repetitive dots, the new infographic design contains more useful data, status, and quick actions with a better navigating experience. Time spent on project is one of the features our educators wanted most. In my opinion, it is also useful to spot who might have been cheating. 30 lines of code in 2 mins? 🤔
Details Matter
The redesign shows an empty status for future chapters and a “Not Started” status for chapters already covered but that students have not completed. As a result, the overall visual feels more concise, focused, and manageable.
Vidcode intentionally keeps each activity relatively short and to the point and they usually can be done within 40 minutes. The horizontal time indicator shows up to 60 minutes (but students who take longer than 60 minutes will be indicated in the copy). I also divided each column into 4 quarters to provide better legibility.
Single Chapter Focus
The new design, by default, always shows users the content they want to see the most and lets them explore freely from there. This prioritizes data and allows teachers to focus on the chapter their teaching activity is currently focused on. Pagination enables an easy transition between chapters. Educators no longer need to keep scrolling all the way down to check future chapters.
Contextually Relevant Actions
Quick actions enable educators to be more engaged with students with intuitive interactions. Reviewing projects and reminding students to do the work on time is just one click away. No more jumping back and forth between “Projects” and “Progress” to see all the information, which optimizes the efficiency of educators’ outside-of-class work.
Dark mode for better visual ergonomics
For a better and sustainable accessibility, vidcode decided to gradually introduce dark mode to the whole site. The action will be implemented from online IDE and expand to the whole site. I worked on color palette and other detailed visual design guidelines to guarantee a smooth future implementations.
What is ‘Vidcode Report’ and why does it matter?
In a team meeting, I presented to my team that in order to improve user engagement, why I think student report is an essential part of the solution and what values our solution had to meet.
The content had to be easy and fun to review and lead to a consistent and concrete outcome (qualitative or quantitative).
The solution had to be intuitive to interact with and build upon common patterns and frameworks that are familiar to our users.
This solution had to resonate with users on an individual and exclusive basis. It would also show our users that vidcode appreciated the time they spent on our platform and they would be able to see the difference they have made. By making them feel proud about themselves, this new design would encourage them to share their successes with others.
Vidcode had no student report. Students had to look at the same Progress page that educators did. As I expected, my research with students showed that most of them had never used this page. The usability problems, plus not feeling personally related to the projects they made meant they usually decided not to anything but finishing their assignments on vidcode. It was a lose-lose situation.
The Vidcode Report is a one-of-a-kind critical, deliberately designed touch point that inspires educators to celebrate with students, to encourage students to celebrate with their parents and peers, and potentially to enable parents to share with broader audiences.
Feedback from User Testings
I used InVision to build the clickable prototype for user testing and iterate the design based on the feedback. Fortunately, in each round of testing, we got more positive feedback. Not like the student report which was a feature that vidcode did not have, the final version of redesign of the Progress page took a big leap compared to the old version. I was worried about the potential change aversion effect. What happened during the test was that users got really curious about the changes. Even better, they recognized the differences and appreciated the details I had applied. These are excerpts that I heard from user testing process:
I presented the final version and the testing results to the team and they were really excited about it. They decided to launch this project.
The Future of Vidcode
The vision for future vidcode is to become increasingly personalized. We want to better understand take care of both students’ and educators’ needs and, potentially in the near future, those of parents as well. As I mentioned at the beginning of this project documentation, we want to help educators do their work efficiently and easily. Saving them more time by anticipating their unique requirements is important. How can we help enable them to quickly find the resources they need that cater to their unique teaching requirements? Does a personalized progress page fix this? Or, a student report featuring internet memes like the learning materials on the platform already did?
Before we get there, we are beginning to showcase how vidcode is connecting with its audiences. Vidcode is not just a learning tool, but also an open place to celebrate and share their celebrations. Showing them that vidcode acknowledges and encourages them to express their interests and what they are passionate about to build rapport and emotional connection, we are better able to illustrate the link between a user's intent (to learn) and their end outcome (to have one more voice to celebrate and express themselves).
Lessons Learned and Further Opportunities
There's always room to improve and there are several things we could have done differently, given the chance.
During the time I spent with students, many of them expressed a desire to make games on vidcode. I take that as a strong signal that students want to be entertained. They spend a lot of spare time on video games, TikTok, Instagram, which shows their taste and preferences. Introducing gamification mechanics would be a feasible approach to sustainably improve our students’ engagement and reinforce vidcode’s branding, for example user achievement and growth systems.
Second, in order to attract more individual learners, vidcode also needs to come up with a new set of strategies and tone to communicate with both parents (decision makers) and young students (users). Persuading parents to share, talk favorably about vidcode, and to reach the viral marketing effect would definitely make a difference.