CodeCast - Developer Tools: Streaming Platform with live Code Editor

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/UI audit and establish missing features to the community portal.

Product Principles

The CodeCasters

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

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.

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.

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.

The following information architecture and wireframes are given as references for the overall community portal structure.

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.

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.