By Simranjit Singh Deol

UX and Interaction Design Educational Apps for Children and Teachers

Login as a teacher, all possible errors also shown.

Register as a teacher, all possible errors also shown.

Confirmation email and set up process that appears after first log in.

Part two and three of the set-up.

Part four and five of the set-up.

Part six and seven of the set-up.

Part eight and nine of the set-up.

Final parts of the set-up process.

Teacher dashboard (home page).

Classes page (used for teaching).

Add another class.

Changing/printing student passwords.

What drives a good user experience and what influenced my design? Digestibility and Clarity:

Good design is easy to digest. We need users to “get it” without needing a multi sectioned

explanation. UX does not just mean user experience, but also user expectation. This goes

beyond clear, easy-to-read copy. People sometimes need guidance to make decisions.

Having menus and extensive options on both sides of a screen can confuse the user. We

need to reduce the user’s cognitive workload whenever possible by being consistent and

clear, whilst establishing a strong visual hierarchy. All of the key content needs to be at the

top half of the screen or 'fold', placing a visual hierarchy and making all of the key content

visible without the user having to scroll down. A key part of achieving this is by designing

for the majority of your users and letting extra functionality be discovered as needed (e.g.

through hover controls) without delivering everything at once.

It’s often best to think of a user journey as a storybook. If you open most books to any

given page and select a word, you’ll be met with an abundance of context on the page.

You’ll usually see the title of the book, the chapter, the page number, and the word will

appear contextually within a sentence, paragraph, and page. I ensured that users are always

contextually aware of where they are within their journey, especially through their first

visit.

A good example of this is the tutorial and set-up guide that I designed to appear for new

users when they sign up to the website, guiding them through the set-up process one step

at a time. I found that the original interface of the website dashboard was full of text and

very little explanation as to how the user could execute tasks. The teacher needs to

understand the interface and functions fully in order to teach effectively. I always find it

essential to test the UX with a number of users as this can reveal things that users who are

experienced with the application often overlook. I find it extremely helpful to take time to

reflect on and constantly narrate what I am doing. This helps me ensure that I am always

striving to understand the user's needs and perspective and consider them when designing

the interface.

The interface needed to be 'scannable' as users tend to skim read. Research shows that

“users switch from scanning to actually reading the copy when web content helps [them]

focus on sections of interest.” This is why I put most of the text into the helpful tutorial I

created as every word was relevant to the current task. This also keeps the user's attention

focussed. I also ensured that I used easily readable and understandable words with little to

no jargon as I cannot assume to know the reader's proficiency in English. The font also

plays a key role in the user experience. It must not appear crowded together; each word

should be readable as soon as the user sees it. Our minds tend to process the first and last

letters first, so it is important that words have sufficient space between them.

As it takes as little as 0.5 seconds for visitors to decide whether they are interested in a

website or not, it is important to be clear with what you want users to do. Today’s

interfaces need ‘preferred actions’ to be as obvious as possible. Users should not have to

think about what I want them to do.

People don’t click as much we design for as most are looking for the easiest and fastest

route to get what we need. This is why I found it important to put all of the functionality

and options on a single page where possible. I ensured that there were only two levels to

the navigation; the menu item and the page it linked to. For example, originally the user

would have to go to a deeply nested page to transfer the class to another teacher. I counted

4 clicks before I was able to find that option. The newly designed interface not only has

every class on one page, but also has every possible option for each class on the same page

as well whilst looking easier to digest than before.

To ensure that the users never felt lost, I ensured that there was a consistently positioned

button which would walk the user through the functions and options of the page they were

currently on. Signposts are one of the most important elements of any experience,

especially one on the web where there are an infinite number of paths leading in all

directions. The design should keep people aware of where they are within the overall

experience at all times in a consistent and clear fashion. If you show them where they came

from and where they're going, they'll have the confidence to sit back and relax and enjoy

the ride.

Trust:

Good design is easy to trust. Before asking the user to complete any action, I made every

effort to help them understand why the task is needed. Being honest and clear in

explanations builds trust at each step, leading to increasingly easier conversions in the

future.

Providing feedback is also a common way to enhance the experience. As the user

completed any process, whether it was the walkthrough or changing a setting, there is

always a confirmation box letting the user know their action was noted and successful. I

also used colloquial terms where possible to relate to the user more and speak to them as a

friend rather than a robot.

Building thoughtful interfaces with clear intentions and friendly words shows that you

care, makes choices more comfortable, and leads to a better overall experience. And that’s

important, because it’s been found that 68% of users giving up did so because they think

you don’t care about them (which we know isn’t true!).

Familiarity:

While excellent design is desirable, platform and device guidelines exist to create

familiarity and engage users more. While making the interface look exactly the same or

extremely similar from platform to platform is the main goal, I was careful in paying

respect to the sticky details of each OS and aspired to create an interface that would

support any screen or device. Using familiar patterns, icons and presentational styles is a

great way to look native and enhance the user experience.

By making the interface familiar to the user, the user can discover how to accomplish their

tasks at first glance. Users can also easily learn a product’s interaction models and predict

how to move from one part of the product to another. Once users have become repeat

users, they can accomplish repetitive tasks quickly and efficiently. Using standard design

practice, I intended to enhance the user experience and efficiency through familiarity.

Another common way to increase the user's familiarity and attachment to the application

was to allow for a deeper personalisation, such as adding a profile picture.

Delight:

The more simplicity you can bring to a complex problem, the more delighted the user will

be with my solution. The ultimate delight is when someone forgets your product is a

“product”—where it’s so useful and fun to use that it doesn’t even seem like a product

anymore. Although the users are teachers, the core audiences are the children they teach.

This is why I have adopted an interface that appeals to children as well as adults, drawing

