Improving the UI and UX of an app | How we do IT #4

00:00 → 00:03

Fifty two percent of users claim that a bad mobile

00:03 → 00:07

experience makes them less likely to engage with a brand ever again.

00:07 → 00:10

If you're afraid of your users leaving you and your mobile

00:10 → 00:14

application, let me take you on a walk towards high usability.

00:14 → 00:15

Ready?

00:18 → 00:21

I'm Aleksandra, senior content marketing specialist at Merixstudio,

00:21 → 00:24

and this is how we do it.

00:24 → 00:27

In this series, we present you specific design and development

00:27 → 00:32

challenges and explain how we deal with them at Merixstudio.

00:32 → 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:40

In this episode, we'll zoom in on the case of our US based

00:40 → 00:43

client from the entertainment industry.

00:43 → 00:46

The mobile application is supposed to help visitors of

00:46 → 00:50

recreational facilities such as bowling or roller skating rinks

00:50 → 00:52

use the attractions to the fullest.

00:52 → 00:54

The product is rather complex.

00:54 → 00:56

It contains many features,

00:56 → 00:59

from a map of facilities through reservation mode,

00:59 → 01:01

to food ordering.

01:01 → 01:03

The application has a lot to offer indeed.

01:03 → 01:07

However, it serves information in a rather chaotic way,

01:07 → 01:09

causing confusion among the users.

01:09 → 01:12

How to improve the design and make the interface more

01:12 → 01:16

functional without disturbing the overall user experience?

01:16 → 01:19

See how we do it at Merixstudio.

01:19 → 01:20

Let

01:23 → 01:26

me walk you through the biggest challenges we face in this project.

01:27 → 01:30

Firstly, the app's launch screen is rather messy.

01:30 → 01:33

There are at least eight icons there along with a map,

01:33 → 01:35

a drop down menu, and banners.

01:35 → 01:38

All of these elements are clickable. The result?

01:38 → 01:40

Users get lost in the information avalanche,

01:40 → 01:43

and that's not a pleasant experience at all.

01:43 → 01:47

Then, we deal with some misleading or missing features within the product.

01:47 → 01:50

Imagine planning to go bowling with your family.

01:50 → 01:52

If you are as organized as I am,

01:52 → 01:54

you'd want to book the alley in advance.

01:54 → 01:55

So you open the application,

01:55 → 01:57

find your way through numerous options,

01:57 → 01:59

tap the book your alley button,

01:59 → 02:02

and it transfer you to a website when you must look for

02:02 → 02:05

the appropriate tab all over again.

02:05 → 02:07

All the excitement evaporates in a second,

02:07 → 02:11

and I can assure you a frustrated user is not a happy user.

02:11 → 02:15

The last challenge we need to face is visual inconsistency.

02:15 → 02:18

There was no brand book when we stepped in,

02:18 → 02:20

and it was visible to the naked eye.

02:20 → 02:21

Chaotic banner exposition,

02:21 → 02:24

a few different colors in one section,

02:24 → 02:26

three or even four fonts in a tab.

02:26 → 02:28

That's yet another way to confuse the user,

02:28 → 02:30

and it should be fixed as soon as possible.

02:30 → 02:33

As you're already familiar with the problems,

02:33 → 02:36

it's high time we told you how we can handle them.

02:36 → 02:38

Agnieszka, our Senior Product Designer,

02:38 → 02:41

is the expert I asked for help this time.

02:41 → 02:45

Agnieszka, let's start with the clickable chaos in the launch screen.

02:46 → 02:47

In

02:48 → 02:50

a situation like this,

02:50 → 02:52

there should be one main goal in our minds,

02:52 → 02:53

to clean it up immediately,

02:53 → 02:56

and can be done in a few simple steps.

02:56 → 02:59

First, it's worth conducting a series of user interviews.

02:59 → 03:01

You need to know which functionalities they find

03:01 → 03:05

essential and which ones can be transferred to another part of the app.

03:05 → 03:09

I assure you, it will turn out extremely helpful in the end.

03:09 → 03:10

Thanks to user opinions,

03:10 → 03:13

you could eliminate the redundant elements and create a

03:13 → 03:15

transparent start screen.

03:15 → 03:18

Secondly, consider introducing a user guide displayed upon the first

03:18 → 03:20

visit to the app.

03:20 → 03:22

That's the thing users might be ashamed to admit,

03:22 → 03:26

but they usually feel lost while opening the app for the first time.

03:26 → 03:28

It turns out they need a detailed yet straightforward

03:28 → 03:31

tutorial to navigate them through the product.

03:31 → 03:35

And lastly, remember to take care of the elements on the screen.

03:35 → 03:38

Reduce the number of icons and leave only the essentials there.

03:38 → 03:41

Don't skip some consistency focused UI work here.

03:41 → 03:45

Standardize fonts, colors, and icons to make everything look

03:45 → 03:46

more transparent.

03:46 → 03:48

This might be a long and bumpy road,

03:48 → 03:50

but working in hand in hand,

03:50 → 03:53

client and tech partner should help.

03:53 → 03:54

What

03:55 → 03:58

about the missing and misleading functionalities?

03:58 → 04:00

How do we solve that?

04:00 → 04:03

This is another matter user interviews may help with, actually.

04:03 → 04:06

After listening to those who use the app on a daily basis,

04:06 → 04:10

you will be able to specify what they struggle with and fix it.

04:10 → 04:11

To structure this knowledge,

04:11 → 04:14

create personas based on real people you have spoken to.

04:14 → 04:18

It will help to dig deeper into their needs and expectations.

04:18 → 04:21

In this case, as a result of these actions,

04:21 → 04:25

the team decided to implement the booking mode directly into the application.

04:25 → 04:27

It turned out to be a great move.

04:27 → 04:29

Users were more than eager to use it.

04:29 → 04:33

The number of visitors in facilities increased significantly,

04:33 → 04:35

which means another business goal was accomplished.

04:35 → 04:39

In the meantime, it's a good idea to conduct competitive analysis to see

04:39 → 04:41

what others have been up to.

04:41 → 04:44

After all, to succeed you need to play a heads up game.

04:44 → 04:46

This, together with user research,

04:46 → 04:50

may let you become expert on valuable functionalities issue.

04:50 → 04:51

Thank you, Agnieszka,

04:51 → 04:55

for sharing your expertise and shedding more light on good UX

04:55 → 04:56

and UI practices.

04:56 → 05:00

Maybe you feel like your mobile app needs a design refreshment?

05:00 → 05:03

Now you know how to make it easier.

05:03 → 05:04

Thank you for watching,

05:04 → 05:07

and don't forget to check out more of our mobile development

05:07 → 05:10

related content on Merixstudio Insights.