Decode your Future
UI/UX CASE STUDY
DESIGNED BY KLAUDI MER
JUNE 2024
SyntaxSchool by Klaudi Mer
Site Map
Wireframes
Created wireframes to get a good sense of the app's features, layout, and how everything will be arranged before moving on to the design phase.
Mobile Screens
Created 30+ screens on this application, including the homepage, courses page, settings, account management, and other numerous pages.
Design Process
#1
Brainstorm
#2
User Flow
#3
Components
#4
Wireframes
#8
Feedback
#7
User Testing
#6
Prototype
#5
UI Design
Project Scope
Styles
Typography & Colors
Inter
Title
Heading
Paragraph
Caption
Nav
#091F5B
#6F96D1
#383838
#6A6969
#F5F5F7
MY ROLE
UI/UX Designer
PROJECT
Mobile Course App
Overview
An innovative mobile app designed to transform how users learn programming and web development. By offering a user-friendly and interactive experience, SyntaxSchool caters to the educational needs of learners in an intuitive and enjoyable manner.
Problem Statement
There is a growing demand for accessible, engaging, and effective programming education. Many existing platforms are either too complex, lack engagement, or fail to provide comprehensive learning experiences. Learners need a reliable app with structured courses, learning paths and support.
Solution
SyntaxSchool addresses these challenges by providing a mobile app that offers a seamless and engaging learning experience for users at all levels of expertise. With Structured Courses, User-Friendly Interface, Personalized Learning Paths, Community and Support, and other useful features it will help users to learn efficiently.
Target Users
The target audience includes individuals new to programming, ranging from high school students to working professionals looking to switch careers. The app focuses on beginners who are looking for a structured, interactive, and engaging way to learn coding with a social media aspect to enhance peer learning and collaboration.
Interactive Courses
A structured curriculum with modules focusing on different programming languages (HTML, CSS, JavaScript, Python, etc.)
Community Feature
A social platform within the app where users can post updates, ask questions, join groups, and collaborate on projects.
Progress Tracking
Gamified progress tracking system, including badges, quizzes, and progress bars.
Personalization
User's can edit their profile section that allows users to manage their information and preferences.
User Research
User Interview: Based on the results of the conducted interviews, most of the target users expressed a strong desire for a programming learning app that could efficiently teach programming while providing interactive features. They highlighted several key aspects that were lacking in existing learning platforms, which informed the development of Syntax School:
Competitive Analysis: Analyzed popular learning platforms (e.g., Codecademy, freeCodeCamp, and Coursera) to identify strengths, weaknesses, and opportunities for improvement in the learning experience.
User Persona
Anna (High School Student): A 16-year-old beginner looking for a simple, structured approach to learning Python, with minimal distractions. Anna values step-by-step tutorials and needs guidance through exercises.
Sophia (University Student): A 21-year-old computer science student seeking to expand her coding skills through hands-on projects and quizzes. She prefers gamified learning and wants to build a professional portfolio.
Understanding the User
User Research
User Persona
Layout Ideation
UX Structure
UI Design
