UNIVERSITI TEKNOLOGI MARA

FACULTY OF COMPUTER AND MATHEMATICAL SCIENCES

ICT551
ASSIGNMENT 1: REVIEW MOBILE AND WEB APPS

Prepared By:

STUDENT NAME STUDENT ID

ANITH ALIAH BINTI BAHARUDDIN 2021617562
NURUL QISTINA BINTI OSMAN TALIB 2021816376
NUR FARAH AMIRA BINTI SHAHIDAN 2021829002
NUR IZZAH BINTI ASMADY 2021816782

Prepared For:
ROMIZA BINTI MD. NOR

Submission Date:
29TH April 2022
Table of Contents

Introduction………………………………………………………..…………………
1.0 Mondly……………………………………………………………………………
1.1 Good design
1.1.1 Imitate real world……………………………………………….
1.1.2 Good iconography……………………………………………...
1.1.3 Flexibility in accessing information……………………….…..
1.2 Poor design
1.2.1 Inconsistency background colour…….………...…………….
1.2.2 Distracted movement word…………….……….….…………
1.2.3 Irregular spacing between phrases………………………….
1.3 Improvement suggestions for Mondly…………….…...………………
2.0 Busuu……………………………………………………….……...…………….
2.1 Good design
2.1.1 Level of education……………………………..………………
2.1.2 The used of floating button…………..……….………………
2.1.3 Bulb icon showing tips……………………..………….………
2.2 Bad design
2.2.1 No translator…………………………….…..…………..…….
2.2.2 Unexpected information…………………....………………….
2.2.3 Useless calendar…………………………...………………….
2.3 Improvement suggestions for Busuu………………..…………………
3.0 Memrise……………………………………………..……………………………
3.1 Good design
3.1.1 Themes option………………..……………………..………………..
3.1.2 Unique way to display instructions and using right colour..
3.1.3 Flexibility………………………………………………………..
3.2 Bad design
3.2.1 Inconsistent design………………………………………..….
3.2.2 Unfamiliar icon……………………………………………..….
3.2.3 Too much white space…………………………………..…...
3.3 Improvement suggestions for Memrise………………………………..
4.0 Duolingo……………………………………………………………...………….
4.1 Good design
4.1.1 Progress bar………………………………………..………….
4.1.2 Minimalist design……………………………………..……….
4.1.2 Colour differences……………………………………………..
4.2 Poor design
4.2.1 Layout is too squeeze-in……...……………………..……….
4.2.2 Fonts are too small/faded………………………..…………..
4.2.3 Unclear blank spaces……………………………..………….
4.3 Improvement suggestions for Duolingo………….…………..………..
5.0 Speak7…………………………………………………………..……………….
5.1 Good design
5.1.1 Highlighted word……………………………………………….
5.1.2 Visual divider…………………………………………………..
5.1.3 White background is used…………….……..……………….
5.2 Bad design
5.2.1 Inconsistent page design………………………..…………...
5.2.2 Poor alignment……………………………………..………….
5.2.3 Lengthy navigation menu……………………………………..
5.3 Improvement suggestions for Speak7…………………………………
6.0 Conclusion………………………………………………………………………

7.0 References…………………………………………………………..….……….
Table of Figures

Figure 1: Mondly mobile application ................................................................ 2

