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.
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.
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.
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:
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.
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.
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:
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.
What do we want to showcase?
The product (image)
What is the product and the accompanying deal called?
Identified through the use of a title
How much does the product cost, with and without a discount?
Show the original price and the discounted price
What is the numerical value of the discount?
Display the percentage discount
When people display interest in the product, how much does it cost to receive the discount?
Show that by the small price tag
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.
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.
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.
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.
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.