Digital Design

Unit 1: Living in a Highly Interconnected World

List of Contents

List of Contents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 01

Criterion A – Inquiring and Analyzing

Strand I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 02
Strand ii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 03
Strand iii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 06
Strand iv . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 09

Criterion B – Developing Ideas

Strand I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Strand ii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Strand iii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Strand iv . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Criterion C – Creating the Solution

Strand I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Strand ii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Strand iii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Criterion D – Reflection and Evaluation

Strand I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Strand ii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Strand iii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Citations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Appendix
1
2
 Criterion A: Inquiring & Analysing
Problem Analysis & The Need for a Solution:
In our rapidly evolving technological industry, staying in touch of all daily advancements can prove challenging to a
human being. My goal is to establish a user-friendly website, simplifying the comprehension of software develop-
ment and its related facets. This is to solve the problem at hand to ensure the best results for my clients, which is my
school community, specifically being the class of 2026 and 2027. Understanding the complex field of programming
and its various aspects requires a user-friendly platform. My goal is to create a website that offers an easy-to-use so-
lution, helping people effortlessly learn and explore the diverse areas of software development.

Once a particularly rare and ‘new’ domain, software and software development has extended its influence across di-
verse industries. From website/ web applications streamlining business operations and making them easier to mobile
apps enriching daily experiences, the significance and use of software is undeniable in today’s world. However, the
thought of learning and mastering the skill of software development can often be intimidating, and often discourag-
ing to potential learners, such as my clients. This is where my final product will act as a conduit to bridge the gap be-
tween aspiration and accomplishment to ensure the best way to learn software development.

Moreover, the demand for skilled software developers in the job market is steadily increasing, giving rise for learn-
ing resources of the same. For people who do not have enough financial support for traditional routes such as buying
a heavy course, that lasts for around 4-5 months. And also, for those who do not have enough time to continue with
a course for that many months can deter individuals that are seeking a more direct route to enter in the tech industry,
specifically the software development aspect. A streamlined online platform that offers a comprehensive curricu-
lum in software development addresses this need, providing the learners with relevant skills and pathways to mean -
ingful careers, without the constraints of time/financial needs as the product will be free of cost to the targeted audi-
ence (The school community)

At the heart of the final product lies interactivity and engagement between users. Once the final product is made, it
will have a ‘comment section’ or a ‘question & answer’ section where users can ask questions related to the topic
they are studying. I will also ensure to add some videos that will demonstrate the topic to make the students under -
stand the topic fully. Additionally, by simulating the challenges encountered by professional software developers in
their daily work, learners can grasp theoretical concepts while also honing their critical problem-solving skills which
are indispensable in the field.

In conclusion, I think the best solution for the problem at hand is to create a streamlined website which aspires to
transform the often-overwhelming processing of mastering software development into an accessible, engaging, and
empowering experience. By catering to the needs of aspiring developers, career changers, and enthusiasts, the solu -
tion will cultivate a new generation of proficient individuals poised to shape the digital landscape.

Client Interview –
Client: Class of 2027 & 2026 and Smit Bhor
Interview Date: 22 Aug 2023
Problem: Creating an Educational Website to Learn more about Software Development

Do you feel like you are good in software development?

No, I do not think that I am good at software development, I don’t understand a lot of topics and would like to learn.

Do you think you are Confident in Software Development?

No, I am not confident. I would like to learn more about the same.

What are some aspects that you would like me to add on the website?
3
I would like you to create the website to be easily accessible and to have a welcoming feel so that I do not feel like not
studying.

What are some features that you would like to add to the website?
I would like you to add some gamifications on the website to keep me interested. For example, you could add some -
thing like badges that would be awarded to the students that complete the course.

Should this website be used only by our school?

No, it is not necessary. Other students that are interested in the topic can also use the website to learn more about the
topic.

Should the website be interactive, or would it be too distractive?

Yes, the website should be interactive, it won’t be distractive.

Should the website be free to use?

Yes, in my opinion the website should be free to use as it would help students that do not want to completely indulge
on the website but just want to explore the topic.

How should a student ask a question if they have any regarding the video?
Through a comment section where both, students and teachers can interact to have a better understanding of the topic.

Research Plan:
Priority 1-8 from highest to lowest
Research Question Justification Priority Sources
Aesthetics
Primary:
Interviewing my client to understand
To make an eye catchy and aestheti- what their desired colour scheme is and
cally pleasing website that attracts how they want the final product to look
the customers, the colour scheme is like aesthetically. (Please take a look at
What should the
the most important aspect. I will the client interview above)
colour scheme of the 5
need to understand my client’s needs Secondary:
final product be?
and research about the different Conducting research online to under-
catchy colour themes that are pleas- stand the different colours that work to-
ing to the eye. gether to create the best-looking web-
site.
Link 1, Link 2, link 3, Link 4, Link 5
There are various different effects
used in HTML and CSS that can im- Secondary:
How will I implement
prove the aesthetics of the website, Conducting research online and watch-
the “parallax” effect to
one of them being the parallax ef- ing tutorial videos on how to create the
make the product more 4
fect. I will have to learn how to use effect and how to implement it on the
aesthetic using HTML
and implement the effect in my web- website.
and CSS
site to make it more aesthetically Link 1, Link 2
pleasing and user interactive
How will I use “Gradi- Similar to the parallax effect, gradi- 4 Secondary:
ents” in HTML and ents are another type of effects that Conducting research online and watch-
CSS to make the final are used to enhance the colour ing tutorial videos on how to create the
product more aestheti- scheme of the website and to make it effect and how to implement it on the
cally pleasing more aesthetically pleasing. I will website.
have to learn how to create the effect Link 1, Link 2, Link 3
4
 and how to implement it on the web-
site.
Cost
Primary:
Interviewing my client to understand
their needs about the product. (Please
There are various different ways to
take a look at the client interview
learn software development on the
above)
internet that are paid, and not many
Should the website be
that are free. I will have to look at 5
free to use? Secondary:
existing products and also consult
Conducting research online about the
my client to determine whether or
courses available will help me deter-
not the website should be free to use.
mine if the website should be free to
use.
Link 1, Link 2, link 3, Link 4, Link 5
Customer
Before giving the final product to
Primary:
my client, I will test the product to
Testing it on my own before sending
ensure that there are no errors in the
How will the product the attendance sheet to my client will
program and that it solves the prob-
be tested before giving 8 ensure that the product works perfectly
lem at hand using the most efficient
to my client? and that it solves the problem at hand
way possible. After doing so, I can
and can be a proper solution for my
solve any errors that come up during
client.
testing.
Secondary:
How do potential users I will look at some existing products
prefer to learn new To keep users interacted, I will need that are solving the same problem and
technical skills— to understand what they want, how learn how they are teaching new topics
through interactive ex- they want to learn new topics and 6 to the students and also learn about
ercises, videos, written what interactive exercises they want their mistakes. Doing this, I will be able
tutorials, or a combi- to learn. to create the most efficient solution
nation of these? ever.
Link 1, Link 2, link 3, Link 4, Link 5
Size
In order to create a website that Primary:
functions well, we will have to add Consulting my client to understand
How many total pages
different pages about different topics their needs and also interviewing some
should there be on the 5
that are related to the course and will students who have already completed
website?
contribute to making a student a courses in software development and
software developer. who are willing to give advice.
The problem statement is to create a Primary:
On average, how long
website where a student can learn Consulting my client to understand
should it take to learn
software development in less time, their needs and also interviewing some
all parts of software 7
using which I will create the length students who have already completed
development by using
of the course. courses in software development and
the website?
who are willing to give advice.
Safety
What firewall will I Whenever creating a website, there 8 Secondary:
use to ensure the is always the risk of getting hacked Researching online and learning how to
safety of the website. or getting a virus. To ensure this create a secure website to learn on, so

5
 doesn’t happen, I will have to learn that there are no viruses that harm the
about safety in websites and imple- customer’s computers.
ment them in the final product. Link 1
Function
Secondary:
To keep users engaged on the web-
What interactive fea- Looking at existing products that have
site and not only keep them study-
tures or tools would the same purpose as the proposed web-
ing, but there also has to be some
potential users find site to understand what coding chal-
sort of interactive features that at- 7
valuable in a software lenges they have included to keep the
tract users. I will have to learn how
development teaching audience interested and also keep the
to create these features and how to
product? product user interactive.
implement them.
Link 1, Link 2,
One way to keep the student inter-
Secondary:
How can gamified ested to learn about software devel-
Looking at existing products that have
coding challenges be opment is to give coding challenges
the same purpose as the proposed web-
structured to progres- that include little games. I will have
site to understand what coding chal-
sively teach and rein- to learn how to create these games 6
lenges they have included to keep the
force coding concepts and also how I should implement
audience interested and also keep the
while maintaining user these little games on the website to
product user interactive.
interest? keep the website interesting and in-
Link 1, Link 2, link 3, Link 4
teractive.
Secondary:
How will I implement So that people can comment and
Researching on how to create a com-
the ‘comment’ section communicate with each other, I will
ment box using HTML CSS and
in the product so that have to find a way on how to create
6 Python. Also researching on other web-
people can communi- a comment section or how to imple-
sites that could be helpful to perform
cate with each other ment other websites to perform the
the same task.
and solve their doubts. same task.
Link 1, Link 2, Link 3
Integrating supplementary resources
How can additional Secondary:
like documentation and tutorials en-
learning resources, Looking at existing products that have
hances the learning experience by
such as documentation the same purpose as the proposed web-
offering diverse perspectives and in-
and tutorials, be inte- 6 site to understand how they have incor-
depth understanding. This approach
grated to provide com- porated documentations, and tutorials
caters to various learning styles and
prehensive support to in their website.
ensures a holistic grasp of software
learners? Link 1, Link 2, link 3, Link 4
development concepts.
Material
There are multiple software’s that
Secondary:
aid a person to create a website at
Researching online about the details of
the best possible way. However,
Which application will the different applications and coming
each application has a different envi-
I be using to create the 7 up with the applications which creates
ronment, I will have to research on
final product? the best work environment specifically
which software is the best for me to
for the task at hand.
work to have the best work environ-
Link 1
ment for the task in hand.

Analysis of Existing Products:

In this part of the document, I will be analyzing five already existing software development courses using the
CAFEQUE method. Using this method, I will be able to analyze a product efficiently and to get the best results out of
them. In this section, I will be adding two-three screenshots of the website, with a link followed by a table which
6
 consists of the CAFEQUE analysis of the product. After analyzing all five of these products, I will be able to get in-
spirations and even more ideas on what my final product should look like and overall, aid me in creating the product.
(Please zoom in to see the details of the screenshots)

Product 1:

The first product chosen for analysis is the website Khan Academy. Khan Academy is a free to use website that
teaches mathematics, programming and English to students ranging from 5 years of age to 15. I have included two
screenshots from the website, the dashboard, and the course page, to show both aspects of the website. I will now be
analysing this website using the CAFEQUE method.