Figure 2: Review of Mondly ............................................................................. 3
Figure 3: Screenshot 1 ..................................................................................... 4
Figure 4: Screenshot 2 ..............................................…................................... 5
Figure 5: Screenshot 3 .................................................................................... 6
Figure 6: Screenshot 4 .................................................................................... 6
Figure 7: Screenshot 5 .................................................................................... 7
Figure 8: Screenshot 6 .................................................................................... 7
Figure 9: Screenshot 7 .................................................................................... 8
Figure 10: Screenshot 8 ................................................................................... 9
Figure 11: Busuu mobile application ................................................…............ 11
Figure 12: Review of Busuu .............................................................................. 12
Figure 13: Review of Busuu ............................................................................ 12
Figure 14: Screenshot 9 .................................................................................. 13
Figure 15: Screenshot 10 .................................................................…........... 13
Figure 16: Screenshot 11 ................................................................................ 14
Figure 17: Screenshot 12 ................................................................................ 14
Figure 18: Screenshot 13 ................................................................................ 15
Figure 19: Screenshot 14 ................................................................................ 15
Figure 20: Screenshot 15 ................................................................................ 16
Figure 21: Screenshot 16 ................................................................................ 17
Figure 22: Screenshot 17 ................................................................................ 18
Figure 23: Memrise mobile application ..............................…......................... 20
Figure 24: Review of Memrise ...........................................…......................... 21
Figure 25: Screenshot 18 ....................................................………................. 22
Figure 26: Screenshot 19 ................................................................................ 22
Figure 27: Screenshot 20 ............................................…................................ 23
Figure 28: Screenshot 21 .............................................……........................... 23
Figure 29: Screenshot 22 ..............................................…………................... 23
Figure 30: Screenshot 23 ............................................................………........ 24
Figure 31: Screenshot 24 ................................................................................ 24
Figure 32: Screenshot 25 ......................................................................…....... 24
Figure 33: Screenshot 26 ......................................................................……… 24
Figure 34: Screenshot 27 ................................................................................. 26
Figure 35: Screenshot 28 ..............................................................…............… 26
Figure 36: Screenshot 29 ................................................................…….......... 26
Figure 37: Screenshot 30 .................................................................……......... 27
Figure 38: Screenshot 31 ................................................................………....... 28
Figure 39: Screenshot 32 ..............................................................……............ 28
Figure 40: Duolingo website application .....................................…….............. 30
Figure 41: Review of Duolingo ...............................................………............... 31
Figure 42: Review of Duolingo ..............................................…........................ 31
Figure 43: Screenshot 33 ......................................................………................ 32
Figure 44: Screenshot 34 ......................................................………................ 33
Figure 45: Screenshot 35 .................................................………..................... 34
Figure 46: Screenshot 36 ...........................................…………........................ 35
Figure 47: Screenshot 37 .........................................…………......................... 36
Figure 48: Screenshot 38 .........................................………….......................... 37
Figure 49: Speak7 website application ....................…………........................... 39
Figure 50: Review of Speak7 ...................................……………....................... 40
Figure 51: Screenshot 39 .............................…………………........................... 41
Figure 52: Screenshot 40 ..............................………………............................. 42
Figure 53: Screenshot 41 ..............................…………..................................... 43
Figure 54: Screenshot 42 ...............................……........................................... 44
Figure 55: Screenshot 43 ...............................………........................................ 44
Figure 56: Screenshot 44 ........................…………........................................... 46
Figure 57: Screenshot 45 ........................…..................................................... 47
Introduction

A mobile app is a software application that developed for small and wireless
computing devices like smartphone and tablet. While website is a set of related web
pages located under a single domain name. It is typically produced by a single
person or an organization. One of the most important things for both mobile app and
website is a user interface (UI). User interface is the point at which human users
interact with computer, website or application. The goal of effective UI is to make the
user’s experience easy and intuitive, requiring minimum effort on the user’s part to
receive maximum desired outcome. UI is essential to apply because it has so many
benefits for both designer and users. For example, UI will give users confidence in
your product. A good UI will also help reduced cost. This is because when a
designer has created a website or mobile app with a high-quality UI, they will find
that their customer support line will face less problems on the issues that users face
while using the website or mobile app. Hence, designers need to try to achieve
designing a good UI that can also fulfilled users’ satisfaction.

1
Mobile Application

1.0 Mondly

Introduction

Figure 1:Mondly mobile application

Mondly is an EdTech company. It is based in Brasov, Romania and was

founded at the end of 2013. The company launched the first app in May 2014 on
iTunes and Google Play in June 2015. In August 2016, they launched the first
chatbot with speech recognition on both iTunes and Google Play. Mondly develop a
premium language learning platform which includes website and apps. Both the
website and apps have free and paid courses for 33 languages. They also offer
lessons in virtual and augmented reality.

2
Review on Mondly:

Figure 2: Review of Mondly

3
1.1 Good design

1.1.1 Imitate real world

Figure 3: Screenshot 1

This application used a simple word to make user understand about the instruction.
User will not have a problem to register this application for learning the language that
they want. The use of the sentence “I speak” and “I want to learn” are easy word that
can make user easily understand the aim of this application. Other than that, the use
of the simple word and sentence also will make people become more interesting to
use this app because it imitates a real-world situation.

