01

Background

I've got this freelance job when I was looking for a full time designer job. The founder of Find Solutions AI is planning to launch a personalized video channel with AI-powered auto transcript generation and live broadcast platform for content creators and tutors. The product manager done a briefing with me to walk me through the key features and the roadmap of the platform.

Target customers - anyone who wishes to upload videos for streaming or tutoring. It could range from fortune tellers to yoga instructors to professional teachers . Can be used by individuals or companies for video conferences too.

02

Competitive Analysis

Trint and Sonix are the key players in the market so I've done an analysis on the UI of their websites:

03

User Research

To understand what motivates the customers, I've decided to carry out a small scale research before I start the wireframing process. I've found 3 of my friends which are the potential customers of Chunks.AI:

1. Victoria - Age 36 - Teacher
2. Katrina - Age 33 - HR
3. Wilfred - Age 37 - Journalist

I've done a remote interview with them and asked the following questions:

• Could you briefly explain how you record and share your video to others?
• What motivate you to pay for a video editor (with transcription service)?
• Could you let me know if this helps you make your decision. Explain why.
• What do you think of a monthly plan and yearly plan?

The findings:

• No interviewee is using transcription service but they felt that it is something needed. The teacher thinks it helps the students to learn
• They value if it is simple and easy to use, that can boosts their productivity on create content. For HR, she thinks data security is important
• They also want to know the duration of the content can be edited on the platform as the key decision factor apart from price
• It is good to have free trial but they need to know how long the free trial is
• What are the languages/ how many the platform can transcribe?
• Monthly and Yearly Fee - how much they have save if they subscribe for a year?

04

Design Goals

1. To emphasize to users that it is easy for them to do produce and share content
2. Provide a clear pricing plan for users to compare and decide which one to choose

05

Wireframing

While I was working on the wireframes, I've found that I need to clarify a few things before I move forward with the next steps:

• The video provided does not show how the actual platform looks like, will there be actual screenshot provided so users can see the platforms?
• Does the website needs to match the layout of the platform? If yes, any screenshots provided?

06

The Design

Screenshots and videos of the platform were sent to me after the call so I can have a better idea of how the platform looks like. But for the color of the site, they prefer a lighter shade of orange, white and dark green .

I've sent them 3 designs with different colors (dark green, dark orange and light orange). As the logo color is a mix of white and orange, the logo is not that obvious after placing in the design with orange. At the end, the following design has been chosen:

‍

07

Communicating with the Developer

This is my first time working with a developer on a web design project. Apart from giving them the styleguide, design assets, I've also generating the design with 3 breakpoints for the web development. There are times I made mistake on font size and line height on mobile version which I'm glad that the developer pointed this out to me for improvement:

There are times that I do not agree with the developer. Like below, he asked if a mobile phone frame should be used for showing the screencaps of the platform for mobile version. That I suggest to keep the imac as it is and add a video on the landing page with a user using mobile version of this platform for better illustration. At the end, the developer said due to html restrictions, using a mobile frame is not possible.

Another issue is the developer is not sure what to do with the json file that I've sent for Card Animation on the landing page. I've explained that this is for animation but he insisted that I need to send him a video for development which made me a bit frustrated. I've rendered the mp4 video for him at the end. However, the end result is not what I wanted on the current version which needs to be further discussed.

08

The Iteration

The product manager later told me that they want to make the "About" page more interesting. She suggested me to add some illustrations or animation. So I've worked on the following changes:

While I'm still waiting for the feedback from the client, I've found that they have launched the new design already: https://chunks.ai/

This is unlike the preview link I've got from the developer but I reckon that it is a MVP, so further changes will be implemented later I think.

‍

‍