Page 1 - Dashboard Page 2 – Course Activity

CAFEQUE Method Justification/Comment

As the organization who built this website, Khan Academy is a non-profit
organization, the website is free to use. They have four different subjects
Cost
that have courses, and all of them are free to use. The organization makes
- Is the website free to use?
money through ‘donations.’ If a person likes the website and their cour-
- How does the organization make
ses, and if they wish to donate some money, they can do that easily by
money?
pressing on the donate button in the dashboard, as seen in the first screen-
shot.
Aesthetics The first thing that I notice and don’t like about the website is that there
- Is the website aesthetically pleasing are almost no colours in the background. The whole dashboard is con-
and welcoming? structed with only white, pink and shades of blue. The whole background
- Does the product catch the eye of the of the website is white, and only the logos of the website is multicolor.
customer? This makes it so that the website is not aesthetically pleasing, as not many
- How accessible is the product? colours are used, which makes it unwelcoming to users as it does not
‘catch’ their eye.

On the other hand, the website of Khan Academy prioritizes accessibility,

mainly serving to users who are unfamiliar with technology. It’s simple
layout, clear navigation, and user-friendly design make interactions easier.
Complexity is avoided and the language is kept simple. Logos on the
course name improves accessibility so that they are easily recognized by
people that are needing it. Additionally, regular updates keep the site rele-
vant and respond to changing user needs. In the second page, you can also
see that a person can easily see the result of their coding challenge on the
right side of the webpage, and if they have completed the coding chal-
lenge, they can easily go to the next challenge by pressing on the ‘next
challenge’ button. Also, for example, if a person wants to revisit the ex-
planation page, they can do so easily using the scroll buttons on the left

7
 side of the page.
Khan Academy serves as an educational platform aiming to provide vari-
ous learning materials for students of different ages. Its primary function
is to offer free online lessons on subjects like math, science, arts, and
more. The website's design appears to be user-friendly, allowing easy
navigation for learners to access different topics and lessons effortlessly.
One of the most unique features of Khan Academy is its vast library of
Function
video tutorials and coding challenges, which simplify complex concepts.
- What is the function of the website?
Interactive exercises after each lesson help reinforce learning, and the
- Is the website easily navigable?
progress tracking system lets users monitor their advancement. The web-
- What are the unique features of this
site keeps users engaged through its points and badges system, adding a
website?
gamified element to learning. As said in the research plan, I wanted to
- How is the website keeping users in-
also find some existing products that have some gamified elements that
terested in their product? are added to learning.

On the other hand, to maintain user interest, the website keeps on adding
new coding challenges and new interactive challenges so that users don’t
think it gets too repetitive. The platform also offers community support
through forums and discussion boards, such as question & answers to
support the users. For example, one user can ask a question that multiple
other students/teachers can answer on the website itself.

Product 2:
The second product that I will be analyzing is Udemy. Just like Khan Academy, Udemy empowers millions worldwide
to enhance their skills, explore new passions, and achieve personal and professional growth. Its user-friendly interface
and expert instructors make learning accessible to all, regardless of location or background. I have included two
screenshots of the website, the dashboard, and the course page. I will be analyzing the product using the CAFEQUE
method below:

Page 1 - Dashboard Page 2 – Course Activity

CAFEQUE Method Justification/Comment

Udemy is a website which is not free to use, most of the courses are paid
as people can volunteer to create a course for the website, which takes
Cost time and effort. The company mostly earns money from the courses itself,
- Is the website free to use? but also earns some money from advertisements that they conduct on
How does the organization make money? their website, as seen on the dashboard (This particular advertisement is
about the website itself and how they have a sale going on, but they also
have some other advertisements aswell.).
Aesthetics The first thing I notice when I open the website is the advertisement, the
- Is the website aesthetically pleasing maker of this website has done a pretty good job at making the advertise-

8
 ment catch the eye, it makes it so that it is specifically what the user first
sees, which intrigues them, which ultimately leads to them buying a
course from the website. On the other hand, I really like the aesthetics of
the website, even though there is not a lot of colour on the website, they
have balanced it pretty well. For example, the login and the signup button
are black and white, and there is a hint of purple in all symbols on the
website, which represent the brand ‘Udemy’. Additionally, in the course
activity again, you can see the same type of colour combination. The
whole webpage is either black or white, but little, small details that con-
tain purple colour such as the video time mover. Additionally, we can also
clearly see in picture two, below the video there are six buttons that are
labeled with each page that show them something related to the video
and welcoming? seen above. For example, the second button “Q&A”, when pressed on it
- Does the product catch the eye of the shows the questions that other students have asked regarding the video,
customer? people can look at it and if they have more questions, they could post it in
- How accessible is the product? that section to be answered by either one of the peers or a teacher.

On the other hand, Udemy also demonstrates commendable accessibility.

Customers can effortlessly locate courses that align with their interests
and learning objectives. The platform's intuitive search and filtering op-
tions empower users to pinpoint courses based on various criteria, ranging
from subject matter to instructor. Furthermore, Udemy's user reviews and
ratings provide valuable insights, aiding learners in making informed de-
cisions about the courses they intend to enroll in. This transparent feed-
back mechanism cultivates a sense of trust and confidence in the selection
process. Just like Khan Academy, Udemy's accessibility-centric approach
plays a pivotal role in creating a seamless and user-centric learning expe-
rience.
Udemy functions as an expansive online learning platform, offering a di-
verse array of courses across numerous subjects for global learners. The
website also has a very easily navigable design where someone who is not
as highly tech-savvy can also use the website. For example, as seen in the
second picture, markings are clearly given to go to each page and there is
even a big button that says ‘Next video’ when the video watching ends
Function (This is not seen in the screenshot shown as the playback time is at the
- What is the function of the website? start of the video). Additionally, on the top right of the webpage you can
- Is the website easily navigable? also see that there are clear markings on how much you have completed
- What are the unique features of this the course, I find this feature interesting as when a student is completing
website? the course, they can see what part of the course they have completed and
- How is the website keeping users in- how much they still have to cover. This can also act as a conduit to moti-
terested in their product? vate the student to complete the course as fast as possible.

On the other hand, I do not think that the creator of the website has done a
good job in keeping the user interested in their product. I personally have
done a course in Udemy, and I have felt like there is only studying, no
gamification involved. The nearest they have gotten to it is a coding chal-
lenge that involves creating a game. I feel like the maker of this product
should have created something that could have ‘gamified’ the experience
of learning to have an overall better experience for the user.

9
Merits Demerits Inspiration Taken
What I really liked about this product is The most obvious con of this website is Following a comprehensive CAFEQUE
how they have maintained the ‘mono- that there are no features that keep the analysis, I would like to use some of the
chrome’ type colour aesthetic while also audience interested, its only studying. If features that are used in this website.
branding it by using a little bit of colour a student does not find something that The first inspiration that I’ve taken is
from their logo (purple). The difference keeps them interested, they might leave the colour scheme, if I plan to create my
between the previous design and this a course halfway, or not start the course. final website which has a monochrome
design is that there is a pattern in the It is essential to have a ‘gamified’ ele- theme, I would like to create it just like
colour combination. For example, they ment in a product to keep the audience how they have used it here as it matches
have used bright and vibrant colours interested. On the other hand, one more perfectly with each other. Another in-
only in the advertisements, which con of this website is that there are al- spiration that I would like to take are
makes it eye catching and the center of most no free courses, every single the buttons that are below the video, I
attention. Also, another thing that I re- course on the website is paid, this can would also like to keep my “Q&A” but-
ally like about this product is how mini- be a downside as some people don’t ton below the video so that if any one of
malistic everything about the website is. have enough financial support to buy the students have a question regarding
There is no clutter, everything just some of these courses. the videos, they could just go to the
matches together and syncs together. Q&A section and get their doubt solved
easily.

Product 3:
The third product that I will be analyzing is yet another course website. I will be analyzing the website Kaggle. Kaggle
is a website where you can specifically only do courses on software development. However, the website not only spe -
cializes in courses, but it also provides users with datasets and also holds competitions such as hackathons. For this
product, I have given three screenshots which show the dashboard of the website, the reading part of the course, and
lastly, the coding challenge part of the course. Note: I am currently doing a course on the website, and I will be using
screenshots from the same.

CAFEQUE Method Justification/Comment

Page 1 - Dashboard Pageis2 a– website
Kaggle Reading which is free to use for experienced
Page 3 - Exercise
software devel-
opers that are looking for datasets/examples of a program they are creat-
Cost
ing. Moreover, students that are looking for courses to learn any aspect of
- Is the website free to use?
software development can do so without any cost, the website does it for
How does the organization make money?
free. The company behind making Kaggle, make money through dona-
tions and charging other companies to run data science competitions.
Aesthetics Similar to the previous designs, the majority of this website also consists
- Is the website aesthetically pleasing of a white backdrop, particularly for the background. However, a touch of
and welcoming? blue and yellow is included on the website, adding a personalized feel that
- Does the product catch the eye of the resonates with the logo colours of the organization. Similar to Udemy, the
customer? creator of this website has skillfully crafted an aesthetically pleasing color
- How accessible is the product? scheme, with white taking the lead and hints of yellow and blue to ensure
brand recognition. Despite these aspects, I find the website lacking a cer-
tain aesthetic charm due to its cluttered design, which doesn’t make it aes-
thetically pleasing. Across all three pages, there's almost no white space;

10
 the content is predominantly text. This might overwhelm visitors, poten-
tially deterring them from engaging. To address this, the creator could
have added some pictures or videos that are related to the topic they are
studying. Such additions could have captured and held the students' atten-
tion by providing diverse study sources through multimedia to maintain
their interest.

On the other hand, I would say that the accessibility of this website is
okay. I do not think that someone who has no experience with computers
could easily go through this website without any help. As the design of
this website is so cluttery and there are no proper instructions as to how
the website is used, it can create confusion in a person, which might result
to them not being able to complete their course or give up in between.
Kaggle's functions are much similar to the previous two products, aiming
to educate students in software development via short and concise courses
that consist of official certificates form the official Kaggle letterhead.
However, its accessibility might prove challenging for those unfamiliar
with educational websites, potentially hindering navigation through the
website. Unlike previous analyzed products like Khan Academy, Kaggle
Function
lacks gamified challenges that often sustain user interest. Distinctively,
- What is the function of the website?
Kaggle emphasizes swift yet informative learning, awarding formal cer-
- Is the website easily navigable?
tificates as credentials. However, its usability might be limited for new-
- What are the unique features of this
comers. In terms of user engagement, unlike Khan Academy's approach,
website?
Kaggle foregoes incorporating interactive challenges, potentially missing
- How is the website keeping users in-
out on challenges and activities that enhance engagement between users
terested in their product? and teachers. Another point to note is that I did not find any place to com-
ment if a student has a question. In that case, they would have to search
the web or look at the hint/solution and trace back their steps to find the
steps to complete the challenge and understand it on their own. One fea-
ture that I really like about this website, just like Udemy is that on the top
right of the screen in picture 3 you can see the completion bar and how
much they have completed, which may again motivate the student to
complete the website.