4
1.1.2 Good iconography

Figure 4: Screenshot 2

Generally, icons are used to present the subjects. Icon is an important thing in
deliver message to user to decide what is the next step they need to do. In addition,
icons are also suitable for all type of users to make they understand the meaning.
The use of the dialog icon with label beginner, intermediate and advanced is a very
good design interface that have been used by this application. In this picture, we can
see that for beginner user it has only a dialog icon while for intermediate it has two
dialog icon and three dialog icon for advanced user.

5
1.1.3 Flexibility in accessing information

Figure 5: Screenshot 3 Figure 6: Screenshot 4

If user click the lessons button, the output will come out just like the first picture. At
the same time, if user click the categories button at the shortcut menu below of the
application, and choose the category that they want to learn, it will also come out the
same output just like the first picture. Therefore, the repetition output happens make
user easily to access information or lesson in this application anywhere.

6
1.2 Poor design

1.2.1 Inconsistency background colour

Figure 7: Screenshot 5 Figure 8: Screenshot 6

From the two picture above, we can observe that there is an inconsistency
background colour which light blue and purple showing in this application. The
inconsistency in the colour palette as seen between these two pages can leave
audience or users confused as it does not maintain a recognizable look across the
different pages. This is also not desirable for the branding of the application.

7
1.2.2 Distracted movement word

Figure 9: Screenshot 7

The sphere element pictured acts in a globe-like manner where sizing of words
change according to movement of the globe, the closer it is to the user, the bigger.
Words or phrases can be selected to get a listen of the pronunciation and translation
of the word. Movement of words being influenced by the positioning of phone
distracts users from effectively being able to select and learn the words. In addition,
it will also make user lost interest to use the app because the moving word distracted
user to learn the language.

8
1.2.3 Irregular spacing between phrases

Figure 10: Screenshot 8

Irregular spacing between elements opens the opportunity for big blank spaces to
not being utilized and creates an awkward sense of direction for users when
interacting with these elements. The use of a sphere as the interacting platform for
the learning feature minimizes the complete use of the whole screen as the
background space surrounding the sphere is left to no use when in other instances
more of the screen can be utilized to the comfort of users.

9
1.3 Improvement suggestions for Mondly

Overall, the user interface of this mobile application is already good and can be an
example for the other application for having a good design interface. Therefore, an
application must have some improvement to make their application become better
and attractive than before and have an updated user interface design to satisfy the
user. Firstly, based on the poor design above we must avoid using inconsistency
background colour in an application. Developer of the application must designate a
specific colour palette that would suit the brand of the app, and must consistently use
the colour throughout the whole app. A consistently background colour is important
in an application because it can create a sense of structure for the user. In addition,
the consistency colour also can help user understand more about the message or
idea we want to deliver.

Next, distracted movement word can overcome by making or setting the word
moving only by using figured touch and not moving by the movement of the phone.
Static design also help user more focus about the point or information that the
application wants to deliver.

Lastly, to overcome the poor design irregular spacing between phrases, this
application must standardize the spacing between elements to avoid confusion and
for maximum utilization of space. The free space in the pages will make people
assume that this app does not use well the space given. Spacing between phrases is
vital in an application to make the message appear in the page clearly and can be
understand by the user.

10
Mobile Application

2.0 Busuu

Introduction

Figure 11 : Busuu mobile application

Busuu is a language learning application that allows users to connect with native
speakers. Bernhard Niesner and Adrian Hilti created Busuu in May 2008. The
company began with a free website and established its first office in Madrid.
Premium membership was offered in 2009, giving users access to all of the
platform's capabilities, and the first Busuu mobile app was released in 2010. Busuu
is named after the endangered Cameroonian language Busuu. Only eight people
were able to speak this language in the 1980s, according to an ethnological study.In
2010, Busuu established a short language course to encourage people to learn the
Busuu language using Busuu. Busuu blends social learning's communicative
features into self-study language learning. Busuu provides free and premium access
to 12 language courses taught in 15 interface languages via its website and mobile
apps. Busuu offers CEFR levels A1, A2, B1, and B2 courses. The study materials
are organized into themed lessons, each of which is based on a frequent
conversational scenario. Vocabulary and grammar exercises, pronunciation
exercises, interactive quizzes, and conversational practise with native speakers from
the Busuu community are all included in the lessons.

