CodeCast - Developer Tools and Community Platform

Product Design, Web App, Desktop App

Build services and tools, gathering developers to learn, share and engage.

CodeCast helps dev-enthusiasts to share codes and their best practices with their fellow developers. Tools were made for the dev-teachers to create video content. The community portal lets the developers browse and discover unique code screencast videos for their dev-resources and learning.

I help create documentation, mockups, and prototypes as part of my deliverables to my manager and team. In addition, I help conduct usability studies and QA checks on digital products across the platform.

Collaborations

CodeCast Development Team, Tammam Kbeili (Founder & CEO), Nelson Lee (Product Manager)

My Role

Product Design, UI/UX Design, Wireframing, Prototyping, Visual Design, Design System, Usability testing, QA

Time

Oct 2020 - July 2021

Link

CodeCast: codecast.io

Redesign and Improve Applications

CodeCast products were built years ago, and some of the features have never been refined or forgotten. It has become harder for the end-users as some of the existing features were lost in translation. My tasks were to ensure all the product features have a smooth flow as envisioned.

Deliverables

  1. Redesign of the code recorder desktop app.

  2. Redesign of the cast video web player.

  3. Deliver a UX audit and establish missing features to the community portal.

Product Principles

Create Open Learning

The current platform is restricted to within the developer’s organization and not available to the public. We want the CodeCast player to be a public tool that every developer can use.

Build a Community

We would like to build up the CodeCast community; help developers share their ideas, ask and answer questions; teach each other; host workshops or use it as a documentation tool for their development processes.

Education Biz on Programming and Development

Enable developers to share their knowledge and monetize their videos with ease. On the other hand, allow learners to follow complex programming material interactively and easily.

The CodeCasters

Persona

Creator

The creator makes video content for development training. They want to scale, produce, distribute, and monetize their training materials at ease. They want perfect video editing/recording tools to help them capture their videos.

Learner

The learner watches streaming videos and prerecorded tutorial videos for how-to-codes. They would like to understand the code at ease and be able to follow it. They require a lot of support and explanation to help them become successful.

Research, Sprints and Development

Start by getting direction from my manager and CEO. The tasks were broken down into phases. We started with CodeCast Studio and Cast Player with two months of the design cycle and another two months for development. The Community Portal is an on-going project, still a work in progress.

Lean Canvas Map document was given for more information. Documents were written as stories that guide the design process for each major task. This included product design exercises and analysis of the previous iterations.

Key Insights from the Old Applications

CodeCast Studio

Old Design of the Code Recorder App for Desktop

  1. The information hierarchy was unclear as it promotes the user to click “Code”, but in reality, “Code” is a tab. The user should start with “Add New Directory” instead, pointed with the arrow.
  2. The permission setting for Private/Public was unclear. Hence, the organization label classified the personal profile as an organization too.
  3. As a code project recorder, the user is working with multiple working windows. The landscape orientation hinders the spaces needed to record the code editors while controlling the recording app and many other working windows.

CodeCast Cast Player

Old Design of the Cast Player

  1. The icons were not self-explanatory. These are supposed to be a font-size adjustment and the dark/light mode switch, but they can also read as brightness adjustment.
  2. Buttons like AutoFollow and Diff Mode were unclear for their usages. Applying tooltips would be helpful to identify their meanings in the new app.
  3. The button groups were using multiple behaviours. Some buttons have hover indication, and the others don't. The same group of buttons need to have the same type of interaction.

CodeCast Community Portal

Old Design of the User Profile on CodeCast Community portal

  1. Allowing ranking of tutorial videos by beginner/immediate/advanced was an initial key feature, but with this being a social networking platform, it does not have the same authorization and standards as an educational/institutional platform has.
  2. The edit and management of created casts were lacking. Content can be created without proper management(i.e: spamming and error of detail).

Wireframing

After the analysis and initial research, I mapped out what a user could do with a streaming and recording app. I listed out the steps and tasks for the creator’s content creation process. I would ask questions like, “What would be the very first thing that prompts our users?”

With a written framing document, user journey and information architecture maps, they help my decisions to create the flow. The documents are listed as follows (except the written strategy framing document).

After going through several iterations, the code recorder app was simplified without an interactive editor. This decision was made because we want our users to able to cast from any editor of their choosing and be software agnostic to record. The following are the iterations of the code recorder application.

At the same time, the design of the Cast Player was also on the work. This ensures the experience between the Recorder App and the Cast Player flow better together.

The Cast Player also went through several iterations between my manager and me. Since the Cast Player is a new medium, information and notes are needed to help guide the user about the Cast Player's usage. Tooltips and grouping of relevant information are needed.

Early Wireframes of the Web player

Early Wireframes of the Web player

The following information architecture and wireframes are given as references for the overall community portal structure and a detailed UX audit (not shown) for the workshop feature. This highlighted some of the missing flows and features to add to the future development request list.

Usability Testing, Feedback and Prototypes

After the first mock-up was completed for the Cast Player and Recorder App, I create an internal user usability testing amount for our team for validation of the design and development capabilities. Feedback received from the team and the stakeholders were positive.

Cast Player Mockup and Questions for the Usablity Testing

Cast Player Mockup and Questions for the Usablity Testing

A Sample Clip of the Usablity Testing Exeprince from the Tester

A Sample Clip of the Usablity Testing Exeprince from the Tester

With the usability testing feedback, the final design was added additional insights that my manager and I were never thought of. The following are the final deliverables for development for CodeCast Studio, Code Recorder + CodeCast Cast Player.

CodeCast Studio, Code Recorder

Click CodeCast Studio, Code Recorder to See the Demo Prototype at Loom

CodeCast Cast Player

Click CodeCast Cast Player to See the Demo Prototype at Loom

Reflection

This was a challenging project as this product was still in its infancy and growing. There are a lot of moving parts. Working closely with stakeholders and developers was a crucial step for the successful production of this project.

Increased Understanding of Desktop app

This project gave me the first look at desktop app design. This allowed me to get a better understanding and best practices which were interesting and gave a diverse challenge.

It Is Real Only When You Have It Written Down

Write any idea and concept in documentation to keep track of memories and the reasonings. It helps solidify the project with ease to share. The document helps to develop teamwork and validate the decisions.