Merits Demerits Inspiration Taken

The one thing that I really like about One of the biggest downsides of this One very important learning I have real-
this website is the monochrome colour website is the cluttery interface. Having ized after analyzing and using this prod-
pallet. The creator of the website has in- a cluttery interface can interfere with uct is how important not having a clut-
the students learning as it might demoti-
corporated the colours of the logo of the tery interface is to ensure the best prod-
vate them to finish the course. Another
organization very well. As seen in the point that I don’t really like about this uct possible. In my final product, I will
dashboard they have creatively and website is that there are no videos that make sure to leave white space and not
smartly put accents of the blue and yel- explain the topic. The student has to only have a lot of text on the dashboard,
low in the ‘advertisement’ of their own read around 1000 words to learn about but it might also overwhelm the student
courses in the dashboard. Another fea- the topic which they might not under- and make them either disinterested in
ture that I like about this product is that stand only from reading an article. The the course or make them avoid using
examples given from the reading are
a person can check their progress of the the website. Another feature that I
also not very related to the topic. If
course at the top right of the website. there was a video to teach the topic to would like to use for my final product
the students, it would have kept them could be the progress bar in the top
interested and also would be faster for right of the website, that could make it
the students to learn. Another downside so that the student is kept motivated to
of this product is that there are again,
11
 almost no challenges that include games complete the course and not leave it
or anything that could keep the student halfway through.
interested in their website.

Product 4:
The fourth product that I will be analyzing is another course website called Coursera. The goal of this website is simi-
lar to the previous three products, its main objective is to teach students multiple courses. The majority of these cour -
ses, however, are regarding software development, which is why I am going to be analyzing it. I will be only using the
dashboard picture from this website as I don’t have any screenshots from the actual page as a purchased course is re -
quired for it. I will mainly be using this product for dashboard inspiration only.

Pa
ge
1-
Da
sh
bo
ar
d

CAFEQUE Method Justification/Comment

What distinguishes this product from the other analyzed offerings is the
strategic integration of captivating images. The inclusion of pictures
proves highly advantageous, as it not only grabs the attention of potential
customers but also generates a heightened curiosity surrounding the prod-
uct and its contents. The deliberate color palette, primarily composed of
soothing shades of blue and pristine white (with the exclusion of photo-
graphs), not only contributes to an appealing visual experience but also
establishes a harmonious visual identity. Importantly, the website's design
emanates a warm and inviting ambiance, skillfully managing to allure
customers without bombarding them with an overwhelming wave of in-
formation right when they login into the website. Furthermore, the use of
Aesthetics
numerous animations throughout the dashboard enhances the platform's
- Is the website aesthetically pleasing
interactivity quotient, effectively captivating and retaining users' interest.
and welcoming?
This deliberate combination of engaging visual elements and user-
- Does the product catch the eye of the
friendly features positions this product as an exemplary contender in the
customer?
market.
- How accessible is the product?
The interface of this product is known for its exceptional accessibility, es-
pecially for first-time users. Its user-friendly dashboard boasts an intu-
itively organized layout with clear menus, descriptive icons, and tooltips
that provide contextual guidance, facilitating easy comprehension of the
platform's functionality. The design prioritizes visual clarity, incorporat-
ing suitable font sizes and contrasts for diverse users. Additionally, its re-
sponsive design ensures a seamless experience across various devices.
This emphasis on a well-structured, informative, and adaptable interface
underscores the product's commitment to accessibility, making it particu-
larly welcoming for newcomers.

12
 The Coursera website offers a user-friendly interface that makes naviga-
tion seamless. The menus and search functions are straightforward, en-
abling users to quickly find the courses and programs they're interested in
as seen in the dashboard picture. One particular thing that I love about the
Function
website is how they have labeled every single aspect, which makes it eas-
- What is the function of the website?
ily navigable to a customer. One distinctive aspect of the website is the in-
- Is the website easily navigable?
corporation of animations, which not only adds a dynamic element to the
- What are the unique features of this
learning process but also aids in understanding complex concepts through
website?
visual representation. However, what sets Coursera apart is its collabora-
- How is the website keeping users in-
tion with esteemed institutions like Duke University, allowing users to
terested in their product? earn recognized degrees and certifications. This affiliation adds a level of
credibility to the courses offered. Moreover, Coursera also uses videos
and images within its courses. These visual aids make learning more en-
gaging and interactive, helping learners grasp and retain information more
effectively. This makes it so that the students are intrigued with a combi-
nation of multimedia elements.

Merits Demerits Inspiration Taken

What I really like about this product is A notable downside of using the Cours- Following a thorough CAFEQUE anal-
the animations they have used when era website is the cost associated with ysis, there are several elements I'm ea-
creating the product. For example, certain specialized courses. While ger to integrate into my own website.
when you hover on an image it in- Coursera offers a wide range of courses, One standout feature that I'm particu-
creases in size and pops out to the including many free options, some of larly drawn to is the use of animations.
viewer, which shifts their attention to the more advanced or specialized cour- Animations have the power to captivate
that particular object they are selecting. ses often require payment. This pricing users, adding an interactive dimension
Another animation they have included could be a challenge for individuals to the website that not only captures at-
in this website is that as you scroll looking to learn about specific, focused tention but also engages customers ef-
down on the website, each one of the topics, especially if they have financial fectively. Additionally, incorporating
‘images’/course picture comes up indi- constraints. While the quality and repu- images and videos into the dashboard
vidually. This makes it so that the cus- tation of these courses might justify the and course content aligns with my re-
tomer takes a look at each course by the cost, it could still limit access for bud- search question. Visual elements like
order and that they make sure to choose get-conscious learners, preventing them images and videos can convey informa-
their course wisely. from fully utilizing the platform's offer- tion more dynamically, enhancing the
ings. learning experience and making it more
engaging. Which is why I will be doing
the same.

Product 5:
The fifth website that I will be analyzing is Zbyte. I will only be analyzing the dashboard of this website as the courses
are conducted offline. This dashboard is created so that students can enroll in the offline course. Zbyte is a web 3 com-
pany that provides a no code low code platform for creating decentralized applications using blockchain. To use the
platform, they also have courses. I will be analyzing the dashboard for these courses using the CAFEQUE method be -
low:
board
Page 1 - Dash-

board
Page 1 - Dash-

13
 CAFEQUE Method Justification/Comment
When I first look at the website, I find it very aesthetically pleasing and
welcoming because of the different colours that are used in the product,
making it very welcoming to users The clever utilization of a diverse
colour palette contributes significantly to its welcoming aura. One point
to notice is how the creator of the product has made sure that the first
thing that we see on the website is their features, such as how they are the
first low code no code platform to create dApps. We can also see how a
quote is cleverly implemented so that the user can see that they have in-
corporated the use of AI in their platform. One very important detail is
how they have used a hue of purple in the quote to emphasize on the im-
Aesthetics
portant aspects of quote to them. Additionally, the website has some inter-
- Is the website aesthetically pleasing
esting features worth mentioning, such as engaging animations. These an-
and welcoming?
imations include smoothly moving backgrounds (parallax effect) and sub-
- Does the product catch the eye of the
tle but captivating pop-up elements that appear when you move your cur-
customer?
sor. These dynamic visuals don't just make the website look good, but
- How accessible is the product?
they also make the user experience more engaging and interactive.

In regard to accessibility, the website showcases a simple layout and easy-

to-understand navigation even to people who are using the website for the
first time (for example, me). This makes it easy to explore without confu-
sion. As a result, the interface is clean, making sure that important infor-
mation and products are easy to find. By blending an attractive back-
ground, eye-catching product displays, and a user-friendly design, the
website becomes a unified platform that provides an interesting and en-
joyable user experience.
The primary function of this website is to serve as a promotional platform
for the company's low code no code (LCNC) platform. It aims to show-
case the features, benefits, and capabilities of the LCNC platform to po-
tential users, including businesses and individuals looking to develop ap-
Function plications without extensive coding knowledge. Additionally, the website
- What is the function of the website? has a secondary purpose, which is to provide educational resources for
- Is the website easily navigable? students interested in learning how to effectively utilize the LCNC tools.
- What are the unique features of this The website's design prioritizes user-friendly navigation and simplicity.
website? By incorporating minimal clutter and employing a clean layout, it ensures
- How is the website keeping users in- that customers can easily find the information they are seeking. The
terested in their product? streamlined design enhances the overall user experience, allowing visitors
to quickly understand the key points about the LCNC platform and its
benefits, as well as access any available tutorials or learning materials for
students from the website. Instead of some animations, the website has al-
most no details that keep the user interested in their product, which could
be a downside.

Merits Demerits Inspiration Taken

One of the impressive aspects of this One of the most common and easy to One inspiration that I would like to in-
product is the clever utilization of ani- spot downside in this product is that corporate in my document is the colour
mations in its design. For instance, there are no online courses provided by pallet of the website, how the creator of
when you hover over an image, it dy- the company. The only online resources the website has balanced it. They have
namically enlarges and slightly pops that I could find given from the website cleverly used both purple and white

14
 out, effectively capturing your focus on are some YouTube videos that do not color to match each other and create a
that particular item. Additionally, while explain a lot of details about the plat- more appealing colour scheme together.
scrolling down the webpage, each form. Another downside that I found is Another feature that I would like to in-
course image is unveiled individually. that there are no features that are put in corporate in my final product is how
This deliberate sequencing ensures that place to keep the users interested in the they have spotlighted certain phrases
customers view each course methodi- product, I could not find any such tech- and quotes by making them bigger in
cally, facilitating a thoughtful selection nical features that set this product apart size and also by shifting them to the
process. These animation techniques from the other products that were ana- center of the screen.
not only enhance the website's visual lyzed in this document except the
appeal but also guide customers to- colour scheme.
wards making well-considered choices.

After analyzing 5 existing products thoroughly, weighing down their merits, demerits and writing down what I would
like to incorporate in my design I would like to give each design a rating out of 5, you can see what ratings I have
given down below. (The reasonings for the ratings are mentioned in the analysis itself)
Product 1 Product 2 Product 3 Product 4 Product 5
3/5 3/5 4/5 5/5 4.5/5

Design Brief:
After performing immense research, I now know what the final product should look like and what skills I will need to
create the best possible solution to the problem that my client is facing after conducting extensive research, conducting
interviews with my client, and deeply analysing the problem, looking for solutions online and analysing already exist -
ing solutions for the problem that my client is facing. According to the research, the solution to the problem at hand
should be website based. I will be creating this website using HTML and CSS and a bit of Python to add animations
and to make the website interesting and keep the users intrigued.
Out of all the research I have conducted and the products that I have analyzed, I have found one common aspect in all
of them. That being the aesthetic of the website, I have found that each product has a white background and a common
hue of the brand colours on the website to add detail the website. Because of this, I feel like the colour scheme of the
product should be a monochrome, specifically being white and some more colours such as purple. I would also like to
incorporate some animations to the website which attracts users and improves user interactions with the website.