11
Review on Busuu:

Figure 12: Review of Busuu

Figure 13: Review of Busuu

12
2.1 Good design

2.1.1 Level of education

Indicate
levels

Figure 14: Screenshot 9 Figure 15: Screenshot 10

This application used floating header. When scrolling down the page on the
application, the header is still on top and its floating on top of the screen. Hence,
user do not need to scroll back to the top to see the content again. The floating
header became a highlight or a bookmark for the user. As an example, in this mobile
application, ‘Beginner A1’ and ‘Elementary A2’ is used as the floating header, it
shows to users that the users are on what level. Other than that, the size of the
floating header is not too big, it is just nice for user to notice and did not disturb the
content under the floating header.

13
2.1.2 The used of floating button

Figure 16: Screenshot 11 Figure 17: Screenshot 12

Buttons are an essential component of a positive and productive user experience

Buttons can take us to other pages or perform a specific activity, such as starting a
lesson or starting a quiz. They're frequently used as calls to action (CTA) on
application that user used. A floating action button (FAB) is a circular button in the
mobile app UI that triggers the primary action. In this mobile application, text button
is used. Text buttons are text labels that fall outside of a block of text. The wording
should explain what will happen when a user clicks or taps a button. For example on
(figure 1.2) “Start Quiz” is used as the wording and when we clicked the button we
will moved to another page which is to the quiz page. The size of the button used are
large enough to allow for interaction. Next, every colour has a visual weight that is
used to create a hierarchy for the information. In this mobile application the text
floating button convey a greater visual weight and stand out from the rest of the
scene. It is the most visible button. For example, blue is used for the text button for
the white background. The user's eyes will be directed to the larger, bolder content
first.

14
2.1.3 Bulb icon showing tips

Bulb icon

Figure 18: Screenshot 13 Figure 19: Screenshot 14

Icons are a visual representation of an object, action, or idea. Because of their ability
to provide efficient visual communication, icons have become an inseparable part of
visual interfaces. At a glance, icons are easy to distinguish and there is usually no
need to translate icons as regardless of language, they are universally understood.
Good example is a bulb. The electric light bulb emoji is frequently used to symbolize
an idea, knowledge, or general thought. Hence, the light bulb is used in this mobile
application to give tips or knowledge to the user. When users click on the bulb icon,
a page of tips will appear on the page and it will give the users an introduction to the
quiz and some knowledge that can be learn and used while taking the quizzes.

15
2.2 Bad design

2.2.1 No translator

From Kyrgyzstan

From Poland

Figure 20: Screenshot 15

From figure 20 , it shows that 2 users are communicating with each other but using
different languages. As you can see, user named Ewa is correcting exercise on user
named Malika and user Ewa is using Polish while commenting while Malika is a
Kyrgyzstan. As the application has no translator it is most likely the user do not
understand each other .Thus, it makes users hard to improve their lessons.

16
2.2.2 Unexpected information

Figure 21: Screenshot 16

From the figure above, it shows that the duration of the voice is not synchronized
with the original duration of the voice. For example, figure 21 actual duration of the
voice note is only 5 seconds , but the display duration displayed 30 minutes and 2
seconds. This type of design will make user confuse and hesitate to use.

17
2.2.3 Useless calendar

Figure 22: Screenshot 17

In this mobile application, it provide the users a calendar features. As shown in figure
above, the calendar would record what days did you opened the apps and do the
lesson with right tick in blue. However, the calendar did not provide any lesson
history or history what users have left before. Thus, the calendar is useless and only
for display as it does not have any other features to do with the calendar.

18
2.3 Improvement suggestions for Busuu

The recommendation that can be made to improve this application is, that the
developer needs to come out with translator features as it will improve users
experience when using the app. Next, developer has to improve how they design the
voice note to prevent confusion for the users by showing the actual duration of the
voice message. Lastly, developer can improve the calendar function, for example,
make users can check their lessons history, so that the calendar can attract users to
use the application more.

19
Mobile Application

3.0 Memrise

Introduction

Figure 23:Memrise mobile application

Memrise is a mobile application founded in 2010 with co-founder Ben Whately,

