Introduction

Usually, as developers we don’t care much about UI design – we leave that up to the UX experts. User interface, design and experience are crucial to the success of an app. No matter how good the code is, how sophisticated the algorithms underneath are, if the end consumer product is not polished, intuitive and easy to use, then all the other work is for nothing.

With the development of the Drawland app, Elena and me wanted to explore the creative space of the UX/UI world, so we’ve decided to design the app on our own. In this post I will share the experience of this fun process, and it’s up to you to decide if we did a good job.

The evolution

First steps

When we were starting out, we had a rough idea, but we didn’t know in details what the features of our app would be. Over time, our app evolved to what it is now. To illustrate this evolution, I’ve picked out the most important git commits during the development of the app.

commit 6c25ccaace70392a41b5fd3ec2081ddb078316ce
Author: Martin Mitrevski
Date: Tue Aug 20 23:54:55 2019 +0200

We first wanted to see how the drawing with PencilKit will work and how the feedback for drawing will work. Therefore, the first version of the app was, to put it mildly, developer-designed.

As you can see, the feed is pretty basic collection view implementation (it even didn’t have horizontal scrolling). The drawing content was not prepared yet, therefore the images were downloaded online for the time being. The screen for a selected bundle was also very basic, just showing the image info and progress about the drawings.

The drawing screen, which is the most important screen of the app, changed a lot during the process. Its first version, displayed on the image above, had a separate button for checking the result. This opened a screen similar to the drawing screen, but without the controls and a number showing how similar are the images.

Font and colors

commit 0f1dd03e192dd7427341562d6f2e1890ec29fa41
Author: Martin Mitrevski
Date: Sun Sep 1 00:11:48 2019 +0200

The next point in the evolution was picking the appropriate font. Since this is a drawing app, the font had to be in a similar drawing style. The decision here was no-brainer, since the beautiful Cabin Sketch font was exactly what we were looking for.

In this period, we have also experimented with the home screen design. We have added border and shadows to the cells, in order for them to have an effect like floating over the background view. These ideas were inspired from the completely redesigned App Store app, which is a great example of how a modern iOS app should feel like.

We have started playing with the colors as well (indigo/purple variants above). We have tried many colors until we picked the ones we were happy with. One developer advice here – set the colors in one place in code and have a predefined style for different UI elements (titles, labels, buttons). You will want to see many colors, how they fit the background and how they cope with the other colors, so that change should be fast and trivial.

The gradient

commit dc6e516ea2759bbf7b55b0c9f1b968bb49511dca
Author: Martin Mitrevski
Date: Sun Sep 8 15:34:45 2019 +0300

We wanted the app to be colorful and vibrant, therefore we were trying out several gradients. Our first direction were blue/purple gradients, but it didn’t feel right. Luckily, we were on a short sea getaway that weekend and we picked the gradient based on the gorgeous sunset colors. That gradient made it in the live version.

We made the cells blurred, with a regular blur, which changed the color of the cell a lot, based on the position relative to the gradient background. It looked kind of cool, but the readability was not perfect.

Elsewhere, in the screen that shows drawings and their progress (second on the left), we were prototyping concepts with a pen moving (and leaving mark) to the correct percentage of progress. Although the concept seemed compelling, its realisation wasn’t, so we got rid of it in the future versions of the app.

In the drawing screen, we still thought that showing the result in a separate screen is a good idea.

Getting there

commit 4bedcfa743fd89e21be865132c3b080827045600
Author: Martin Mitrevski
Date: Sat Sep 14 21:10:39 2019 +0200

Another landmark change was the introduction of the new green color. It was fitting better with the gradient we have. It was one of those moments, when you are trying different colors until you get to the “this is it” moment. We have also started to integrate our own content (drawn with our app) and the app started to look much better.

Our next focus was improving the drawing screen. Since we were creating more complex content (fruits, vegetables, space, flags), it was obvious that we will need to introduce some kind of a tutorial or drawing steps that will guide the user, if they are stuck with the drawing.

Therefore, we have introduced a “step by step” feature in the drawing screen, which in its first versions was started automatically and acted more like a player.

Another big change was the removal of the separate screen that showed the drawing progress. It’s much better experience if the user gets an instant feedback about their progress, without pressing any buttons.

How to present that feedback and progress, was a different challenge. We might have tried over 10 concepts to do this, with trophies, medals, text, steps, until we have settled with the simple progress bar we have in the live version. After all, simplicity is the ultimate sophistication.

Refining the drawing screen

commit 94d15e2a2ab9cb2f0d1cc79f061fd386c8209f2a
Author: Martin Mitrevski
Date: Sat Sep 28 23:31:52 2019 +0200

The drawing screen still had a lot of room for improvement. All our drawings were made with three different drawing techniques, which means apart from the drawing steps, we had to also present the drawing technique to the user. That meant another button to the drawing screen. On the screenshot on the left, you can see that there are three rows of content (navigation bar buttons, large title and the tutorial/steps buttons). It was consuming too much space of the drawing screen for the users.

Ideally, we needed only one, for the buttons. And that was the direction we followed. We got rid of the large title here (it only made sense in the home screen). We have put the button for the steps inside the original image canvas. That change made a lot of sense, since the steps button additionally explains the original image canvas.

commit 028b8d9eb0e658c2e95fc607da8e1544931c5fb9
Author: Martin Mitrevski
Date: Sun Oct 20 00:40:07 2019 +0200

It’s always good idea someone else than the creators of the app to test it and provide feedback about the experience using the app. Almost all of our friends-testers didn’t know we had a steps button. And that button is one of the most important parts of the drawing screen.

Sometimes it’s easy to get into the trap of constantly using the app and not noticing its UX flaws. Therefore, it’s very important to do usability testing and see how the users are using your app. Since no one was clicking that steps button, we first went into the direction of shaking it when the screen is shown. However, that confused users even more.

Testers were asking for a short instructions overlay, on first display of the drawing screen. So we implemented that and it improved the usage of the steps button.

How can I confirm that? One way is using analytics and logging the most important events. It gives you a great overview of how the users are using your app. The steps button appeared a lot more in the analytics, after introducing the tutorial, which we initially considered not necessary.

The menu

commit 327c5ba8e7c5f863a05eb5b8fbdefa35f4b4529f
Author: Martin Mitrevski
Date: Wed Oct 23 00:03:02 2019 +0200

We needed to show several useful features to the user directly from the home screen, such as restoring purchases, the drawing techniques, as well as the overall drawing progress.

The first idea was a button in the navigation bar. We didn’t want to introduce a regular hamburger menu or a tab bar, that didn’t seem right. So our first idea was an alert sheet. However, apart from not being in line with the whole app concept, it was also not possible to change the font of an alert controller, without messing with private APIs and hacks.

That menu was very annoying, but we were ready to go live with it. However, on the day we were releasing the app, we introduced a “pinterest-like” menu at the bottom, which disappears when you scroll down. One could argue that it might not be that visible on first start, but as soon as you start using the app, it’s easily spotted. Maybe a more intense shadow could be an improvement for the future.

Another change we did was to use material blur, instead of the regular one. That made the cells’ color less dependent on the gradient, but it looked better and more readable.

With these changes and the latest content changes, the app went for review on 23rd October, late in the night.

The finished product

We started with the one on the left, finished with the one on the right. It was an interesting experience and we learned a lot in the process. You can check the finished product on the App Store.

What are your thoughts on this topic? Are you doing your own design, or are you leaving it up to the experts? Do you like Drawland’s design? Leave your thoughts in the comments area below.