In the research plan part of this website, I created some questions which will help me create the final product easily. In
the table below, you can see the research questions and the findings of the research done which will aid me.

Research Question Research Findings

After consulting my client, they have given me freedom to incorporate whatever
What should the colour scheme of the colour scheme I want to use when creating I can do it. However, after researching
final product be? and finding analyzing existing websites, I have realized that I will be using a mono-
chrome colour consisting of mainly white and black and a bit of purple.
After research, I now know how to use the parallax effect in my website. First, I im-
How will I implement the “parallax” plement the effect using HTML and CSS. By crafting content layers with diverse
effect to make the product more aes- scroll speeds and utilizing CSS properties like "background-attachment: fixed," I'll
thetic using HTML and CSS position elements to achieve a multi-dimensional look. This will create an engaging
user experience and add depth to the overall design.
I will employ gradients using HTML and CSS to enhance the product's visual ap-
How will I use “Gradients” in HTML
peal. By adeptly integrating gradual color blends through CSS properties, I will
and CSS to make the final product
seamlessly merge hues, creating smooth visual shifts. This will incorporate a refined
more aesthetically pleasing
design upon the final product, captivating its users.
Should the website be free to use? After consulting my client and understanding the problem at hand, I have decided
that the website should be free to use. This is because my client wants the website to

15
 be aimed for people that are looking to explore the topic of software development
and not only for people who want to study the subject as a major.
I will ensure my product is ready before I give it to my client by conducting black
How will the product be tested before box testing. This method involves assessing the product's functionalities externally,
giving to my client? without its internal code. This testing will validate its user experience, functionality,
and overall performance and make the product ready for use by my client.
How do potential users prefer to learn After analyzing five already existing products that solve the problem at hand, I have
new technical skills—through interac- realized that students prefer to learn the skills through interactive coding challenges
tive exercises, videos, written tutorials, and having an overall, efficient experience of learning motivates them to learn new
or a combination of these? technical skills.
The duration to master all aspects of software development through the website
On average, how long should it take to
varies based on the topic. Generally, completing the course should take around 2-3
learn all parts of software development
hours. However, actual time may differ according to the specific subject matter and
by using the website?
individual learning pace.
For optimal and user-friendly website security, I will be utilizing a web application
What firewall will I use to ensure the firewall (WAF) like Cloudflare. Cloudflare offers robust protection against various
safety of the website. online threats while being relatively easy to set up and manage, which will help my
coding limitations.
After the research conducted, I feel like Incorporating animations, creative coding
What interactive features or tools challenges, and real-time collaboration features would greatly enrich the software de-
would potential users find valuable in a velopment teaching product. Animations simplify complex ideas visually, coding
software development teaching prod- challenges promote hands-on learning, and real-time collaboration fosters interactive
uct? engagement among users. These interactive elements collectively enhance the over-
all learning journey.
Gamified coding challenges can be structured to methodically introduce and rein-
How can gamified coding challenges
force coding concepts while sustaining user engagement. Start with simpler chal-
be structured to progressively teach
lenges to grasp basics, gradually escalating to complex problems. Award points,
and reinforce coding concepts while
badges, or levels upon completion, encouraging advancement. Incorporate explana-
maintaining user interest?
tory hints and interactive solutions to facilitate learning.
To integrate a 'comment' section for user interaction and doubt-solving, I'll refer to
How will I implement the ‘comment’
online resources like W3Schools for guidance. I'll use HTML and CSS to create the
section in the product so that people
form, input, and database connection. CSS will style the layout, while Python can
can communicate with each other and
add interactive features. Regularly monitoring and moderating discussions will en-
solve their doubts.
sure a helpful and engaging user communication platform.
To create the final product, I will be using Visual Studio Code. It provides an opti-
Which application will I be using to mal work environment which matches the task at hand, facilitating efficient software
create the final product? development. Its versatile features and user-friendly interface make it the ideal appli-
cation for me to create the product in the most efficient manner.

In the current global setting, and context (Globalization and Sustainability), where the world is tightly connected,
and environmental responsibility is crucial, a software development course serves as a bridge between these signifi-
cant ideas. This course aids individuals in learning the creation of computer programs and applications. It also imparts
knowledge on collaborating with people from various regions worldwide. Simultaneously, the website highlights the
creation of programs that consume minimal energy and are environmentally friendly. It underscores the importance
of using computers in an equitable and secure manner for everyone. By offering this course online and discussing
these vital subjects, a commitment to both the planet and the global community is demonstrated. Beyond imparting
computer skills, this approach emphasizes the use of technology in a manner that benefits all and promotes environ-
mental well-being.

Criterion B – Developing Ideas

16
Design Specification:

Materials Required:
- Hardware:
 Laptop – MacBook (Retina, 16-inch, late 2020) M1 Air
 Processor – Apple M1 silicon chip
 Memory – 256GB
 Graphics – Intel Iris + Graphics Card
- Software:
 Google search engine for my research and photos
 Microsoft Visual Studio Code for making the Product.
 Notes in Mac for noting down points.

SUCCESS CRITERIA
ACCESS FM DESCRIPTION
The final product should adhere to the following points
to have a great aesthetic:
- The final should be aesthetically pleasing,
should attract users and not repel them.
- The colour pallet of the website should contrast
perfectly with each other.
Aesthetics
- The colours used in the product should be re-
lated to the topic and should not be too distract-
ing to the students.
- The font size in the final product should not be
less than 11 so that the website is easily read-
able.
The customer of this product is my school community.
Customer This mainly consists of the class of 2026, and 2027 who
are in need for this website.
The final product should be created free of cost. There
should be no additional cost required to create the prod-
Cost uct. Additionally, the courses on the website should also
be free to use, as clearly stated by my client in the client
interview.
As various different users from around the world will be
using the website, it is essential to ensure that the user’s
Safety
personal information isn’t under threat and that the web-
site is free to use.
There are two parts to the size of the website:
1. The course content on the website should be no
longer than five hours.
2. The file size of the final product should be no
Size longer than 3 GB so that it can easily be shared
onwards.
3. The resolution of the website should be 920 *
1080 pixels so that the content of the website is
visible to the customer.
Function Below, are the main functions of the website:
- The final product will teach students the basics
of software development and prepares them for
basic coding activities.
- This product is needed so that my client can un-
derstand and tell people about software develop-

17
 ment and make them explore more about the
topic.
- The product should also be easy to use as some
people that might use the product might not
know how to use a computer.

Feasible Design:
I will be creating 5 feasible designs in this part of the document; these designs will ultimately help me in creating the
final product. I will be creating these feasible designs on Figma (Full design with annotations in the Appendix.). I will
try and work with the best interests of my client to develop these designs. After all of the designs have been com -
pleted, I will rate each one out of ten, offer a brief explanation of the product, and share my thoughts. In this docu -
ment, I will only include two of the main pages, one for the dashboard and the other for the course page.
Annotations in Appendix

Feasible Design #1:

Page 1 - Dashboard Page 2 – Learn

Page 3 – Coding Activity

The above design consists of around 7 pages. This includes the dashboard, the learning page of the website and the
coding activity page, the learning and the coding activity page’s being 2-3 each. The color scheme, predominantly
white with hints of purple, is chosen not only for its visual appeal but also to foster a clean, modern aesthetic that aids
readability and maintains a consistent brand identity. The gamification element, embodied by the prominently posi -
tioned 'Rewards' section, adds an exciting layer to the user experience. By rewarding users for their interactions and
encouraging frequent use, the website aims to boost retention and motivate users to explore various features. This de-
sign isn't just about conveying knowledge but also about creating a dynamic and rewarding journey for every visitor.
However, one thing that I don’t like about this product is the user accessibility. Not every user will be able to use this
product easily. It is quite confusing to navigate. Other than this, I really like this product and I think it will help me im-
mensely in creating the final product.

Feasible Design #2:

Page 1 - Dashboard Page 2 – Learn

18
Similar to the previous design, the above design consists of two main pages, and around 5 sub-pages. I decided to go a
bit different for the colour pallet of the website. Instead of a white background, I went for a more yellowish white. To
match with this unique background color, I chose a gray ribbon, which I think matches pretty well with the back -
ground color. In the dashboard of the product, we can see some recommended courses for the user, which includes a
short description of the course, the skill set required to complete the course. One thing that I changed from the previ -
ous designs, is that instead of having a place on the dashboard to add the ‘your rewards’ part, I created a notification
button which when pressed showed the rewards received. Additionally, another change that was done was that instead
of having two different pages for the learning and the coding activity, I made it into one. Overall, I really like this de -
sign but one thing that I do not like is that every aspect on the website is too close together and compact. Instead of
this one point, I think that this design would assist me immensely in creating the final product.

Feasible Design #3:

Page 1 - Dashboard Page 2 – Learn

Just like the previous design, I decided to only add two pages to this design. The first page is for the dashboard, and
the second one accounts for both, the learn and the practice page. I chose a different color pallet again, I personally,
don’t find this colour pallet good. This is because I find it to be too ‘plain’. The only colours that are used in this de -
sign is aqua and white, which makes the website plain. I also included some aspects of the blue colour theme into the
product as a personal touch. For example, in the dashboard, when looking at the course description, I added blue to the
icons. Additionally, I also added a blue border to the ‘code’ window in the second page. One thing that I don’t like
about this product is again, the user accessibility. I don’t think that someone who is looking at the website for the first
time will be able to easily navigate through it .

Feasible Design #4

Page 1 - Dashboard
Page 2 – Learn
For the third feasible design, I aimed to inject a bit more vibrancy by introducing a wider range of colors. To achieve
this, I incorporated a transparent image with various hues into the overall layout. This infusion of color not only adds
visual interest but also diversifies the previously limited color palette. Furthermore, I noticed that the central ribbon of
the design appeared somewhat vacant in previous versions, so I decided to enhance it by including small text ele -
ments. Additionally, I tried to draw attention to the 'code' window on the second page by surrounding it with a simple
blue border. Despite these improvements, a pressing concern remains regarding the user-friendliness of the design, es -
pecially for newcomers. An example of this could be that the customer would not know where the ‘gamification’ is in
the product, they would not know to go to the notifications bar. I should prioritize making the website more intuitive
and accessible for first-time visitors to ensure a smoother user experience.

19
Feasible design #5:

Page 1 - Dashboard Page 2 – Learn