Memrise has developed into ‘The world’s most entertaining language learning app’.
Today, close to 60 million people from 189 countries can testify to that fact as they
learn over 20 languages on the Memrise App and website. The purpose of this
application is to driven by people’s interest language studying in order to help them
acquire language to use in the real world. User can simply use this apps language
learning game and choose which languages want to learn. User can also explore
more, they provide the video, audio and writing learning to make the learning
interesting. This application is compatible with both Apple and Android user. It can
be found in Apps Store for Apple user and Play Store for android user.

20
Review on Memrise:

Figure 24: Review of Memrise

21
3.1 Good Design

3.1.1 Themes option

Figure 25: Screenshot 18 Figure 26 :Screenshot 19

The first good design in mobile application Memrise it provide users to choose light
or dark mode features in the application. Light mode is usually used in many
application but not many application provide the dark mode. Light mode usually use
in day while dark mode used at night. Dark mode is a low-light user interface (UI)
that uses a dark colour and usually black or a shade of gray as the primary
background colour. It’s a reversal of the default white UI that designers have used for
decades. In the result of response to user increased screen time, dark theme
interfaces help with eye strain, especially in low-light or night-time situation. Less eye
strain meant fewer headaches and a better study experience. Not only is dark mode
easy on the eyes when done right, but this style save battery life and even can be
healthier.

22
3.1.2 Unique way to display instructions and using right colour

Figure 27: Screenshot 20 Figure 28: Screenshot 21 Figure 29: Screenshot 22

Memrise application also provides clear instructions for user to use the application.
To avoid fail design (because so many instruction) memrise application used unique
way to provide word instruction to user by using fade in and fade out so user will see
the instruction before the instruction fade out. Memrise application using the right
colour to show. For example red word to tell user to record back the pronunciation
because the application cannot detect the word user record before this and also the
after the pronunciation process and get right, the button change to green with right
tick in the button and word “sounds good!” in green give message to user that they
got right that part of pronunciation and they will move to next word. This is more
convenience for user to use and understand.

23
3.1.3 Flexibility

Figure 30: Screenshot 23 Figure 31: Screenshot 24

Figure 32: Screenshot 25 Figure 33: Screenshot 26

24
Memrise application give user a flexibility to learn easily in this application. In figure
30, it was a home page and if users click the continue learning button , it will start the
lesson immediately. It also apply in figure 31 learn page where the application make
suggestion to user of what they want to learn for example “Classic Review “ , but if
user do not want to click the button user also can click in the circle “Word and
Phrases The Basics 1 “ and it will show the figure 31. User can see what they
already learn before and if users want to continue to learn they can click button
“Classic Review”, it will start learning word lesson. While, CandyBox in Learn page
figure 32 will go to CandyBox page in figure 33, it give user quick and convenient to
choose what users want to learn that day. Users should be able to find what they
need quickly, and your page’s load time should be consistently quick. Too many
shortcut to start the activity and flexibility for user to use.

25
3.2 Bad design

3.2.1 Inconsistent design

Figure 34:Screenshot 27 Figure 35:Screenshot 28 Figure 36:Screenshot 29

Memrise app is inconsistent page design like figure 34, 35, 36 they have a different
style between Android style(figure 34) and IOS style(figure 35 and 36) and even
between IOS and IOS also have different page design with the same app. Android
Memrise app(figure 34) and IOS(figure 35) have 2 different home icon , while both
IOS figure 35 and figure 36 different in menu bar . IOS figure 35 have 2 function icon
while IOS figure 36 have 3 function icon and have a capture picture for learning. An
excellent UI design should be consistent on the style in order to make users clearly
understand and respond to the given content. The different features between device
should not be happened .This will make same app that download in the different
device will give different user interface make user confusing.

26
3.2.2 Unfamiliar icon

Figure 37: Screenshot 30

In this application, the icon used unfamiliar icon and it make user hard to understand
and use many memory load to remember the unfamiliar icon and the function of that
icon. Word and Phrases using icon “hand pick seed” for activity learning new word is
a bit hard for user to understand when using the application for the first time. It apply
to the other icon like Classic Review using icon “watering” to activity review the word
that user already learn. If not because the meaning of the icon stated in the bellow
the icon , the user must not understand the meaning the icon and it not fulfilled the
meaning of icon is primary attribute for being a common visual language which
effectively bridges language gaps.

27
3.2.3 Too much white space

Figure 38: Screenshot 31 Figure 39: Screenshot 32

