Using illustrations to create consistency between an app and the product site

Some products and processes are easier to explain than others. When it comes to apps that provide financial services, explaining the process in a way that’s easily understandable for every type of user could be a daunting task. Using illustrations to onboard and educate the users could help to reach that goal as well as add personality to what is often considered a dull task.

That is why creators of Zapptax — a mobile app that helps get VAT refunds — decided to use sharp illustrations to educate their users. They approached Iconfinder and worked with one of our top designers — Roundicons. Over a period of a bit more than two weeks, Roundicons crafted 28 illustrations that were also broken down into separate elements for product website.

The resulting designs are magnificent and we decided to interview the designer and the client to learn more about the process of handling such a large illustration project.

Some of the resulting 28 illustrations for Zapptax by Roundicons

The client

We reached out to Jean-Marie Wodon, the founder and managing director of Zapptax, who had been initially looking for the right vendor to craft the illustrations for their app.

Jean-Marie came up with the idea of the Zapptax concept two years ago when he noticed long queues next to customs department desks at international airports in Europe. Discussions with some of the travellers quickly revealed how frustrating the whole experience was for them. Therefore, Jean-Marie and his partners Thomas and Michel set to build an app that would address this problem.

Now what this application needed was an attractive visual interface that mirrors the ease of the process and effectively demonstrates how to use it.

The designer

Ramy Wafaa, founder and lead designer at Roundicons, was happy to undertake the project with his team as he was genuinely interested in the product:

“The idea instantly piqued my interest, as I’ve gone through the irritating VAT refund process myself a few times and wished for a simpler solution. Zapptax app simplifies this process making it a lot more convenient.” — Ramy

Ramy Wafaa, founder and lead designer at Roundicons

The timing was also great, as Roundicons team had just released their UI UX illustrations that focus on this particular type of drawing rather than icons, so they were ready to jump right on it.

We went ahead and talked with Ramy about the process in more detail.

What were the elements that you had to design?

The client required tutorial illustrations that would show how to use the application. The initial request was for five illustrations. We started the process, as we usually do, by crafting two sample illustrations and having the client review it and comment on the style and colors. It was important to define the style and color palette to be used across the entire project.

Since Zapptax was still in its infancy at the time, with website design still in process, the client was receptive to our recommendation of turning 5 illustrations, that are loaded with information and might be a little heavy on the user, into a total of 28 screens/illustrations that explain every step and demonstrate every single user case.

We also pointed out that the illustrations may be broken down into elements and used anywhere on the website.

“Seeing the rich vibrant illustrations on the website that are part of the app design greatly enhances the user experience.” — Ramy

Some illustration elements that were used across the app and the website

Did the client have any special requirements?

Yes, Zapptax had a nice logo and a set of brand colors which helped us in developing a suitable color pallete for the illustrations.

The client had a competitor that launched a while earlier, which created a nice challenge for us to display Zapptax’s great service the best way possible and stand out from the competition.

Zapptax logo

We were given a couple of screenshots for inspiration that the client had collected. However, we felt it wasn’t the best fit and we could do better. Thankfully, Jean-Marie was very open to our suggestions which made working together not only fruitful, but also joyous.

Tell us about your process. How did you start working on these illustrations?

“Our process always starts by analyzing the business model, targeted audience and the competition. When designing for a new startup it is very important to examine the market and existing projects in order to help the startup stand out and be able to compete. Visuals are very important at this point.” — Ramy

We are a team, so we usually start a new project with a brief meeting where we brainstorm and make a few rough sketches to get the ideas sprouting. Once we are clear on the style, we start the digital process.

Rough sketches by Roundicons

How did you come up with the ideas for illustrations? Were there any that were more challenging to create?

We love flat style and have created tons of flat style icons. Since the client wished for something colorful and sharp looking, flat style was a natural way to go.

Recently we’ve started experimenting with subtle gradients and smooth faded backgrounds in our icons and illustrations, which seemed a great fit for this project as well.

The client had solid ideas and provided quite good descriptions for each illustration, the results of which he then reviewed carefully. We added some design elements to make the illustrations richer and more attractive.

Creating the illustrations was a pretty smooth process overall. An interesting challenge, however, was to illustrate different currency notes in a simplified way without losing their identity.

Illustrating different currency notes in a simplified way

Moreover, we were set on making the illustrations in a way that could be broken down into elements which then can be used separately on the website, in the application or in presentations.
They all had to fit harmoniously in feel and style.

Which illustration is your personal favorite?

My personal favorite is the hand. I like the gradients and the way the hand was simplified to be holding various objects throughout the project.

Designer’s favorite illustration

Did you find something particularly interesting about this project?

It’s always fun to design for a new tech startup, especially if it provides an innovative solution to a vexing problem. The communication was excellent and we kept getting feedback not only from the client but also from the company which developed the app and the website. Overall, it was a very enjoyable cooperation.

The results

Jean-Marie and his team were really happy about the project results:

“Zapptax team is very pleased with the work done by Ramy. We already got great reviews from users and partners about our designs.”

We also asked Jean-Marie which illustrations are his favorites.

“My favorite is the one illustrating the idea of a traveler needing to obtain a stamp from a customs officer at her point of exit of the EU. It’s very telling. It’s sharp but at the same time it’s also very soft and irradiates a friendly atmosphere by portraying a welcoming customs officer facing a happy and relaxed shopper.” — Jean-Marie.

Client’s favorite illustrations

“My second best is the one illustrating the customer support function. It’s very coherent with the previous illustrations and exactly shows the atmosphere that we want to convey: a happy traveler who’s been supported by Zapptax all along its VAT refund process”, said Jean-Marie.

Using Iconfinder’s messaging feature for custom projects

Since this was one of the largest projects completed using Iconfinder’s custom design service, we asked both the client and the designer about their overall experience.

“The process was very smooth and straightforward. We felt particularly confident about the system by which our payments were withheld until our final agreement on the design material. This is especially comforting since we actually never physically met with anybody from Iconfinder. We also liked the responsiveness of the people we interacted with since the start of our project.” — Jean-Marie

Ramy also expressed a positive experience:

“I love the custom service feature. The communication is easy and pleasant. I admire its fairness and security in dealing with payments and cancellations. It makes things so much easier (we’re all about simplicity and ease).”

If you enjoyed reading this case study, we suggest you to take a look at how the illustration elements have been implemented on the product website at zapptax.com.

If you are interested in working with Roundicons, visit their profile on Iconfinder and shoot them a message.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store