Page 3 – Learn
This design consists of 3 pages, unlike the previous designs. This design is like a combination of all the designs made
yet. I used the same colour combination of the previous design, being grey and blue. In my ongoing efforts to refine
the design, one aspect that drew my attention was the central ribbon. In previous iterations, it seemed somewhat lack -
ing in substance, prompting me to act. To address this, I decided to introduce small text elements to the central ribbon,
aiming to infuse it with more purpose and utility. This enhancement not only fills the visual gap but also serves as a
means of conveying information or directing users. However, amidst these refinements, a critical concern looms, and
it pertains to the overall user-friendliness of the design, particularly for newcomers. One could envision a scenario
where a new user interacts with the interface but struggles to discern where certain aspect lies within the product. This
issue becomes even more pronounced when it comes to locating the notifications bar. To address this challenge, my
foremost priority should be to make the website more intuitive and accessible, especially for those visiting for the first
time. By doing so, we can ensure a smoother and more welcoming user experience. It may involve implementing
clearer signposts, intuitive navigation aids, or even introductory tooltips to guide users toward key features like 'gami -
fication.' These measures will not only benefit newcomers but also enhance the overall usability and satisfaction of all
users, fostering a stronger connection between the product and its audience.

Justification of the Selected Design:

In this strand, I'll utilize three analysis techniques to identify the final product design that best meets my client's re -
quirements. For each system, I will grade all the designs in the first table out of 8 and give my own comments simulta -
neously, compare the highest-rated design to the success criteria in the second table,
- Rating Each Product out of 8

Design User Friendliness Function Aesthetics Ergonomics Total

1 5/8 7/8 8/8 7/8 27/32
This design has a This design has vari- This design has a great There is just
more complicated de- ous different aspects colour scheme which enough space left
sign and cannot be of code, and little de- contrasts very well. on the website so
browsed by people tails that will keep that the user does
who are underdevel- the user interested in not feel attached
oped in computer the product. when they first en-
20
 knowledge. ter the website.

4/8 6/8 5/8 4/8

This design has a This design has some This design has a good This design has a
more complicated de- interactive ‘easter colour pallet that con- lot of things in-
sign and cannot be eggs’ which can keep trasts with each other, cluded inside one
2 browsed by people the user interactive but I, personally don’t page, which makes 19/32
who are underdevel- and can also make like it as it does not fit the website more
oped in computer the product more ef- the professional theme, congested and
knowledge. ficient. which is required for harder to under-
the product. stand.
5/8 6/8 8/8 3/8
This design has a This design does not This design has a very This design has a
complicated design have any interesting good colour scheme lot of things in-
and cannot be functions that keeps which contrasts with cluded inside one
3 browsed by people the user interacted. each other easily. I re- page, which makes 22/32
who are taking a look However, the design ally like the ‘blue and the website more
at the website for the achieves the function white’ mono-colour. congested and
first time. of the product per- design. harder to under-
fectly. stand.
5/8 6/8 8/8 7/8
This design has a This design has vari- This design has a great There is just
somewhat navigable ous different aspects colour scheme which enough space left
design, this can be of code, and little de- contrasts very well on the website so
browsed by people tails that will keep with each other. I re- that the user does
4 who are taking a look the user interested in ally like the ‘transpar- not feel attached 26/32
at the website for the the product. ent’ image used in the when they first en-
first time if they have dashboard. ter the website.
used virtual educa-
tional websites be-
fore.
3/8 4/8 5/8 4/8
This design has very This design has no This design has a good This design has a
a more complicated interactive ‘easter colour pallet that con- lot of things in-
design and cannot be eggs’ which can keep trasts with each other, cluded inside one
5 browsed by people the user interactive but I, personally don’t page, which makes 16/32
who are underdevel- and can also make like it as it does not fit the website more
oped in computer the product more ef- the professional theme, congested and
knowledge. ficient. which is required for harder to under-
the product. stand.

- Comparing the Highest Rated Design with the Success Criteria:

SUCCESS CRITERIA
ACCESS FM DESCRIPTION
Aesthetics When talking about the Aesthetics of the product, the
product is very aesthetically pleasing, when a user first
looks at the design, it would attract them and not repel
them because of the great colour pallet. The colour pal-
let is minimalistic and great that contrast well together.
Lastly, the font size for the design ranges from 12-24,
21
 which is more than 11 which helps makes the design
easier to understand.
The customer of this product is my school community.
Customer This mainly consists of the class of 2026, and 2027 who
are in need for this website.
As this design is only a design, and has no coding in-
Cost cluded in it, we will not be able to analyze this aspect of
the success criteria.
As this design is only a design, and has no coding in-
Safety cluded in it, we will not be able to analyze this aspect of
the success criteria.
As this design is only a design, and has no coding in-
Size cluded in it, we will not be able to analyze this aspect of
the success criteria.
This design functions extremely well in teaching stu-
dents about software development efficiently. I feel like
this design solves the problem at hand and my client will
be benefited by using it.
Function
Note: As this design is only a design, and has no coding
included in it, we will not be able to analyze some parts
of the functionality of the product.

- My Personal Thoughts on The Highest Rated Design:

Product #1 (Final Chosen Design)

As shown in the process above and because of my personal thoughts, I also believe that the Product 1, is the
best product out of the five created. This is because that I find that out of all five of the products, Product 1
is the most accessible and has the best colour pallet of all. One thing that I think I can improve in this design
is adding more images in the dashboard. As seen in the dashboard, there are no image s. One way I could do
this is by adding images like shown in Design #4. Other than this, I really like this design and I am excited
to use it as a base for my final product.

After creating several feasible designs and listing and weighing the pros and cons of each design, I now have a clear
understanding of how my final product should look and what my target audience wants. After evaluating each design
in the context of the success criteria, outlining my opinions, and assigning each design a score out of eight, I have cho -
sen to use Feasible Design 1 as a base for my final product. This was a challenging decision to make as all five of the
designs had different flaws and different advantages. While there will undoubtedly be changes in the final product, I
will be using Design #1 as the foundation of the final product.

There are multiple things that I could improve to create the final product which include both, functionality, and aes-
thetical points. Below are some of the main points that I think will help me improve the product:
1. Add more pictures to the product, mainly in the home page, this will make the design more interesting to look
at and not only plain.
2. Add a ‘hover’ option on the buttons located at the left of the website so that users don’t get confused to which
button leads were.
3. Include a feedback mechanism where users can provide their thoughts and suggestions about the content or
the website itself. This can help you gather valuable insights for continuous improvement.
4. Conduct user testing with a diverse group of users to gather feedback and identify any usability issues. This
will help refine the user experience further.
5. Provide a support system, such as a padlet link section or contact information, for users who may have ques -
tions or encounter issues while using the website.

As there isn't a dedicated client for this particular product, I wasn't able to directly collect feedback. However, I did
consult a fellow student to get their thoughts on the website's effectiveness in educating users about the evolution of
the web. The student showed genuine enthusiasm for the product, mentioning that it could serve as an excellent tool
for enhancing understanding in this field. They did point out a couple of areas where improvements could be made,
specifically with regard to the second and third pages. The student felt that these pages could benefit from enhanced
22
clarity and more space, which coincided with my own observations. Apart from that, the student found the design to
be impeccable and expressed a keen interest in learning through the website.

In conclusion, the chosen design provides an efficient solution for helping people understand the evolution of the web.
While improvements are needed, particularly in terms of the home page design and color palette, overall, this design
holds great potential in fulfilling its purpose effectively.

Diagrammatic Recreation of the Plan:

23
 D
Criterion C: Creating the Solution
Logical Plan:
Step Details Estimated Time Tools/Function Precautions

Preparation
1. Go to the desired location of creating the file. Make sure that you save the
Create a folder on the desktop named 2. Write click on the location and press on the first op- 4. Finder folder where you can easily
1 minute
‘Course’ tion named ‘Create Folder’. 5. OneDrive access it.
3. Next, rename the folder to be ‘Course’
1. Press Cmd+Space on a MacBook to open up the spot-
light search.
2. In the search bar, search for the Visual Studio code ap- 1. Spotlight Search
Make sure to drag & drop the
plication by typing its name. 2. Drag & Folder
Opening the Code Editor (V.S Code) 1 minute course folder only. No other
3. Open the application by clicking on the name once. 3. OneDrive
folder.
4. Next, using the drag & drop tool, drag the newly cre-
ated ‘Course’ folder to the ‘Explorer’ window in the
code editor.
Creating the Login/Signup Page.
Creating HTML + CSS files. 1. Open the ‘Course’ folder in V.S code and press on the 1. V.S code Make sure to save the files in
‘new file’ button twice. 2. Finder the ‘Course’ folder created
2. Save the first file as Index.html. 2 minutes 3. HTML above only.
3. And save the second file as Style.css. 4. CSS
4. Open both of the files on the code editor.
Creating the signup/login form (Part 1: 1. Open the HTML file named ‘Index.html’ and write 1. VS Code
adding the Login/Signup buttons & html:5 and select the first option. 2. Finder
icon images): HTML 2. In the <Head> tag, link the CSS file using the link 3. Div. tag’s
stylesheet tag. 4. Button
3. Next, in the body tag create a div named ‘Hero’ or any- 5. Link tags
thing of that sort. 6. Drag & Drop
4. Inside the hero div, create another div called ‘Form 7. Img tag
Box’, this will be the div we will be working in.
5. Inside the form-box div, create another div with the
“button-box” class, inside which create another empty
div with a btn id.
6. Inside the “Button-box” div, create 2 buttons, named
‘button’, make sure that the class of the buttons are
‘Toggle-Btn’.
7. Make sure that the text on the buttons are ‘Login’ and
‘Signup’ respectively. End the button-box div.
24
 8. Next, make another div, named social icons. And import
the three pictures named ‘tw’, ‘google’, and ‘fb’, make
sure to put the img tags inside link tabs.
Creating the signup/login form (Part 1: 1. Open the CSS file named ‘style.css’ and start with 25 minutes 1. VS Code
adding the Login/Signup buttons & adding style to the whole document. Make sure to add 2. Finder
icon images): CSS margin to be 0 and padding to be 0 and change the font 3. Width
family to a desired one. I used ‘sans-serif.’ 4. Height
2. Next, add style the hero div which will be used as a con- 5. Linear gradient
tainer for the background image of the webpage. 6. RGBA
3. Make the height and width of the div to cover the full 7. Border-radius
webpage by making them 100% for both width and 8. Variables
height. 9. Functions
4. Next, add a background image to the div, add a linear 10. Img Tag
gradient to the image named ‘bg’ and make sure to add
these rgba codes (rgba(0,0,0,0.4),rgba(0,0,0,0.4)), these
make it so that there is a small coating of light black In-
front of the image to give more character.
5. Next, add the image to cover the whole screen by
adding the position to be center, size to be cover, and
position of the image to be absolute.
6. Next, we add styles for the form-box which includes the
main signup/login elements.
7. Make the resolution of the form-box to be 480x380px,
this will make it a rectangle.
8. Next, make the position relative and also add 6% mar-
gins and add 10px of padding to the boxes.
9. In order to make the corners of the box round, change
the border-radius to be 6%. Also, make the background-
color of the form-box to be white.
10. Next, add the .social-icons tag in the css file to add
styling to the social media logos. Make the margins of
social-icon to be 30px and auto so that there is 30px of
sizing in between each logo and also so that it centers it-
self automatically.
11. Next, add another tag in the CSS file that specifies the
img inside the social icon by adding .social-icons img
{}.
12. Inside the social icons image styling, make the width to
be 30px, margin to be 0px from the top and 12px from
the right. Also add black box-shadow to the images.
13. Next, make the cursor to be pointer so that when a user
hovers over the images, the cursor changes. Lastly,