Learning activity in Memrise application used too much white space and it make the
page unorganized. Users usually do not realize at the first glance that given space
bar and wizard button for help user to answer at down because it is hidden behind
the skip button. User need to scroll down and mostly user do not realize it. If the
white space between icon sound and word “type what you hear” can be drag up a
little and the keyboard to write will up a little so space bar and wizard button will not
be hidden and no need to scroll down . If it can fit in one page, user will automatic
see all the button without missing it.

28
3.3 Improvement suggestions for Memrise

The suggestion is based on the bad feature that been list above. Memrise
application is good but still need the improvement to make sure the design interface
is consistent wherever user install it. It make users use it easier and do not lose
interest in this application. As a good design application, consistency is important to
make sure that user interface is proper for all platform, whether for mobile iOS apps
and Android apps. It also avoid fail user interface because sometimes users can
have both smartphone and they will download in both smartphone and it will make
user realize the different user interface between both smartphone. Consistent means
that you do not frustrate your users by making them have to figure out what to do on
your site.

Furthermore, Icons are an essential part of many user interfaces, visually expressing
objects, actions and ideas. When done correctly, they communicate the core idea
and intent of a product or action, and they bring a lot of nice benefits to user
interfaces, such as saving screen real estate and enhancing aesthetic appeal.
Suggestion Memrise application can change the Unfamiliar icon to the familiar icon
to make user more understand and it can guide users to where they need to go or
where they will go if they click that icon. Such Word and Phrases can using icon
symbol “W” in the button to bring meaning word, because user more familiar about
this symbol in leaning.

Lastly, one of the most crucial elements in an interface is the white space between
elements. Using too much white space also make the application as a bad design.
The white space can be minimize, so the display can be fit in one page and no need
to scroll down. It can make easier for user to use and see all the function on that
page, the button or icon cannot be hide behind anything . Minimize white space are
important to certain page to make it easy to for user.

29
Website

4.0 Duolingo

Introduction

Figure 40: Duolingo website application

Duolingo is an American language-learning website and mobile app. It was launched

on November 2011 but the idea for Duolingo was initiated at the end of 2009 in
Pittsburgh by Carnegie Mellon University professor Luis von Ahn and his post-
graduate student Severin Hacker. Duolingo courses are built upon the concept of a
"tree". Trees are composed of skills, which focus on a specific aspect of the target
language. Trees are usually split into sections, or units, containing a chunk of related
skills.

30
Reviews on Duolingo:

Figure 41: Review for Duolingo

Figure 42: Review for Duolingo

31
4.1 Good design

4.1.1 Progress bar

Figure 43: Screenshot 33

The interface shows progress that the user had went through on the page. This way,
user won’t wonder how long more they must spend time on the page or it’s taking too
much time. User will also know when they can move on to the next page. The
progress bar will also increase users’ motivation since they will feel more satisfied.

32
4.1.2 Minimalist design

Figure 44: Screenshot 34

Users will start to observe the website’s design thoroughly first before they look at
the content. Minimalist design will help users focus on the content more. This kind of
design have less distractions so users can focus mainly on the content. For example,
this website used plain white background and bright colors for the other elements.

33
4.1.2 Colour differences

Figure 45: Screenshot 35

The colour differences used here are using two colour to show that there are
reasons behind the numbers. As shown, ‘0’ with gray colour there indicates that
there is no progress yet for that part while ‘26’ with darker colour indicates that
progress has been made. This will motivate users to proceed on making progress as
it will also contribute to their achievement on this website.

34
4.2 Poor design

4.2.1 Layout is too squeeze-in

Figure 46: Screenshot 36

The layout is not conquering the space provide for a website. The empty spaces on
both sides on the page look like there are something. Instead, the layout outspread
on the whole page. This kind of layout will also make the website looks untidy and
disorganized.

35
4.2.2 Fonts are too small/faded

Figure 47: Screenshot 37

Small fonts do not provide better user experience. Users will have some difficulty to
read the small fonts especially when it’s faded in colour. Users had to squinting at
their device or having to zoom in to read the fonts. Also, this design will be more
nuisance for elderly users since they have short sighted.

36
4.2.3 Unclear blank spaces

Figure 48: Screenshot 38

