About this project
Pretty Mind English Learning Website
An innovative platform designed specifically for students aiming to enhance their English proficiency.
Project overview
A quick brief about this project
My Role
UX/UI Designer - User Research, Design System Development, Visual Design, Prototyping
Industry
Education and English Learning
Project Estimation
2 weeks
Overview
Pretty Mind is an innovative platform designed specifically for Vietnamese students aiming to enhance their English proficiency. Offering an array of English Coaching Topics and Resources meticulously crafted to cater to learners of all proficiency levels. The platform ensures a personalized and effective learning experience for every individual seeking to master the English language.
What I actually did in the project
My role in this project is crucial, as I'm responsible for the English dictionary and learning tools, which form the core function of the entire website. Our client eagerly anticipates the final results, including specific prototypes for these components.
The Problem
The challenges we faced and how we solved it
Problem Statement
The client first introduce us with the project basic website design with a document file that he made so we had something to start with. However, all the flows for the English learning tool isn't very clearly explained so we have to research for the flow by studying and analyzing other dictionary applications.
Challenges
With limited time and resources, managing a fully developed educational website flow is still manageable. However, as one of my initial client projects, guidance and mentorship were essential, slightly slowing down our progress.
Our Solution
To streamline our workload, we split the project into two sections, with Mr. Quang handling the visual design for the Home and Login pages and setting the design pattern for the entire site. I followed his lead, focusing on research for the English dictionary and learning tools and redesigning the remaining two pages. This process involved a week of analysis and another week dedicated to page design.
Research Summary
We got something to start with
The Site Map
Our client provided us with a site map comprising four essential pages: Home Page, Login, Coaching, and Resources. The Coaching Page includes video lectures for Reading, Listening, Speaking, and Writing English skills. The Resources Page offers various English topic resources tailored to each skill level, empowering users with comprehensive learning tools.
Pretty Mind English Site Map
Client Mockup
These initial website mockups were crafted by our client, provided a comprehensive visual overview of the project. Our task now is to conduct further research and refine these concepts into the final website design.
Website Mockup
Design foundation
Setting the base for the project
Design System
Design Components
Website Button and Tabs
Home Page Card Item
English Coaching Page Card Item
English Dictionary Tool
Writing Gramary Check and Suggestion Tool
Mockup design
Mockup Design
The Landing Page
This segment was led by our team lead, Mr. Quang. His design direction focused on creating a sleek, modern website with engaging patterns and clean simplify icon. I provided assistance with the Resource Page and prototypes for the landing page. The client was responsible for supplying the content and images.
Website Home Page
English Coaches & Resources Page
English Coaching Detail Page
I took charge of this aspect, initiating thorough research on dictionary applications, web apps, and Google tools to refine our app's flow. My comprehensive analysis impressed our client with its attention to detail and thoroughness.
When choosing a proficiency level and coaching topic, you'll encounter three primary coaching sections, each comprising various exercises:
Reading & Listening
Practice with a listening video and text paragraph
Writing
Allow you to practice a writing subject based on chosen topic
Speaking
Converse with the AI chatbot on various topics
The translation function in the Pretty Mind web app facilitates seamless word and phrase translation between Vietnamese and English, enhancing language learning for students of all levels.
Includes every Dictionary functions.
Translation, Definition, Synonym, Collocation, Usages, Family
Instance Translation, Quick & Easy to use
Simply click on the work you want to translate
Bookmark your favorite words anytime.
You can save your words and review them at any time
Explore each tab in the dictionary tool:
Translation: This feature allows users to seamlessly translate words or phrases between English and Vietnamese. Users simply input a word or phrase in either language, and the dictionary promptly delivers its translation in the other language.
Definition: This function provides the meaning or meanings of a word. It helps users understand the context and usage of the word by presenting its definition(s) in a clear and concise manner.
Synonym: The synonym function displays words that have similar meanings to the searched word. It helps users find alternative words to express themselves more effectively and enrich their vocabulary.
Collocation: Collocation refers to the habitual or customary arrangement of words in English. This function shows common word combinations or phrases that frequently appear together with the searched word. It helps users understand how words are naturally used in context.
Usages: This feature provides examples of how the searched word is used in sentences or phrases. It offers contextually relevant usage examples to demonstrate the word's meaning and usage in different contexts.
Family: The word family function displays related words derived from the searched word, including its various forms such as different parts of speech (e.g., noun, verb, adjective) and related derivatives. It helps users explore the broader linguistic context of the word and understand its variations and usage patterns.
These functions collectively enhance the user's understanding and mastery of English by providing comprehensive information about words, their meanings, usage, and relationships with other words.
Prototype
Prototype
Due to time constraints, we focused our efforts on prototyping specific sections of the website and utilized component prototypes to streamline our workflow.
Components Protopying
Website Protopying
Retrospective
A thank you letter from our client
Following the delivery of the final result, our client expressed a high level of satisfaction with the comprehensive design of the website. Their positive feedback underscored the successful collaboration and attention to detail that went into crafting each aspect of the website, ensuring that it met their expectations and requirements effectively.