25
 make the text-decoration to be none to ensure there are
no underlines below the text.
Creating the signup/login form (Part 2: 1. Create a form tag and make the class to be input-group 1. VS Code
Creating the Form) HTML + and add action to be dash.html. This will ensure that 2. Finder
JavaScript when the form is completed and the submit button is 3. Width
clicked, the webpage moves on. Also make sure to add 4. Height
the id of the form to be sign-up. 5. Linear gradient
2. Next, add three input tags and name them ‘User ID, 6. RGBA
Email ID, and Password’. Make the class of each input 7. Border-radius
field to be input-field. 8. Div. tag’s
3. Also add placeholders for each input-field to be respec- 9. Button
tive of the input type. 10. Link tags
4. Next, add another input tag and make the type to be 11. Img tag’s
checkbox and name the class to be chech-box. And then 12. Input type
add a span with the “Remember Password” text in- 13. Class
cluded. 14. Variables
5. Next, add “Required” to every input type to ensure that 15. Functions
users have to sign up to continue using the website.
6. Next, copy the whole form tag and paste it below the
first form. Make sure to change the id of the newly
made form tag to be ‘register’ instead of ‘signup’ to
make sure that we can identify it easily in the
JavaScript.
7. Next, add another input-field and add the class to be
‘email’ for the users to add their email when signing up.
8. And change the placeholders of the input-fields to be as
per your need, related to the function.
9. Next, before the closing body tag, add a script source
tag and link the file ‘script.js’ to the webpage.
10. Create a JavaScript file named ‘script.js’ inside the
Course folder created before.
11. In the newly created document, create 3 variables with
the name ‘x’, ‘y’, ‘z’ respectively.
12. Make the variables so that they fetch the data of the but-
tons inside the form from the HTML document using
the getElementById, adding the id of the buttons.
13. Next, create a function named register() and inside the
function make it so that the three variables move to the
left by -400px, 50px, and 110px respectively.
14. Example: x.style.left = ‘-400px’
15. Do the same for the login and change the name of the
function to be login() and make the style to be 50px,

26
 450px, and 0.
16. Next, in the CSS of the .form-box div (added in the next
step), add overflow to be hidden so that the text disap-
pears when it is not inside form-box.
Creating the signup/login form (Part 1: 1. Go to the CSS file and add specify the class of the input 1. VS Code
Creating the Form) CSS fields by writing .input-group. 2. Finder
2. Make the input group to be 180px from the top, width to 3. Width
be 280px, position to be absolute and for the transition 4. Height
to be 0.5 seconds. 5. Linear gradient
3. Next add css styling to the input-field, make the width 6. RGBA
to be 100% so it covers the whole form-box div, pad- 7. Border-radius
ding to be 10px from top and bottom and 0 from left 8. Div. tag’s
and right, border from the top, right, and left to be 0 9. Button
whereas, add 1px solid #999 borders to the bottom, 10. Link tags
make the outline to be none and also make the back- 11. Img tag’s
ground to be transparent. 12. Input type
4. Next, add margins for the chech-box. Add 30px margin 13. Class
from the top, 10px from the bottom, 10px from the right 14. Variables
and 0 from the left. 15. Functions
5. Next, for the submit-btn, make the width to be 85% so
that it covers 85% width of the form-box div, also add
padding of 10px from top and bottom and 30px from
right, left. Make the display to be block, cursor to be
pointer, margin to be auto, border to be 0, outline to be
none, border-radius to be 30px, text-decoration to be
none, and add background as you like.
6. Next, add CSS for the #left, & #right JS code by just
adding left to be 50px and 450px respectively so that
the JS function works.
Creating the Dashboard
Creating the Navigation Bar: HTML 1. Create an HTML file named dash.html and add the nec- 1. VS Code
CSS + JS essary html formatting to it. 2. Finder
2. In the head tag, make the title of the webpage to be 3. Width
Dashboard. 4. Height
3. Next, open the body tag and create a div named ‘Hero’ 5. Linear gradient
to enclose the main content. 6. RGBA
4. Inside the "hero" <div>, create a <nav> element to con- 7. Border-radius
tain the navigation elements and user information. 8. Div. tag’s
5. Inside the <nav>, add an <img> element with the source 9. Button
set to "logo.png" and the class "logo" for your website's 10. Link tags
logo. 11. Img tag’s

27
 6. Next, Inside the <nav>, add an <img> element with the 12. Input type
source set to "logo.png" and the class "logo" for your 13. Class
website's logo. 14. Variables
7. Next, add the user logo profile picture using the img tag 15. Functions
with the class user-pic and an onclick function to trigger
the toggleMenu() function (more on this later)
8. Create a wrapping <div> with the class "sub-menu-
wrap" and an id of "subMenu" to hold the user's sub-
menu options.
9. Next, inside the "sub-menu-wrap," create a <div> with
the class "sub-menu" to contain the user sub-menu op-
tions.
10. Within the "sub-menu," add user information, including
an image and a name.
11. Next, create another sub-menu options using anchor
(<a>) elements, each with an image, text, and a right ar-
row icon respectively.
12. Finally, add the notification menu by creating a wrap-
ping <div> with the class "noti-menu-wrap" and an id of
"notiMenu."
13. Lastly, Inside the "noti-menu-wrap," create a <div> with
the class "noti-menu" to display notifications.
14. Close all the div’s and nav’s we have used in the step.
15. Next, for the JavaScript link the html to script.js using
the <script src> tag.
16. In the JavaScript document, get references to the "sub-
Menu" and "notiMenu" elements using documen-
t.getElementById("subMenu") and document.getEle-
mentById("notiMenu").
17. Next, define the toggleMenu function to toggle the class
"open-menu" on the "subMenu" element and remove
the "open-notification" class from "notiMenu" if it ex-
ists.
18. Next, do the same for the other notification menu by
defining the toggleNotification function to toggle the
class "open-notification" on the "notiMenu" element
and remove the "open-menu" class from "subMenu" if it
exists.
19. Lastly, check if "notiMenu" has the class "open-notifi-
cation" and use setTimeout to remove the "open-notifi-
cation" class after 3000 milliseconds (3 seconds) if it
does.

28
 20. Next, add styling to the navbar, create a css file and go
to the file.
21. Set default styles for all elements using the universal se-
lector *. Define properties like margin, padding, font-
family, and box-sizing.
22. Next, define the styles for the "hero" class, setting the
width, background color, and text color.
23. Next, style the "nav" element, including the background
color, width, padding, and alignment properties. Adjust
the border to "none" for removing the border.
24. Style the "logo" class with a specific width and cursor
style. Ensure it has no text decoration.
25. Next, apply styles to the "user-pic" class, specifying
width, border-radius, cursor style, and margin.
26. Next, style the "nav ul" to control the width and text
alignment.
27. Next, define styles for "nav ul li" to control the display,
list style (set to "none" to remove bullets), and margin.
28. Style the anchor elements within "nav ul li a" to set the
text color and remove text decoration.
29. Next, define styles for the "sub-menu-wrap," setting its
position, top, right, width, maximum height, overflow,
transition, and z-index.
30. Add styles for the "sub-menu-wrap.open-menu" class to
control its maximum height when the sub-menu is open.
31. Style the "sub-menu" class with background color, pad-
ding, and margin properties.
32. Define styles for the "user-info" class, making it a flex
container and aligning items.
33. Next, customize the "user-info h3" with font weight.
34. Add styles for "user-info img" to set width, border-ra-
dius, and margin.
35. Style "sub-menu hr" with dimensions and background
color.
36. Define styles for "sub-menu-link" class as a flex con-
tainer with text color and margin.
37. Style "sub-menu-link p" to control its width.
38. Customize "sub-menu-link img" with image width,
background, border-radius, padding, and margin.
39. Add styles for "sub-menu-link span" to set font size and
apply a transformation on hover.
40. Modify "sub-menu-link:hover p" to adjust font weight

29
 when hovered.
41. Style the "noti-menu-wrap" with position, dimensions,
overflow, transition, and z-index.
42. Add styles for "noti-menu-wrap.open-notification" class
to control maximum height when notification menu is
open.
43. Style "noti-menu" with background, padding, and mar-
gin.
44. Lastly adjust the font weight to be 600 for text within
"noti-menu p."
Creating the navbar to the left 1. Import the boxicons stylesheet and link it to the html 1. VS Code
file in the head tag. 2. Finder
2. Create a div element with the class “rectangle” and us- 3. Width
ing the h2 element, add a text saying “Welcome”. 4. Height
3. And then create another div below the rectangle called 5. Linear gradient
sidebar. 6. RGBA
4. Inside the sidebar add 8 lists that have link tags with 7. Border-radius
each other. 8. Div. tag’s
5. Make sure to add the class id of each of the list to be the 9. Button
icon that you want to be from the boxicon format. 10. Link tags
6. Next, in the css position them to be hugging the left and 11. Img tag’s
35% margin from the top. Also add 10px margin be- 12. Input type
tween each button. 13. Class
7. In the css, also add hover functions so that when a user 14. Variables
hovers on top of the 15. functions
Creating the flip card containers (HTML 1. Create a <div> element with the class "coursetitle" to 1. VS Code
+ CSS + JavaScript) wrap the course title. 2. Finder
2. Inside the "coursetitle" <div>, add an <h2> element 3. Width
with the course title text. 4. Height
3. Create a <div> with the class "flip-container-wrapper" 5. Linear gradient
to contain the flip cards of the course descriptions. 6. RGBA
4. For each flip card, create a <div> with the class "flip- 7. Border-radius
container." 8. Div. tag’s
5. Within each "flip-container," add a <div> with the class 9. Button
"flip-card" and set an onclick attribute to call a 10. Link tags
JavaScript function "flipCard(this)" when clicked. 11. Img tag’s
6. Inside the "flip-card" <div>, create a <div> with the 12. Input type
class "flip-card-inner." 13. Class
7. Within the "flip-card-inner," there should be two sec- 14. Variables
tions, a "flip-card-front" and a "flip-card-back" for the
front and back sides of the card.
8. Next, in the "flip-card-front" section, include an <h2>

30
 for the course title, an <img> for the course image, and