The blank spaces shown have no uses on this page. It’s unclickable and have no
contents like the other blocks before it that have fonts. If users try to click on it,
nothing new will appear on the page. This will lead to confusion to users since the
spaces are provided and located among the other contents but not clickable.

37
4.3 Improvement suggestions on Duolingo

Based on the bad designs that have been verdict, there are some of the
improvements that can be made. First, to wisely use the spaces provided for a
website. Designer should identify the suitable layout between website and mobile
app. A website’s layout should be wide and outspread since the size of screen of
devices used to browse are usually big.

Next, to use bolder and bigger fonts. It will make the content readable to users
and they won’t face difficulties to read the texts despite any eye conditions. Users
will also not have to just depend on the images to find or understand the content.

Lastly, avoid putting unclear spaces that have no contents. Instead, designer
should perfectly adjust the fixed contents. This is because clarity is important for a
website since it will help information become accessible on a website.

38
Websites

5.0 Speak7

Introduction

Figure 49 : Speak7 website application

This websites is introduced in 2013 , its purpose is to offer visitors free lessons in 7
languages which is Arabic , French , Spanish , German , Italian or Russian . This
websites is an entirely text-based and it's good for references and brushing up on
skills as it give useful samples of everyday situation. Language Components that
Speak 7 provide is vocabulary, grammar, writing, listening and speaking while
language tools is Memory, Practice and Motivation. This application using a smart
way around vocabulary can save you a lot of time and enables user to speed up user
learning process. It also help user shape their vocabulary the way they want, just like
clay, user can make different shapes out of one piece of soft clay, and so can with
one word. Next, writing is your first practice of what user have learned from
vocabulary and grammar. There are many ways user can write and learn at the
same time, chatting or writing letters to pen pals is a good way to start. Listening the
audio and try to speaking and after enough practice, speaking will become natural,
almost like your native language, you will be using some efforts but subconsciously,
and maybe speaking will become the easiest thing to do.

39
Review on Speak7:

Figure 50: Review on Speak7

40
5.1 Good design

5.1.1 Highlighted word

Figure 51: Screenshot 39

By highlighting some key words in a blue colour that can make user attract attention
in written content, and use this to help user understand the information. This can
also help slow the eye as it travels down the page, so that your website users spend
more time reading the content, and less time scanning over what have written.
Picking out some key words in the text to highlight can even be used to deliver a
shorter message to user that will attract their initial attention, and cause them to slow
down to read the longer message around this. For example, in this website,
“Learning Italian “is highlighted in blue, so that user can know that this is specific for
learning Italian. Important words are highlighted with blue, so the font colour is
contrast from the background colour.

41
5.1.2 Visual divider

Figure 52: Screenshot 40

A visual divider is a dividers like a gray line separate items visually, making it easy
for users to grasp the information about each item. A great example of a divider
would be a separator line. This allows a designer to structure a page according to
common visual perception patterns, making the layout clearer and easier to
understand for users .White spaces between different elements inside an item or
between different items affect the user experience. Too crowded lists or items are
hard to read and discourage users easily. Separator line is very important for user
distinguish and not mix the information.

42
5.1.3 White background is used

Figure 53: Screenshot 41

As shown in the figure above, this website has a white-based colour background.
Using a pure white background create a clean, consistent, and professional effect to
the website. It helps increases users confidence on the website quality. Next, the use
of white background improves the legibility of content. Legibility can be helped by
contrast, and the easiest method to achieve it is to use a dark font against a white
backdrop. Furthermore, light fonts on a dark backdrop can be distracting to the eyes.
Dark typefaces on a white background are easier to read for most people. It is also
preferable to see web pages with a white background, especially if users are
browsing during the day.

43
5.2 Bad design

5.2.1 Inconsistent page design

Figure 54: Screenshot 42

Figure 55: Screenshot 43

44
As we can see Speak 7 web application have inconsistent page design that we can
see clearly in figure 54 that is in page number for Russian language have a menu
navigation up there while in figure 55 is page Arabic language for number that don’t
have a menu navigation. Different primary navigation bar for each web page. This
inconsistency can confuse and make user them feel uncomfortable while using the
website. It also will make user give up on web application because no menu
navigation that help user to go back to where they one. So to have a consistent page
design is very important to help user to use the application.

45
5.2.2 Poor alignment

Figure 56: Screenshot 44

