A code - Learning platform Rubrik's Code
Duration of the project: 3 weeks | prototyping Type: individual work
Overview
Project background
I decided to undertake this project due to my passion for coding. The popularity of learning platforms nowadays has led to intense competition amongst them. Younger people and students, in particular, desire a quick comparison of website options and offerings. Having a clear and user-friendly user interface can be exceedingly helpful in this regard.
Rubrik's Code is a small startup established by an experienced software developer. Our aim is to accelerate and optimize Machine Learning (ML) education. To achieve this goal, our unique approach makes the steps in the learning process more understandable.
Our website is divided into two primary sections. Part one focuses on learning machine learning with Python using textbooks. Part two consists of lessons on learning machine learning with C# through videos. The structure is designed to ensure that each step builds on the previous one and provides a deeper understanding.
The lessons are carefully designed to first introduce essential concepts, such as Mathematics for Machine Learning, and then proceed to coding and more advanced steps. This approach ensures that learning is efficient and practical, and allows for a step-by-step building process.
Rubrik's Code is a small startup established by an experienced software developer. Our aim is to accelerate and optimize Machine Learning (ML) education. To achieve this goal, our unique approach makes the steps in the learning process more understandable.
Our website is divided into two primary sections. Part one focuses on learning machine learning with Python using textbooks. Part two consists of lessons on learning machine learning with C# through videos. The structure is designed to ensure that each step builds on the previous one and provides a deeper understanding.
The lessons are carefully designed to first introduce essential concepts, such as Mathematics for Machine Learning, and then proceed to coding and more advanced steps. This approach ensures that learning is efficient and practical, and allows for a step-by-step building process.
Problem
- cluttered interface: if the site has too many elements, text, or images on a page, it can be cluttered and difficult to navigate.
- inconsistent design: inconsistent use of colors, fonts, and layouts can detract from the visual appearance and interfere with the user experience.
- unresponsive design: an outdated or unresponsive design can turn users off and cause them to leave the site.
- Difficult navigation: An unclear or confusing navigation structure can make it difficult for users to find the information they need.
The Goal
Redesigning the exisiting website for better using and aquising more costumers
Responsibilities
User reasearch, Wire friming and visual design
Tools
Google Forms, Figma
The Process
My process will be different in different projects and will be determined by many factors such as the project goals, business needs, complexity of the problem, time, etc. Here I'll describe my process for solving this problem.
Discover
Generate and gather ideas plus look at other ideas
Define
Contarct point of view based on user need
Ideation
Brainstorming and come up with creative solutions
Design
Develop ideation designs
Prototype
Build a Prototype
Discover
User reaserch
We conducted 4 user interviews to confirm our assumptions. The most common feedback from the user interviews was that the site was too chaotic and overwhelming. The people we interviewed confirmed our assumptions.
Key Findings
- The website is confusing.
- There are no categories.
- The content must be clearly arranged.
- No navigation bar.
- The ratings are jumbled.
Sitemap
Solutions
- Dark them website
- Fix navbar on Scroll (Sticky Navbar)
- Implement a split screen to clearly display the subjects.
- Design principles: clean, emotionally connected (colors, icons)
- Utilize the brand color inspired by the C# logo.
- Animation against the image of Robout with Inspiration of Neural Neural Networks
- A preview of the first recording of lectures in both parts of courses
- Use icons to encourage users
Define
User Personas
Transforms an abstract user group and its needs into a real person with real problems, which helps to develop empathy. in this case the person is about 30 and has finished his studies and is looking for a suitable course and wants to find it quickly.
The charts are used to help you better understand who the users are. For example, they show the age and gender of the users
engineer
Düsseldorf, Germany
33
Single
Biography
After his education as mechanical engineer, he find that needs, that he must learn ML and he decieded to use online plattform and the went fo RubrikCode
Needs
- Easy learn plattform
- very clear steps to leran Mashine Learning. Easy lern path
- a blance between price and peformance
- Discout items
Pain points
- He has not to much time to test the lerning method
- He Wants to see the result
- Limited budget
Goals
- to learn ML very fast
- To impliement what he learn in the work
Ideation
Gathering Ideas
As a UX designer for this e-learning platform, I recognize the importance of the landing page as the user's first point of interaction. Therefore, I began the design process with a strong focus on the landing page. My goal was to grab the user's attention and foster enthusiasm, achieved through the use of a full-screen animation. The animation was carefully crafted to resemble the points and connected lines of a neural network, which is at the core of machine learning. Additionally, I utilized a split screen layout to prominently display the two specific course offerings that users are most interested in.
SCREEN DISTRIBUTION
layout test
color test
Design
moodboard
Generate and gather ideas plus look at other ideas
I use a combination of modern, bold colors to encourage the user. The smooth design helps improve the user's eye comfort during use.
I use a combination of modern, bold colors to encourage the user. The smooth design helps improve the user's eye comfort during use.
styleguide
colors
Grid
Desktop Total
Width : 1440 Px
Columns : 12
Margin : 70 Px
Gutter : 70 Px
Width : 1440 Px
Columns : 12
Margin : 70 Px
Gutter : 70 Px
typography
Numbers - Poppins Medium - 48px
Heading 1/2 - Poppins Bold - 36px/33px
Button - Poppins Bold - 23px
Heading 3 - Poppins Bold - 18px
Body - Poppins Regular - 18px
Caption Text - Poppins Regular - 18px
Numbers - Poppins Bold - 48px
Icons
animated icon
The usage of animated icons helps to make the page more interactive.
Buttons
Prototype