an <a> with a link to the course page.
9. In the "flip-card-back" section, add a <p> element with
a description of the course.
10. Next Repeat steps 4-9 for each additional course by du-
plicating the "flip-container" structure and updating the
content accordingly.
11. Next, for the CSS add a separate CSS file or include
CSS styles within <style> tags in the HTML file.
12. Add CSS styling for the coursetitle, change the color of
the text to be #525252, font-weight to be bold, and the
font size to be 30px.
13. Next, Style the "coursetitle," "flip-container-wrapper,"
"flip-container," "flip-card," "flip-card-inner," "flip-
card-front," and "flip-card-back" divs using CSS to
achieve the desired layout and appearance.
14. Apply styles to the <h2>, <img>, <a>, and <p> ele-
ments within the card divs to control fonts, colors, spac-
ing, and positioning.
15. Use CSS to create hover effects, transitions, and anima-
tions for the flip cards if desired.
16. Make sure to define styles for links (a elements) to en-
sure they are visually distinguishable.
17. Adjust the CSS styles for individual cards as needed to
differentiate them or create a uniform design for all
cards.
Creating the Code Editor
Creating the Code editors (HTML CSS + 1. Create another HTML document named ‘course.html’ 1. VS Code
JavaScript) 2. Inside the head section, link the CSS stylesheet for this 2. Finder
webpage, the name should be coursestyle.css and also 3. Width
link the stylesheet to font awesome and google fonts. 4. Height
3. Next, in the <body>, create a container using the Boot- 5. Linear gradient
strap container class. 6. RGBA
4. Inside the container, divide it into two columns, one for 7. Border-radius
code input and one for output. You can use Bootstrap's 8. Div. tag’s
grid system for this. 9. Button
5. Create a <div> with the class "left" for the left column. 10. Link tags
6. Inside the "left" <div>, create three sections for HTML, 11. Img tag’s
CSS, and JavaScript code. 12. Input type
7. For each section, include a <label> with the respective 13. Class
icon from FontAwesome and the code type (HTML, 14. Variables

31
 CSS, JavaScript).
