Improving the performance of a language mobile app | How we do IT #2

00:00 → 00:03

Even the most comprehensive mobile application will not do

00:03 → 00:05

if it fails to operate smoothly.

00:05 → 00:09

So you may be wondering how to fix performance issues before

00:09 → 00:11

they drive your users crazy?

00:11 → 00:15

Let's take a look at a couple of tried and tested solutions.

00:18 → 00:22

I'm Alexandra, senior content marketing specialist at Merix

00:22 → 00:24

Studio, and this is how we do it.

00:24 → 00:27

In this series, we present you with specific design and development

00:27 → 00:31

challenges and explain how we deal with them at Merixstudio

00:31 → 00:35

Every case is based on our own experience and projects we've

00:35 → 00:36

worked on so far.

00:36 → 00:39

In this episode, we are going to take a closer look at the

00:39 → 00:42

EdTech language platform created for a company

00:42 → 00:44

located in North America.

00:44 → 00:47

The application helps users practice language skills

00:47 → 00:49

anywhere and anytime.

00:49 → 00:53

The product offers users a variety of language learning exercises.

00:53 → 00:56

Each module consists of different types of content from

00:56 → 00:59

word lists through audio recordings and video tutorials

00:59 → 01:02

to vocabulary based infographics.

01:02 → 01:05

However diverse and convenient it may sound for the user,

01:05 → 01:08

it actually makes app maintenance a struggle.

01:08 → 01:10

And that's just the tip of the iceberg.

01:10 → 01:14

How to ensure impeccable app performance regardless of the

01:14 → 01:17

abundance of features and other mobile development related challenges?

01:17 → 01:20

See how we do it at Merixstudio.

01:23 → 01:27

Let me go through the hardest nuts to crack in this project.

01:27 → 01:31

First of all, the app initialization time is rather lengthy.

01:31 → 01:34

Users need to wait at least five seconds for the launch

01:34 → 01:35

screen to appear.

01:35 → 01:39

Before that happens, all they can see is a blank space.

01:39 → 01:42

And I can tell you one thing, nobody likes waiting.

01:42 → 01:44

Then there's the content loading time.

01:44 → 01:48

Imagine trying to learn a new language by repeating words you

01:48 → 01:49

see in a short animation.

01:50 → 01:52

It's going pretty well and you're actually having a good

01:52 → 01:56

time, that is until the application crashes and not

01:56 → 01:59

once, but a couple of times in a row.

01:59 → 02:02

Processing this amount of data proves to be too much for the

02:02 → 02:04

application to handle.

02:04 → 02:05

You, as the user,

02:05 → 02:10

get frustrated and the entire language learning process is ruined.

02:10 → 02:13

That's not the outcome you would be happy with, is it?

02:13 → 02:16

The third challenge we need to face is that of too many

02:16 → 02:19

back end operations going on at the same time.

02:19 → 02:23

For example, the application needs to connect to the external server,

02:23 → 02:27

send requests to the API and transfer a lot of data

02:27 → 02:29

to display a picture.

02:29 → 02:32

The number of processes in the background causes performance

02:32 → 02:33

to deteriorate.

02:33 → 02:37

And lastly, the language platform in question works differently on

02:37 → 02:39

different devices.

02:39 → 02:42

The newer the phone, the better the performance.

02:42 → 02:45

However, users with some older models are not properly

02:45 → 02:49

taken care of, and that's something we need to revise as well.

02:49 → 02:51

Since we've already covered the challenges,

02:51 → 02:53

it's high time we found solutions to them.

02:53 → 02:57

Matthijs, our senior mobile developer and team leader,

02:57 → 02:59

will be our tech expert this time.

02:59 → 03:04

So Matthijs, how would you address the issue of long app initialization?

03:04 → 03:08

I've got a few tips on

03:08 → 03:11

improving initialization time.

03:11 → 03:13

The first one is creating a loader.

03:13 → 03:17