inspiration from colourful user interfaces seen in games such as Candy Crush. Teachers will

appreciate the look and feel of the interface and see it as 'something the kids would like'.

The interface also makes all of the functions and processes easier to digest and understand

whilst inviting interaction with vibrant colours and large buttons. By using colourful

characters and having them say your name as they greet you after logging before offering

tips establishes an emotional connection and stays fondly in the user's memory.

People don’t always remember information presented, but they do remember what they

feel. Advertisers focus on selling to our hearts, I know this because I spent a year creating

interactive adverts that used almost every tool in the book in order to engage the user. This

is why User Experience Design, or UX design, has become such an integral part of web and

application work. It should effectively weave together a combination of text, graphics,

layout and interactive elements to ensure users have an experience, not just an

informational view. Bright colours were used to create feelings of happiness and 'bubbly'

fonts were used for buttons to add slightly playful and inviting feel to the design.

Functionality:

When designing interfaces, it is very important to understand what the strength of the

technology being used is. It is also important to utilise responsive design techniques in

order to make the website or app have a fluid interface for varying device sizes. Having a

cross device friendly site is also an integral part of SEO (Search Engine Optimisation),

should we attempt to increase exposure in the future. Up to 60% of internet users view

sites through their mobile. They do not want to spend any time scrolling or zooming. I

made the functionality and navigation similar to an app interface so users on mobile can

also easily navigate and have an easy and enjoyable experience.

There are some fundamentals to consider when on the subject of functionality. For

example, selecting your name in the top navigation should reveal a dropdown menu which

has the same items listed (Dashboard, Classes etc) as there are on the dashboard in order

to ensure that no matter where you are on the website, your main options are a single click

away. Anything you need is simply one click away.

There are also a few key points I factored in when creating forms for logging in or

registering accounts:

If the username is an email address, tell users.

If the password is a numeric pin, tell users.

If space allows, instead of “Remember me” use “Remember username

on this computer” (“Remember me” doesn’t really tell the user what

will happen).

Give a moderate amount of information (e.g. tell the user when log in

has failed and whether the problem was specifically with the username

or the password).

Give users at least two and preferably three attempts — typos are easy

to make.

Apply time limits and penalties, rather than locking people out

altogether.

Login should ask if you are a teacher, student or independent first and

foremost as finding specific log in areas can be difficult.

Give the option to show the password.

Tell the user if caps lock is on.

Show users when they last logged in and, if they get an incorrect login,

when they last changed/created their password.

Put 'Forgot email?' or 'Forgot Password' next to their respective fields.

Efficiency:

There are a number of factors that can affect the efficiency of the user's journey, such as

system response times when users are performing tasks. Images can be optimised and

colours can be made simpler in order to decrease load times. Efficiency allows for

productivity and reduced effort, and a streamlined design allows more to get done in the

same amount of time. Creating efficiency demonstrates a great deal of respect for your

users.

Layout is a key ingredient to creating meaningful and useful experiences. As a person scans

a page for information, they form an understanding about what you can do for them and

what they can do for themselves using your services. To aid in that learning process, and to

motivate interaction, don't force people to jump back and forth around disparate areas in

order to carry out a single task. The design should be thoughtfully organized with related

features and content areas appropriately chunked and related objects are grouped together

where possible.

Providing preselected or predetermined options is one of the ways to minimise decisions

and increase efficiency. But choose wisely: if you assign the defaults to the wrong options

(meaning that the majority of people are forced to change the selection), you'll end up

creating more stress and processing time.

The more choices a person is presented with, the harder it is for them to choose and the

more they distract from their main objectives. I removed the "nice to haves" and focus

instead of the necessary alternatives the user would need to make in order to complete

common tasks.

Ensure that if people make mistakes (either because they misunderstood the directions or

mistyped or were misled by the designer), they are able to easily fix them. I ensured that

there were appropriate hints which told the user how to rectify mistakes. I also added a

'Back' button on most forms. Preventing error is a lot better than just recovering from it. If

you know ahead of time that there are certain restrictions on data inputs (such as numbers

only for a telephone number), it is best to stop users from going down the wrong road. By

proactively indicating what is not possible, you help to establish what is possible, and guide

people to successful interactions.

Forms are one of the places that demand a lot of attention, usability-wise. They cause

confusion, mistakes, and loss of engagement, and they are one of the most valuable parts of

most sites. It is a good general rule to keep forms as short as possible, but not be afraid to

break it into pages if it makes sense, or if you want to save information in steps, just in case

the user quits in the middle.

The main thing is to make a form feel simple, even if there are many parts to it. Keep

related questions together. Eliminate questions you don’t really need. And use as many

pages as you need; no more, no less. Other options could be accessed later and were not

important to the set-up process which is why it looks much simpler and digestible. There

are also many input types to consider, such as dropdown boxes and checkboxes. I chose

the input type that gave me the highest quality answers which would require minimal

effort on the user's part. Aiding the user in filling out the fields and providing example

input text was also something I implemented to make the journey easier for the user.

______________________________________________________________________________________

My next point of call would be to establish a group test - you can measure users’ success in getting

through different parts of a process funnel—from recognition, to engagement and interaction with

the site, to successful accomplishment of whatever the current task is. All of these points would be

documented.

To produce great user experiences repeatedly, I aim to become a UX leader whose voice is equal to

that of the leaders in Product Management and Engineering. One of my first goals as a UX leader

would be to identify and put the right processes in place, ensuring that User Experience is a key

part of the process in taking sites and apps to new heights and reach larger markets.

Thank you for taking the time to read my in depth analysis. I hope that it has given you a slight

insight into my UX/UI and design oriented mindset.

Simranjit Singh Deol

07852501246 simranjitsinghdeol@hotmail.co.uk