8. Below each label, add a <textarea> element for code in-
put. Set the id attribute to "html-code," "css-code," and
"js-code" respectively. Also, add the onkeyup attribute
to each <textarea> and set it to a function called "run()"
(this is typically used to execute the code when the user
types).
9. Create a <div> with the class "right" for the right col-
umn.
10. Inside the "right" <div>, add a <label>` with an icon for
"Output."
11. Below the label, include an <iframe> element with the
id attribute set to "output" where the code output will be
displayed.
12. Link the script.js to the html document.
13. Next, in the already existing script.js code, define a
function called run() that retrieves the content from the
HTML, CSS, and JavaScript text areas, and then injects
the HTML and CSS into an <iframe>, while also exe-
cuting the JavaScript code within that same <iframe.
14. Ensure that the onkeyup attribute in your HTML text ar-
eas (i.e., "html-code," "css-code," and "js-code") is al-
ready set to "run()". This attribute is responsible for trig-
gering the run() function every time a user types in one
of the code input areas.
Creating the ‘Leave a Comment’ Page using Bootstrap
Creating the chat page where a user can 1. Create a new HTML document, named chat.html. 1. VS Code
leave a comment (HTML + JS) 2. Add the standard HTML structure with <html>, <head>, 2. Finder
and <body> tags and copy paste the code created previ- 3. Width
ously for the navbar. 4. Height
3. In the <head> section, include Bootstrap CSS using a 5. Linear gradient
CDN link: <link rel="stylesheet" 6. RGBA
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ 7. Border-radius
css/bootstrap.min.css">. 8. Div. tag’s
4. Inside the <body>, create a container using the Boot- 9. Button
strap container class. 10. Link tags
5. Add an <h1> header with the text "Leave a Comment" 11. Img tag’s
within the container. 12. Input type
6. Create a form within the container with the id attribute 13. Class
set to "commentForm". 14. Variables
7. Inside the form, create three form fields: Name, Email 15. Functions

32
 ID, and Comment.
8. Use Bootstrap classes like mb-3, form-label, and form-
control to style these elements.
9. Add the "Name" field using an <input> element with
type="text", id="name", and name="name".
10. Include the "Email ID" field using an <input> element
with type="email, id="email", and name="email".
11. Create the "Comment" field using a <textarea> element
with id="comment", name="comment", and rows="4".
12. Insert a "Submit" button within the form using a <but-
ton> element with type="submit" and the Bootstrap
class btn btn-primary.
13. Add a <div> with the class "mt-4" below the form for
displaying comments.
14. Inside this <div>, create an <h2> header with the text
"Comments".
15. Add an unordered list (<ul>) with the id attribute set to
"commentList" for displaying comments.
16. Finally, include the Bootstrap JavaScript and your cus-
tom script in the <body> section, if you have a "scrip-
t.js" file, you can add it using <script src="script.js"></
script>. Also, include Bootstrap JS using a CDN link
like <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/j
s/bootstrap.min.js"></script>.

Creation of Solution:
Note that the website is not fully functional yet. To create a full stack website that teaches software development, I will need to add back-end coding, add course-material, and
also hire full time teachers that will consistently focus on the teaching bit of the website to make sure that the website’s course content is up-to-date which will require a
larger team, and more team to prepare.
Opening the code editor
1. Creation of the Login/Signup page

B. Creating the form-box and A. Adding the JavaScript

adding social-icons to the web- function
page C. Creating the Form and
adding the Input-fields
HTML
HTML JS
33
 2. Creation of Dashboard page
A. Creating the Vertical Naviga-
tion Bar
HTML
B. Creating the Navigation Bar

CSS

HTML

CSS

C. Creating the Flipcards

Final Result
JS

34
3. Creating Code Editor

B. Creating the Code Editor - HTML A. Creating the Code Editor - JS

Final Result

4. Creating the Comment/Chat Page

B. Creating the Chat Function - HTML A. Creating the Chat Function - JavaScript

Final Result

Changes Made to Original Plan:

35
Aspect Changed Step Number Original Plan Changed Plan Screenshot of the Changes

I thought of adding the login/ Changed Plan

In the original feasible plan created
signup page to the website to en-
in the Criterion B part of this docu-
Login/Signup Page 1-3 sure that the end user of the prod-
ment, I did not plan to create a lo-
uct can have a more personalized
gin/signup page for the website.
experience on the website.

On the other hand, when I created

the final product, I made the
In the original feasible plan that I
course webpage a more minimal-
created in the Criterion B part of
istic design where there are three
this document, I created a course
boxes on the left of the website
Course Activity 4-5 website where I did not have any
where they can add HTML, CSS
output of the code inside the web-
and JavaScript code. And on the
site which would make the website
right side of the website, we can
unfunctional.
see the output of the code they Original Plan Changed Plan
added to the left.
However, on the final product of Changed Plan
In the original plan, I aimed to cre-
the website, I created another
ate a chat function at the bottom of
Chat Page 6 webpage as a whole, where peo-
the page where the user could write
ple would be able to chat with
the comments regarding the course.
each other.

Final Product Screenshots:

Login Page Dashboard Course Activity Comment Page

36
 Criterion D: Evaluating the Product
Detailed and relevant testing methods to generate accurate data.
1. Alpha Testing

Alpha testing is a quality assurance process led by the product's developer, and I will personally be overseeing this testing phase. Throughout this evaluation, I will assess dif -
ferent elements of the system, detailing the anticipated results, the actual outcomes, and offering insights in the comments column to describe the functionalities of the tested
components. Additionally, I will include relevant screenshots to visually demonstrate the final results of the testing process.
Part of the System Tested Expected Outcome Final Outcome Comments
Login/Signup Page When clicked on either one of the buttons, The outcome is as expected A login page is essential for security and a
the form inside the rectangle should be cess control. It verifies users' identities, pr
changed to be of the respective function. venting unauthorized access and safeguar
For example, when I click on the signup ing sensitive information. It also enabl
button, an animation should be shown, and personalization and user-specific functio
the form should be changed to signup. If ality, enhancing the user experience. Log
every box in the form is filled appropriately pages are a fundamental component of o
and the button is pressed, the person should line systems, ensuring safety and tailor
be redirected to the dashboard of the web- interactions, being the intention of inclu
site. On the other hand, if the form is not ing it in my website.
filled appropriately, a notification should
be shown, and the user should not be redi-
rected.

37
Dashboard Page Clicking on the back part of the course in- The outcome is as expected. The center of a website for a software d
formation, it should show a flip animation velopment course is the dashboard.
and should increase the size of the box and streamlines access to schedules, announc
also show the information of the course. ments, and course materials by offering
Additionally, hovering over the go to course intuitive user interface. While students c
button should show a blue overlay and also track their progress, assignments, a
should have a highlight. When clicking on grades in real time, instructors can regula
this button, it should be redirected to an- the content. This primary hub is essent
other webpage. for a successful course website because
improves accessibility, communication, a
personalized learning.
Ribbon When clicking on the profile button in the The outcome is partially expected as not all A ribbon on a website typically consists o
ribbon, a drop-down menu opens up where buttons work. few key buttons like "About Me," "Conta
there are 5 different options and when Me," and "Profile." These buttons are e
clicked on, they should go to the respective sential for providing users with quick a
pages. Additionally, when clicking on the cess to important information and featur
notification button, it shows the notification on the website. It is placed at the top of t
of how many ‘badges’ the user has re- webpage and is purple in color.
ceived.
Course Page When adding HTML code, CSS code, & The outcome is as expected. The main idea behind the creation of th
JavaScript on the left side of the webpage, website is teaching people software dev
it should show the live updates of the code opment. The user will be able to perfor
on the right side of the webpage. this by adding code into this webpa
through tutorials on the website to learn.
Chat Page When adding content in the form boxes on The outcome is as expected This webpage was created in order for va
the website and pressing on submit, it ous different users to use so that when o
should show the comment, with the name of of them has a question, they can comme
the person, email id and the comment they on the page and someone else could look
wrote on the page. the question and answer it through th
page.

38
 Contact Me Page When the user has filled in their responses, The outcome is as expected This feature was added so that when a us
they can press on submit and the text box has a question of how I created this produ
resets so that there is nothing included in it. or has a suggestion, they can contact me.
If the user presses the submit button with-
out filling in the information, a text box
saying "Please fill this” comes up.

2. Beta Testing

Beta testing typically involves end-users of a product, which in my case would be my clients. In order to gather intel of the functionality of the website and how well it solves
the problem at hand, I will be asking four peers to answer some questions regarding the website. To facilitate this, I'll employ Google Forms for the interviews, and you can
review the results in the table below. (Please zoom in as needed for better visibility.)

Question Answer
Do you like the color pallet of this website?

Do you find this website interactive and interest-

ing?

39
Would you use the website to learn more about
software development?

Did you find the "Easter Eggs" interactive? (No-

tification, Profile Menu, Chat Option)

What Could I have improved in this product?

40
 Comparison Against Success Criteria:
Success Criteria Comments
The final product should adhere to the following points to have The final product created is very aesthetically pleasing as also
a great aesthetic: seen in the beta testing above, this will attract users and not re-
- The final should be aesthetically pleasing, should at- pel them. Additionally, I also think that the color pallet of the
tract users and not repel them. website contrasts with each other moderately well which
- The colour pallet of the website should contrast per- makes it appear to be a bit dull, which I would like to improve
fectly with each other. on for example, in the dashboard the colour of the ribbon and
- The colours used in the product should be related to the colour of the main page does not match at all. Lastly, the
the topic and should not be too distracting to the stu- font size that is used in the website is not less than 11, which
dents. makes the website easily readable to customers.
- The font size in the final product should not be less
than 11 so that the website is easily readable.
The customer of this product is my school community. This
mainly consists of the class of 2026, and 2027 who are in need N/A
for this website.
The final product should be created free of cost. There should The final product was created using Visual Studio code with
be no additional cost required to create the product. Addition- the font, images and tutorials taken from the internet free of
ally, the courses on the website should also be free to use, as cost. This means that the website will be free to use for the
clearly stated by my client in the client interview. customers.
As various different users from around the world will be using The website is only a dummy, I did not have enough time to
the website, it is essential to ensure that the user’s personal in-
create a full stack developed website where I could have incor-
formation isn’t under threat and that the website is free to use.
porated both, front-end and back-end, thus this website is not
safe and is not ready to be distributed yet.
There are three parts to the size of the website: I was not able to create the course content on the website as I
4. The course content on the website should be no longer did not have enough time to create a full tack developed web-
than five hours. site, and that I create the webpage where the user can code. On
5. The file size of the final product should be no longer the other hand, the final file size of the folder with the source
than 3 GB so that it can easily be shared onwards. code is only 500mb, which will make it so that the code can be
- The resolution of the website should be 1920 * 1080 easily shared onwards and can be uploaded to the web easily
pixels so that the content of the website is visible to incase the project is open source. Lastly, the resolution of the
the customer. website is indeed 1920 * 1080 pixels.
Below, are the main functions of the website: As mentioned before, I was not able to create the course con-
- The final product will teach students the basics of soft- tent and the back end of the website as I was not given the
ware development and prepares them for basic coding right amount of time to perform it, it does not teach the stu-
activities. dents basics of software development, however it does prepare
- This product is needed so that my client can under- them for basic coding activities because of the code window
stand and tell people about software development and that I have created where users can code and see live updates
make them explore more about the topic. of the code they have created. On the other hand, I do think
that this website is pretty easy to use, to even people that might
- The product should also be easy to use as some people not know a lot about how to navigate through a website.
that might use the product might not know how to use
a computer.
Future Scope of Improvement:
In retrospect, while developing a software education website, I've recognized three core areas for significant improve -
ment in future iterations. Firstly, refining the backend infrastructure is crucial for a seamless user experience, focus-
ing on optimizing database structure and error handling. Secondly, enhancing the color palette for a visually appeal-
ing and accessible design is paramount. Lastly, incorporating more relevant images to complement content and facili -
tate understanding will elevate the overall quality of the learning experience.

The first and the most important aspect that I think I could have improved on when creating this product is incorpo-
rating the back end. A well-structured and fully functional backend is the backbone of any web-based application.
For the next iteration, I plan to invest more resources and effort in optimizing the database design, refining server-side
logic, and ensuring seamless integration of APIs. Firstly, the login and signup page could have been more effectively
integrated with a database. This integration would have allowed for the secure storage of user credentials, such as
usernames and passwords. Consequently, it would enhance the security of the authentication process, making it
more resilient against potential breaches, which the present product does not have. Moreover, a database-backed
system would have enabled the implementation of features like password reset and user profile management, which
41
are common and expected functionalities in many web applications. By doing so, user engagement and trust in the
platform would have been substantially improved. Secondly, on the 'Contact Me' page, the incorporation of Artificial
Intelligence (AI) could have brought significant enhancements. Rather than relying solely on manual email submis-
sions, an AI-driven solution, such as a chatbot, could have been implemented. This chatbot could handle user in-
quiries and send email notifications or responses automatically. Users could interact with the AI, seeking answers to
questions or assistance with their queries. This not only makes the communication process more efficient but also cre -
ates a more user-friendly and responsive environment. The incorporation of AI on this page would offer the added
benefit of providing users with 24/7 support, making the website more accessible and valuable to its audience. In con-
clusion, by improving the backend infrastructure through database integration and the addition of AI-driven features,
the website's functionality, security, and user experience could have been significantly enhanced. These refinements
would have not only ensured smoother and more secure interactions but also made the platform more responsive and
user-centric, ultimately resulting in a more successful product.

On the other hand, the second aspect that I think I could have improved on when creating the product is having a bet-
ter color palette, especially in the course and the dashboard sections. Color plays a vital role in web design and user
experience. It can have a significant impact on how users perceive and interact with a website. In the case of my
product, there were a few notable areas where a more thoughtfully chosen color palette could have made a substantial
difference. Specifically, the dashboard suffered from a lack of visual diversity, primarily featuring blue and white
colors. This monochromatic scheme, while often associated with professionalism, can make the dashboard appear
dull and uninspiring. A dashboard is a central hub of interaction for users, and its aesthetics can influence their percep -
tion of the platform. Diversifying the color scheme on the dashboard, introducing complementary or contrasting col-
ors, or incorporating brand-specific colors could have added visual interest and made it more engaging. In the case of
the course section, the predominant use of black color was unrelated to the dashboard and didn't harmonize with the
overall website theme. This inconsistency can create a jarring user experience, as users might expect a cohesive de-
sign throughout the site. Colors have the power to evoke emotions and set the tone for different sections of a website.
In this context, using a color palette that aligns with the website's overall design and branding would have created a
more coherent and pleasing user journey. Another issue was the lack of consistency between the course and dash-
board sections with the login and signup page. While a colorful login and signup page can be visually appealing and
inviting, its stark contrast with the dashboard and course sections can create a disjointed user experience. Users
might find it confusing or unprofessional when transitioning between these parts of the website. Creating a more
seamless transition in terms of color and design between these sections could have made the user experience more co -
hesive and aesthetically pleasing. For the next time, I think I should consider that a well-considered color palette is
not just about aesthetics; it's about enhancing the overall user experience. By diversifying and harmonizing the color
choices in different sections of the website, it's possible to create a more engaging, visually appealing, and consistent
platform that better reflects the brand and the product's purpose.

Furthermore, the third aspect that could have been improved when creating the product is the incorporation of more
relevant images related to the topic. Images are a powerful tool in web design. They can enhance the user experi-
ence by providing visual context, breaking up text, and making the content more engaging. In my product, a lack of or
insufficient use of images related to the topic had a noticeable impact on the user experience. To illustrate, in an edu -
cational or informative platform such as a course section as seen in my case, the inclusion of relevant images can sig-
nificantly improve the comprehension and retention of the material. Visual aids help to reinforce concepts, making
complex information more digestible for learners. These images can take the form of diagrams, illustrations, info -
graphics, or real-world examples that is related to the topic. By adding more such images in the course section, the
educational value of the platform could have been enhanced. In the dashboard, images can play a role in making data
more accessible and engaging. For instance, if the dashboard presents statistics or progress tracking, incorporating
charts, graphs, or visual representations of the data can make it more intuitive for users to understand their perfor-
mance and achievements. This can also add a layer of interactivity and personalization to the dashboard, making it
more user-centric and encouraging user engagement. Additionally, on the login and signup page, imagery can be used
to convey the essence or purpose of the product. High-quality and relevant images can set the tone for the platform
and help users quickly grasp what the website is about. This can be particularly effective in conveying the product's
value and capturing the interest of potential users. Incorporating more relevant images related to the topic is not just
about aesthetics but about enhancing the educational, informative, and engaging aspects of the product. By utilizing
images strategically in different sections, it's possible to make the platform more user-friendly, visually appealing, and
effective in conveying its purpose and content.

In summary, upon reflecting on the development of our software education website, three pivotal areas for improve-
ment have come to light. Firstly, it is imperative to refine the backend infrastructure to ensure enhanced functionality
42
and security. This involves optimizing the database structure and integrating AI for improved user interactions. Sec-
ondly, the importance of a diverse and cohesive color palette cannot be used in the future. This is crucial for creating
a visually engaging and consistent user experience. It extends to various sections of the website, including the dash-
board, course materials, and login/signup pages. Lastly, the incorporation of relevant images plays a vital role in mak-
ing the educational content more engaging and understandable. These images serve as powerful tools to enhance
comprehension and user engagement. Lastly, by addressing these three critical areas in future iterations, I can trans -
form this website into a more functional, visually appealing, and educationally effective platform. These enhance-
ments will not only improve the overall user experience but also bolster the ability to convey the website's purpose
and content to a broader audience.

Impact on Audience & Client:

I have created a website that helps students that are around 10-15 age learn more about software development by cre -
ating a platform for them where they can code and see their live updates. This website is strategically crafted to have a
significant impact on a broad audience, with a special focus on teenagers. Once the site is launched, its reach won't be
limited to just shaping the perspectives of the younger generation; it will also usher in added responsibilities and av-
enues of growth for my client, who is the founder. Let's delve into the potential effects on the end users of this prod -
uct.

First and foremost, the impact on aspiring software developers, career changers, and enthusiasts is the reduction of
barriers to entry. The traditional approach to learning software development can be quite daunting, discouraging many
from pursuing this field. However, my user-friendly website aims to simplify this process, making it more approach -
able and less overwhelming. As a result, it is likely to attract a more diverse range of individuals, including those from
non-technical backgrounds, who might have previously been deterred by the complexity of conventional resources.
This inclusivity will enrich the tech industry with fresh talents and perspectives, fostering a more diverse and innova-
tive digital landscape. Furthermore, the impact of empowerment cannot be understated. My website's user-friendly in-
terface, along with its interactive resources, has the potential to instill confidence and self-sufficiency in learners. This
empowerment will enable users to take control of their learning journey, resulting in accelerated skill development.
With newfound proficiency in software development, individuals can progress in their careers or personal projects
more efficiently. My website's effectiveness in building self-reliance and skill mastery is a direct response to the over-
whelming nature of the subject matter and the conventional educational resources available.

Additionally, the impact of this website on its intended audience is promising. By reducing barriers to entry and em-
powering learners, the website has the potential to cultivate a new generation of proficient individuals, poised to shape
the digital landscape. This transformative experience holds the promise of a more inclusive, diverse, and innovative
tech industry, ultimately enriching the digital world we live in today.

Lastly, in my opinion, the development of this website also establishes a critical link to the global context of this unit
being globalization and sustainability. In an increasingly interconnected world, where technology transcends geo-
graphical boundaries, the ability to equip individuals from various corners of the globe with software development
skills is vital. The digital skills imparted by this platform have the potential to empower individuals from diverse back-
grounds, contributing to a global workforce that is well-equipped to participate in the digital economy. This not only
aligns with the principles of globalization but also fosters sustainability by enabling individuals to adapt to the chang-
ing job market, reducing unemployment, and supporting economic growth. Furthermore, the online nature of this
learning platform minimizes the need for physical resources, making it an environmentally sustainable approach to
skill development. By offering accessible education to a global audience and reducing the environmental footprint of
traditional education, this product contributes to both the globalized workforce and the principles of sustainability.
go

43