It's a type of animation that catches the user's eye while

03:17 → 03:22

the app is downloading all the data it needs to start working properly.

03:22 → 03:26

It can be for example a moving logo or a progress bar.

03:26 → 03:29

Any of these will make the waiting more bearable while the

03:29 → 03:33

preparation process is going smoothly in the background.

03:33 → 03:37

It's more of a visual trick than actual code improvement.

03:37 → 03:40

But it works for the user and that's what matters. Right?

03:40 → 03:44

The second thing is creating smaller data containers.

03:44 → 03:48

It's quite obvious that the big one will take way more time to

03:48 → 03:52

load so it's worth putting data into lighter packages.

03:52 → 03:56

Moreover, you can put all the icons into the font's container.

03:56 → 03:58

Thanks to this easy solution,

03:58 → 04:01

those elements will load almost instantly which might

04:01 → 04:05

significantly improve app's starting time.

04:05 → 04:06

Okay.

04:08 → 04:12

And what about content loading and back end operations issues?

04:12 → 04:13

How to improve those?

04:13 → 04:18

There are plenty of solutions we can implement in this case actually.

04:18 → 04:23

Firstly, we need to reduce the number of external operations.

04:23 → 04:24

We might cache the m p three,

04:24 → 04:28

j pag or m p four files directly on the device for at

04:28 → 04:32

least a few hours after the user sees them for the first time.

04:32 → 04:35

The app wouldn't need to connect with the external

04:35 → 04:39

server then and all the content would display much more fluently.

04:40 → 04:43

Secondly, we can reduce background processes.

04:43 → 04:47

We have lots of calculations going on while the video

04:47 → 04:49

or the picture is being displayed.

04:49 → 04:52

What may help is splitting the process into smaller

04:52 → 04:56

pieces and holding only those operations that are crucial for

04:56 → 04:59

now and the nearest future.

04:59 → 05:02

Why download five lessons at the start when we are not sure

05:02 → 05:05

if the user goes for more than one at a time.

05:05 → 05:06

Right?

05:06 → 05:10

Adjust the app structure to do only essential things as

05:10 → 05:14

holding so many background operations is not necessary.

05:14 → 05:18

And lastly, the size and location of files matter as well.

05:18 → 05:21

In case of our language application,

05:21 → 05:25

we don't need the four k resolution for a simple word animation.

05:25 → 05:29

It's better to keep the files as light as possible to not

05:29 → 05:31

overwhelm the product.

05:31 → 05:33

If we can't make the file smaller,

05:33 → 05:37

it's worth putting it into the cloud and linking it within the app.

05:37 → 05:41

This might significantly shorten the loading time.

05:45 → 05:47

Alright. Let's talk about the last solution.

05:47 → 05:51

How can we ensure better performance on all types of devices?

05:51 → 05:55

There is only one main option that clients don't really like

05:55 → 05:58

and unfortunately skip pretty often.

05:58 → 05:59

Conduct more tests.

05:59 → 06:03

It's extremely important to test an app on all kinds of the

06:03 → 06:04

devices and systems.

06:04 → 06:08

It will guarantee greater stability of the product and

06:08 → 06:11

give you broader perspective of its performance.

06:11 → 06:13

Apart from testing on different devices,

06:13 → 06:16

it's worth conducting user and stress test too.

06:16 → 06:19

There is no better way of finding space for improvements

06:19 → 06:24

than asking our users, not only when it comes to performance.

06:24 → 06:26

Stress testing, on the other hand,

06:26 → 06:29

might help us discover the robustness and limits of the app.

06:29 → 06:33

Thank you, Matteoj, for sharing your expertise and helping us

06:33 → 06:36

understand the intricacies of software performance.

06:36 → 06:40

By now, it should be way easier for you to boost your mobile

06:40 → 06:42

application performance.

06:42 → 06:44

Thank you for watching and don't forget to check out more

06:44 → 06:48

mobile development related content on our Insights.