Case study | Language Mastery

✨ A platform for an English language course for the purpose of  receiving course applications. 

Case study | Language Mastery

✨ A platform for an English language course for the purpose of  receiving course applications. 

Overview

Short description

1. Language Mastery

**Niche:** foreign language course

**The purpose of the site:** applications for course registration

**Site type:** landing page

**Additional services:** corporate presentation, banners for SMssite link

Problem & Task

User research 🗒️

Target ausience groups in User research

Pain points -> Needs 🎯

Pain points & needs in User research

Frequency of purchasing

Frequency of purchasing in User research

Analysis of analogues

Analysis of analogues | Anna Dembytska portfolio

Information architecture

Information architecture | Anna Dembytska portfolio

User Flow

User flow for the website | Anna Dembytska portfolio

🚀 Roadmap

Roadmap for the product development | Anna Dembytska portfolio

References & Moodboard

References & moodboard | Anna Dembytska portfolio

UX text writing

Text for the website | Anna Dembytska portfolio

Design system

A design system was developed and periodically changed to ensure consistency and efficient development, simplify changes and improve collaboration during the creation of a product or platform.
 
The system design (in order) includes:

  • development of the logo and its variations,
  • typography (sizes of headings, paragraphs and font definitions),
  • button proportions and their types on different screens,
  • selection of colors according to tasks,
  • graphics for cards (avatars).

🧰 Tool: Figma with using components.

Design system, ui kit for the website | Anna Dembytska portfolio

Wireframe & Prototyping

A desktop version Wireframe was developed to define and visualize the structure and placement of elements before the UI design of the site, aimed at effective functionality and optimization of the user experience.
Low-level prototyping was applied to test the user flow.

🧰 Tool: Figma.

wireframe GIFs creation | Anna Dembytska portfolio

User Interface Design

Created a design based on the existing Wireframe:

  • 1 main breakpoint for desktops,
  • 1 for tablets,
  • 2 for phones (horizontal and vertical format).

🧰 Tool: grids, guides, and other tools in Figma.

UI design Figma screen | Anna Dembytska portfolio

Webflow development

Webflow website development mockups | Anna Dembytska portfolio

Banners for social networks

In addition, at the request of the client, the design of banners in the corporate style for social networks was created in the following formats:

  • Instagram post,
  • Instagram stories,
  • Facebook post.

🧰 Tool: Figma.

Bammer images | Anna Dembytska portfolio

Corporate presentation design

Presentation mockups | Anna Dembytska portfolio

The results

🚀 As a result of the completed stages, the main results can be identified:

1

Problem

3

Tasks

5

Target audience groups

1

Information architecture

8

Sections on the site map

23

Items in References and Moodboard

56

Elements design system

1

Working site

Next

A platform for purchasing courses for a yoga trainer

1. Yoga MindfulMotion

**Niche:** yoga trainings

**Purpose of the site:** receiving applications followed by subscription

**Site type:** landing pagesite link

Contact me

If you are thinking about hiring me or would like to discuss a project, get in touch with me.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.