Karina Kino School UX/UI Design Case

Karina Kino Art School is an online educational project by Karina Kino, a professional artist and illustrator. Drawing from many years of experience, Karina has created various courses in watercolor, acrylic, embroidery, and more. For seven years, she has helped over 8,000 people immerse themselves in the world of creativity.

ABOUT CLIENT

CONTEXT

Karina Kino Art School has been operating since 2015 but didn't have a unified platform. Each course had its own landing page what was confusing for the clients. Karina's team decided to move to GetCourse platform (all-in-one tool for laucnching online courses).

CONTEXT

BUSINESS CHALLENGE

Create a website design that will unite all courses offered by Karina Kino Art School.

Develop a custom design for the personal account interface on the GetCourse platform.

BUSINESS CHALLENGE

Create a website design that will unite all courses offered by Karina Kino Art School.

Develop a custom design for the personal account interface on the GetCourse platform.

BUSINESS CHALLENGE

Create a website design that will unite all courses offered by Karina Kino Art School.

Develop a custom design for the personal account interface on the GetCourse platform.

BUSINESS CHALLENGE

Create a website design that will unite all courses offered by Karina Kino Art School.

Develop a custom design for the personal account interface on the GetCourse platform.

BUSINESS CHALLENGE

Create a website design that will unite all courses offered by Karina Kino Art School.

Develop a custom design for the personal account interface on the GetCourse platform.

Design process

RESEARCH & IDEATION

First, we had a client workshop to understand the client’s expectations and their vision. I also enrolled in the Watercolor Illustrations course offered by Karina Kino Art School to gain insights into how the product works.

For the competitor analysis, I reviewed international online learning platforms like Domestika and Skillshare, which offer similar creative courses. This helped me to organize content, define the structure and information architecture of the website.

RESEARCH & IDEATION

Information Architecture

Lo-Fi Prototypes

GETCOURSE PLATFORM

For the second challenge, I reviewed the standard GetCourse platform interface. I looked at the way other online schools based on GetCourse platform customized their personal account interfaces in order to look unique and provide a uniform experience.

GETCOURSE PLATFORM

Standard GetCourse Platform Interface

Solutions

1. Opportunity for development

Karina Kino Art School is constantly evolving, with new courses, free lessons, and articles regularly being added. So I created a design focused on the seamless addition of content, ensuring it integrates without disrupting the overall structure or requiring significant time. It's designed like a modular system.

1. Opportunity for development

Main Page

Course Page

2. Reflect the artist's aesthetic

The website is the artist's calling card, so it's crucial that its design reflects the artist's aesthetic.

The primary color is brown, which features prominently in most of the artist’s projects.

In layouts where we communicate with the user, we incorporate gentle creatures - the artist’s illustrations.

The design itself is minimalistic and clear, to avoid confusing users given the abundance of content.

2. Reflect the artist's aesthetic

The website is the artist's calling card, so it's crucial that its design reflects the artist's aesthetic.

The primary color is brown, which features prominently in most of the artist’s projects.

In layouts where we communicate with the user, we incorporate gentle creatures - the artist’s illustrations.

The design itself is minimalistic and clear, to avoid confusing users given the abundance of content.

2. Reflect the artist's aesthetic

The website is the artist's calling card, so it's crucial that its design reflects the artist's aesthetic.

The primary color is brown, which features prominently in most of the artist’s projects.

In layouts where we communicate with the user, we incorporate gentle creatures - the artist’s illustrations.

The design itself is minimalistic and clear, to avoid confusing users given the abundance of content.

2. Reflect the artist's aesthetic

The website is the artist's calling card, so it's crucial that its design reflects the artist's aesthetic.

The primary color is brown, which features prominently in most of the artist’s projects.

In layouts where we communicate with the user, we incorporate gentle creatures - the artist’s illustrations.

The design itself is minimalistic and clear, to avoid confusing users given the abundance of content.

2. Reflect the artist's aesthetic

The website is the artist's calling card, so it's crucial that its design reflects the artist's aesthetic.

The primary color is brown, which features prominently in most of the artist’s projects.

In layouts where we communicate with the user, we incorporate gentle creatures - the artist’s illustrations.

The design itself is minimalistic and clear, to avoid confusing users given the abundance of content.

Style Guide

UI Component Library

3. Custom design for personal account

Karina Kino’s team decided to host their school on GetCourse, a platform for launching online courses and schools. The standard account interface can negatively impact user experience so I created a custom design. It matches the website stylistic and provides a consistent user experience.

3. Custom design for personal account

Dashboard Interface

Chats Interface

Dashboard Component Library

Result

ENGAGEMENT

The result of the work is a fully functional website with a personal account on the GetCourse platform. We have received a huge number of positive reviews from course participants. Karina Kino Art School is growing, and the website is evolving with it.

ENGAGEMENT

LEARNINGS & IMPRESSIONS

This is my favorite project! Working on it has been incredibly rewarding. It’s one of those occasions when the product is so outstanding that the goal becomes enhancing its impact by making the design as user-friendly and inviting as possible. The challenge we successfully addressed was to design the personal account within the constraints of the online platform. Also we created a design that scales easily (and already does!).