KortinQ - iOS app

With insanely high discount codes, KortinQ provides coupons that allow consumers to get up to 95% off of a range of products focused within the Dutch Market.

Summary

KortinQ is an iOS app that offers extremely high discount codes. The app provides coupons that enable consumers to receive discounts of up to 95% on a variety of products within the Dutch market.

App Design
iOS Design
UI Design
UX Design

Challenge

KortinQ needed a designer who was capable of designing a good looking and user-friendly iOS app. There are multiple discount apps and websites available, which meant that developing an app like this was slightly tougher than expected due to the requirement for this specific discount app to stand out.

These days there a ton of discount apps and website. That means it is really though to create another one who is similar to other but tiny different.

User Journeys

Requirements in the app

After the questions and answers, I have made for myself a list of user stories. This helps me to get all functions needed in the app. For example: As a user, I want to login with Apple, Google & Facebook. To follow this process you can test yourself if you have all the needed functions wishes from the client. Below can you find a small showcase of the user stories:

1
As a user, I would like to use muliple deals at once
2
As a user, I would like to be able to use a variety of payment methods
3
As a user, I would like to receive notifications of relevant discounts/deals when I'm near a store
4
As a user, I would like to view my order history
FLOWCHART

The navigation

Flowchart makes it for both sides clear of how the navigation for the app looks like. Several aspects of the app are communicated before the design of the flowchart, such as “What apps do you like?” and “What aspects are you wanting to see in the development of your app?” Once this has all been communicated, I take this information and include it within the process of creating the flowchart.

Wireframes

Rectangles & Circles

Before ensuring the app is good looking, I begin by focusing on how the app works. To begin this process, I create wireframes. Doing this enables me to spares my client and me a lot of valuable time.

PROBLEM SOLVING

Product card hiearchy

One of the most important components of this app was essentially the ‘deal’ or ‘discount’ component. This includes the deal/discount itself, as well as the percentage discount on specific items. To ensure that all of these components parts are coming back in the result. I made a list of what elements the component need:

Hierarchy descision

Based on several notes, I created a new list using the hierarchy formation explained above. I designed the hierarchy list to question both myself and the clientele to make sure that the app was able to provide all the necessary information:

As you can see, the questions can be broken down into a hierarchy of importance and also identifies the individual components. For me, this is a really important part of the designing process, as this is the initial component that determines the user experience.

1

What do we want to showcase?

The product (image)

2

What is the product and the accompanying deal called?

Identified through the use of a title

3

How much does the product cost, with and without a discount?

Show the original price and the discounted price

4

What is the numerical value of the discount?

Display the percentage discount

5

When people display interest in the product, how much does it cost to receive the discount?

Show that by the small price tag

6

How long is the deal valid for?

Display a valid deal counter

As you can see, the questions are coming back in the hierarchy of the card. This is for me personally a really important part of the process. That because of it is a really important component and it determined the user experience a lot.

Visual Design

Colors and pixel perfect

Once the wireframes had been completed, I began developing ranges of color schemes to apply to the wireframes. This part of the process enables you to visualize sketches transforming into real designs.

COLOR PALETTE

Color usage

KortinQ had already created a color palette. The initial idea for their color palette was in my opinion oversaturated. I jumped into the conversation and at the end of the conversation, they agree that we had to change the pink color a bit.

I changed the palette a bit to make it feel good and look better. Some colors where oversaturated what hurts to your eyes. But I wanted to keep the brand how it right now, cause that’s what the client wanted. We ended up with those two colors:

The primary color which is really engaging is combination of red and pink. The main reason that I changed it is to create a combination of caring and exciting. That is psychological. That combination matches perfect with the app. You have deals what you have to get excited and you want to buy a product dat is care-able.

The secondary color is turquoise. I tweaked the color a tiny to match it good with the pink/red color. Besides it was KortinQ secondary color, it matches really good with the discount part of the concept. The turquoise stands for a good sign. Discount is are for the users a good sign.

Result

App Result

After a couple of months, we ended up with this design. I think I designed a app that matches with the needs of what the client wanted.

INTERACTIONS

Make it feel good

To complete the overall KortinQ experience, I personalized some of the interactions. Not only do these detailed interactions add a cool effect, but they also allow the user to explore different components; such as being able to view when transactions are being processed. These extras can prevent confusion when referring to the user experience as a whole.

Testimonials

"I met Robert as super talented start UI/UX designer and then saw him develop into someone who can come along at the highest product level"

Milan Daniels

Co-Founder Otrium

"Robert is one of the few with a mindset that I like to work with. After 1,5 year collaboration, I brought him in multiple projects of mine like one of them Propchain. Communication is top-notch and consistent in promises all the time"

Robin Ubaghs

Co-Founder Propchain

“Robert helped at ShopPop a ton with hands- on help designing an Inbox for Messenger, and later figuring out big product questions and our website"

Luc van Loon

Product Designer (ShopPop back-then)

"Robert is someone with an insane eye for detail. Extremely consistent in everything he does, communication, UI/UX, promises, and so forth which makes it super easy to work with"

Michiel Tol

CMO of Colect