Scroll.

WIREFRAMING, PROTOTYPING, VISUAL DESIGN

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.

The challenge

Clean and userfriendly app

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.

MY ROLE

UI/UX

KortinQ and I worked together to develop and present a clean, visually appealing, and user-friendly iOS app for their company.

  • User stories
  • Flowchart
  • Wireframes
  • Prototypes
  • Visual Design

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:

As a user, I would like to use multiple deals at once
As a user, I would like to be able to use a variety of payment methods
As a user, I would like to receive notifications of relevant discounts/deals when I’m near a store
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 and cirlces

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.

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 hiearchy of the card. This is for me personally a really imporant part of the process. That because of it is a really important component and it determined the user experience a lot.

PROTOTYPING

Testing and tweak

Interaction change

The prototype I designed included the original coupon deal page which presented all the necessary information about the product and the deal available. I created a CTA which was available to view at the bottom of the application, where clients could add their chosen deal into the apps ‘cart’ before payment. After testing with a couple of users, we noticed that the users were only looking for one deal instead of multiple deals.


Therefore, we changed the CTA so that once a deal had been chosen, users were directly linked to their ‘cart’ and could easily access the payment tab. Once we had completed this changed, we noticed that the overall experience and process of buying the item became more effective and improved the user experience.

VISUAL DESIGN

Colors and pixelperfect

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.

Moodboard

To ensure I was working alongside the requirements of the client, I developed a mood board that gets both of us on the same page.

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 pallete a bit to make it feel good and look better. Some colors where overstaturated 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 teh app. You have deals what you have to get excited and you want to buy a product dat is careable.

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

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.

Prototype

Want to experience the screens above? You can test it out here in the prototype.

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.

RESULT

Launch

The KortinQ app has not been launched due to it being in development. However, it won’t be long before the app is available to all.

Other work

contact

Say hello!

If you have any questions or comments about my work or you are interested in working with me - I would love to speak with you. Please feel free to schedule a call with me so we can begin our journey with a simple conversation.

Available

Currently available for projects