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.
KortinQ and I worked together to develop and present a clean, visually appealing, and user-friendly iOS app for their company.
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.
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.
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 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.
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.
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.
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.
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.
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.
Want to experience the screens above? You can test it out here in the prototype.
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.
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.