The web design is affected negatively by poor alignment. Misaligned text and
imagery can also be very off putting, and become difficult to concentrate on the
page. Alignment important to make user easy to scan and easy-to-follow list, you
should focus on item alignment. This web design use left-aligned content, left part of
the screen receives the most attention in cultures that read from left to right.
Therefore, user should always ensure that the most important information is aligned
to the left of the screen. This page do not use a justification works as the separator
to make it more arrangement and easy to read. Column separation is used because
using long sentences can cause readers to easily lose track of which line they are
reading so they need in the same alignment.

46
5.2.3 Lengthy navigation menu

Figure 57: Screenshot 45

Speak 7 web application have a lengthy navigation menu. This navigation has too
many links, less authority and trust passed down to the interior pages. The design
also does not provide a clean and readable list of items. The font is small, there’s not
much spacing between items, and the menu word colour is all red and underline
make it messy. The red word colour can distract user from reading the information
given and having to many word in red colour make can actually increase a person’s
heart rate and cause them to breathe faster. Red is associated with lust, excitement,
love, energy, and movement. It also has some potentially negative associations
including war, violence, fire, anger, and danger. As a result, the user will likely feel
overwhelmed by the options presented instead of guided.

47
 5.3 Improvement suggestions for Speak7

The suggestion is based on the bad feature that been list above. As an excellent UI
design should be consistent on the style in order to make users clearly understand
and respond to the given content. This will also do good to improve the work
efficiency. When it comes to improving the scan ability of your list UI design,
consistency is king. A good list UI design has to have a consistent design all the way
through. Otherwise, it doesn’t really serve its function as a list and doesn’t help the
user to scan through all the information which is precisely what it’s meant to do. So
the navigation tab menu must be at same place in the every page for guide user to
use the application.

Furthermore, having good Alignment Is very important for good design interface
where alignment contributes to the aesthetics of the website. Aesthetics are
important for creating first impressions. Alignment helps create designs that are more
visually pleasing to users. .Alignment guides the users with design. Alignment helps
the user better understand the connections between different elements without the
need for external helpers. It also make user easier to read not feel fussy when they
read the information given.

Lastly, navigation menus work best when they are short and simple. It also can be
nice if it using a proper word colour rather than using red as an accent colour to draw
user attention .As a good design interface we need to avoid use to much word in red,
too much excitement can be a bad thing. Red is generally not suitable for luxury
goods, nature-related content, or professional websites or services. Not something
that general such as navigation menus that specific to help user to use the
application.

48
6.0 Conclusion

All the application that has been chosen by our group that are related about
education either website or mobile application is already have a good design user
interface. But there is no application that is perfect and have no poor design user
interface in the application. So, the suggestion given by our group is to make the
application become better that the current one. We hope that the suggestion given
by us can help the user become more friendly with the application and can easily use
it to explore the whole features in the application to learn the language that they
want. Lastly, we hope that every application’s developer will give more attention in
designing user interface before making an application to attract more people to
observe or to know more about the application.

49
7.0 References

https://www.memrise.com/ed-cooke-founders-story

https://www.ujudebug.com/website-design-trends-for-small-business-in-2021/

https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-
experience/#:~:text=started%20right%20away.-
,Icons%20are%20an%20essential%20part%20of%20many%20user%20interf
aces%2C%20visually,estate%20and%20enhancing%20aesthetic%20appeal.

https://www.mockplus.com/blog/post/bad-web-design

https://blog.hubspot.com/website/bad-vs-good-design

https://careerfoundry.com/en/blog/ui-design/common-ui-design-mistakes/

https://uxplanet.org/review-of-ui-design-trends-we-start-2019-with-
68f128151215

https://www.elegantthemes.com/blog/resources/10-rules-of-good-ui-design-to-
follow-on-every-web-design-project

https://www.pumpkinwebdesign.com/web-design-manchester/advantages-of-
highlighted-text-in-web-design/

https://medium.com/mockplus/6-bad-ui-design-examples-common-errors-of-
ui-designers-b1f9eb5b4a41

https://www.practicalecommerce.com/learning-from-bad-web-design

https://ux360.design/alignment-principle-design/

50
https://neilpatel.com/blog/common-website-navigation-mistakes/

https://www.nngroup.com/articles/ten-usability-heuristics/

51