Resul Caner YILDIRIM
Recent Works & Personal Portfolio
Product Designer - Leanscale
April 2020 - Current / Dubai, UAE (Remote)
Role: Research, Interaction Design, Prototyping,
Visual Design, Design System Management
Visual Design, Design System Management
Clients: La3eb (KSA), Al Tayer Group (UAE)
UX Designer - Tmob
October 2017 - March 2020 / Turkey, Istanbul
Role: Research, Interaction Design, Prototyping,
Visual Design, Design System Management
Visual Design, Design System Management
Clients: Atlasglobal Airlines, SunExpress (Germany),
Vodafone, Vive (UK),
Vodafone, Vive (UK),
WORK HISTORY
UX Designer - InnovationBox
April 2014 - October 2017 / Turkey, Istanbul
Role: Interaction Design, Prototyping, Visual Design
Clients: Türk Telekom, 500 Startups (USA), Turkish Airlines
Google Product Design Expert
Google Developers Experts
2016 - 2019
Google Developers Experts
2016 - 2019
Google Design Sprint Master
Google Developers
2017 - 2019
Google Developers
2017 - 2019
Community Lead
GDG Istanbul
2013 - Current
GDG Istanbul
2013 - Current
VOLUNTEER ACTIVITIES
Google Launchpad Mentor
Google Developers
2016 - Current
Google Developers
2016 - Current
CORE SKILLSET
Design Thinking, Competitor Analysis, User Research, Personas, User Journeys, Sketching, Wireframes, Design System, Rapid Prototyping, UI Design, Interaction Design, User-centered Design, Usability Testing, Mobile Design
HTML5/CSS3 (Entry Level)
HTML5/CSS3 (Entry Level)
TOOLS I USE
Sketch, Figma, Photoshop, Adobe XD, Photoshop, Illustrator, Protopie, Zeplin, After Effects (basic), Invision Studio,
ABOUT ME
I am Resul Caner Yildirim, a Product Designer with 8+ years of extensive background in FinTech, tourism, aviation, e-commerce, gaming, and food-tech industries.
Thinking over my diverse experiences in design and working closely with technology teams, I now see that the common ground has always been in-depth problem solving through inventive approaches and empathy.
While working at several agencies for some of the biggest companies in MENA and Europe, I got know-how in gathering accurate insights, translating user research into real business outcomes with on-point design solutions on multiple platforms.
Thinking over my diverse experiences in design and working closely with technology teams, I now see that the common ground has always been in-depth problem solving through inventive approaches and empathy.
While working at several agencies for some of the biggest companies in MENA and Europe, I got know-how in gathering accurate insights, translating user research into real business outcomes with on-point design solutions on multiple platforms.
Designing Games for Interactive Canvas
on Google Assistant
🇹🇷 Devfest Istanbul 2019
Google Ventures Design Sprint (Workshop)
🇰🇿 Design Sprint: Almaty 2017
Conversational UX: Creating A Persona
for Your Brand
🇹🇷 Devfest Istanbul 2018
Google Ventures Design Sprint
🇰🇬 Design Sprint: Bishkek 2017
How to understand the perspectives in Product Design processes as a developer?
🇷🇺 Devfest Gorky 2019
Hey Google, What's Next (Conversational UX)
🇷🇺 DevFest Gorky 2017
Can Material Design Live Long & Prosper
🇷🇺 Devfest Gorky 2018
Accessibility on Android
🇺🇦 DevFest Ukraine 2016
How to Survive 6 Years in Community
🇺🇸 Google GDG Summit 2019
Hey Google, What's Next (Conversational UX)
🇬🇷 DevFest Greece 2017
Google Ventures Design Sprint (Workshop)
🇺🇿 Design Sprint: Tashkent 2017
Designing an Android Wear Application (Workshop)
🇺🇦 DevFest Ukraine 2016
Accessibility on Android
🇨🇿 DevFest Pilsen 2016
Using Android to Create The Best UX with #iot
🇵🇱 Droidcon Poland 2015
Using Android to Create The Best UX with #iot
🇬🇷 Droidcon Greece 2015
Designing an Android Wear Application (Workshop)
🇹🇷 DevFest Istanbul 2016
Accessibility on Android
🇷🇴 DevFest Bucharest 2016
Accessibility on Android
🇵🇱 Droidcon Poland 2016
CONFERENCE TALKS
Latest Projects
Just a glimpse for some of the projects I’ve completed over the last 3 years.
Atlasglobal Airlines
Research, Interaction Design, Prototyping, Visual Design for
Website, Mobile apps, Smartwatches and Kiosk Applications
Website, Mobile apps, Smartwatches and Kiosk Applications
SunExpress Airlines Mobile App
Interaction Design, Prototyping, Visual Design of
Mobile Application
Mobile Application
DCA Food - Food Delivery Platform
Interaction Design, Prototyping, Visual Design
of Mobile Application
of Mobile Application
La3eb - Gaming Platform
Interaction Design, Prototyping, Visual Design of
Mobile Application & Website
Mobile Application & Website
Vive - New Generation Banking
Interaction Design, Prototyping, Visual Design
of Mobile Applications
of Mobile Applications
Thinks Mobility Website
Interaction Design, Prototyping, Visual Design
of Corporate Website
of Corporate Website
Vodafone Pay - Mobile Wallet App
Interaction Design, Prototyping, Visual Design of
Mobile Applications, Dashboard & Website
Mobile Applications, Dashboard & Website
Mowico - Mobile Commerce Platform
Interaction Design, Prototyping, Visual Design of
Mobile Applications, Dashboard & Website
Mobile Applications, Dashboard & Website
Case Studies
Detailed case studies for some of my projects.
Project Brief
Vive is a branchless bank and has a team of industry experts with a proven track record of delivering market-leading banking products and services, who know that banking can be done better. Vive wants to simplify the world of personal finance, with fair products, clear processes, and innovative technology at the heart of everything they do. To accomplish this manifest, we re-designed the Vive Banking mobile application.
Challenges
The original design of the app has been completed by
a different agency. For this reason, we had limited access to
information related to research or data. The visual language was old
and we had to renew it. Credit Score screen has been designed from scratch.
a different agency. For this reason, we had limited access to
information related to research or data. The visual language was old
and we had to renew it. Credit Score screen has been designed from scratch.
Financial literacy at a glimpse
The last part I contributed to was the Credit Tracker screen. This screen aims to allow users to easily track their credit scores and increase them with suggestions.
When designing the credit score page, I tried to produce quite different variations. Although the design of the suggestion cards is relatively simple, it took quite a bit of time to display the score in a clear graphic.
When designing the credit score page, I tried to produce quite different variations. Although the design of the suggestion cards is relatively simple, it took quite a bit of time to display the score in a clear graphic.
Improvements, step by step
Spending Summary was an essential screen. We needed to list users’ monthly expenses in individual categories on a pie chart. We also needed to show these payments under a separate transaction history based on a bank account. Therefore, we needed to display both the expense categories and the bank accounts on the page.
In the first version of the screen, there was heavy background usage. Also, the icons used for the categories were small and not accessible. Below the categories, the bank accounts listed in a carousel. Which, in my opinion, is not the right solution in this case.
The accounts section did not have a title. So it was hard to understand the purpose of the field. Although it provides the same information, the info icon is reused on every card. Due to the current design of the card, the planned expenses and current balance were not clear to understand.
Again, I used a blurred background to bring the categories in line with the new visual language. I increased the size of the icons to make them comfortable to touch. Instead of using a refresh icon, I decided to implement a known interaction “pull to refresh” to refresh the informations on the page. I also added a heading for the bank accounts section. I thought it would be better to list the account cards vertically instead of presenting them on a carousel.
“Carousels on touchscreens have the problem of low findability and sequential access, and not all designs implement swipe as a carousel control.” Nielsen Norman Group
Also, for the account cards, I displayed the current balance and available credit with a graph. That allowed the user to see at a glance how much money they could spend. Finally, I added the account numbers on the card so that the bank accounts could be noticeable.
In the first version of the screen, there was heavy background usage. Also, the icons used for the categories were small and not accessible. Below the categories, the bank accounts listed in a carousel. Which, in my opinion, is not the right solution in this case.
The accounts section did not have a title. So it was hard to understand the purpose of the field. Although it provides the same information, the info icon is reused on every card. Due to the current design of the card, the planned expenses and current balance were not clear to understand.
Again, I used a blurred background to bring the categories in line with the new visual language. I increased the size of the icons to make them comfortable to touch. Instead of using a refresh icon, I decided to implement a known interaction “pull to refresh” to refresh the informations on the page. I also added a heading for the bank accounts section. I thought it would be better to list the account cards vertically instead of presenting them on a carousel.
“Carousels on touchscreens have the problem of low findability and sequential access, and not all designs implement swipe as a carousel control.” Nielsen Norman Group
Also, for the account cards, I displayed the current balance and available credit with a graph. That allowed the user to see at a glance how much money they could spend. Finally, I added the account numbers on the card so that the bank accounts could be noticeable.
Informative but entertaining as possible.
Apart from bank accounts, there were information messages we had to highlight. These messages provided information about the user’s financial movements. Since Vive is particularly a bank for users in poor economic conditions, we knew that most of our users were having financial issues. Therefore, we knew that users would see mostly negative messages. To avoid overwhelming users, we had to present these message cards as entertaining but informative as possible.
To do this, I first decided to use content-related fun gifs on info-cards. Thus, we would be able to provide related information while at the same time being as fun as possible.
To do this, I first decided to use content-related fun gifs on info-cards. Thus, we would be able to provide related information while at the same time being as fun as possible.
Information at a glance.
Homepage, one of the most vital screens when we received the project, had not been designed yet. In about two weeks, we had to create a homepage from scratch. There were necessary pieces of information we had to give on the homepage. We had to highlight the account balance and the bank accounts aggregated to the application.
We have placed this information at the top of the screen to instantly show the money in their accounts when they launch the application.
Especially for users who view more than one bank account through the application, we decided to show the banks this balance came under the total account balance. When we looked at the user data in the Alpha test process, we saw that the users added an average of 2 bank accounts to this application. For this reason, we put the two most active bank accounts of the user directly in this area and placed a CTA to access other accounts.
One of the biggest problems we faced was that the brand wanted to prioritize branding as much as possible. The client wanted the entire page to sit on a colored background. However, this was not an aesthetically wise decision, and it also distracted the focus and reduced readability. Therefore, I decided to use the desired background only at the top of the page. To provide better contrast and recognizability, I used a card with a blur in the background. Thus, I have achieved a satisfactory result for both sides.
We have placed this information at the top of the screen to instantly show the money in their accounts when they launch the application.
Especially for users who view more than one bank account through the application, we decided to show the banks this balance came under the total account balance. When we looked at the user data in the Alpha test process, we saw that the users added an average of 2 bank accounts to this application. For this reason, we put the two most active bank accounts of the user directly in this area and placed a CTA to access other accounts.
One of the biggest problems we faced was that the brand wanted to prioritize branding as much as possible. The client wanted the entire page to sit on a colored background. However, this was not an aesthetically wise decision, and it also distracted the focus and reduced readability. Therefore, I decided to use the desired background only at the top of the page. To provide better contrast and recognizability, I used a card with a blur in the background. Thus, I have achieved a satisfactory result for both sides.
Homepage
Information Cards
Spending Summary
Credit Score Tracker
01
02
03
04
My Role
Tmob
Company
Interaction Design
Visual Design
Visual Design
My Role
iOS App
Android App
Android App
Products
December 2019
February 2020
February 2020
Date
Vive Banking
A new UK-based bank, committed to meeting the financial needs of underserved customers.
Learnings…
Overview
05
Introduction
I was responsible for re-design of the Homepage, Spendings Screen, Credit Score, and informative notification cards on the Homepage of the app. We were 3 designers on the project. I mainly focused on Interaction and Visual Design of the project.
Second Iteration..
I admit that using gifs predominantly in a financial application was a bit of a bold move. In the small tests we conducted with users, we saw that gifs attracted attention at a glimpse but then caused them to move away from focus.
Although they liked the gif that the Queen waved at people very much, the brand also thought that gifs could be a little too fun. In the next step, because emojis are more known than gifs, I decided to use emojis. This change would also help shorten the development process and reduce the application size. Therefore, in our tests, we saw that although they are not as fun as gifs, emojis can create focus easier.
Although they liked the gif that the Queen waved at people very much, the brand also thought that gifs could be a little too fun. In the next step, because emojis are more known than gifs, I decided to use emojis. This change would also help shorten the development process and reduce the application size. Therefore, in our tests, we saw that although they are not as fun as gifs, emojis can create focus easier.
More alternatives
Although our time was limited, I have created several versions to see more alternatives together. Each of these versions was designed to present the existing features in a cleaner and straightforward way. Especially, I tried to simplify the graphics section with a clean background and lazy tags for each categories.
But due to time constraints, we were unable to implement any of them.
But due to time constraints, we were unable to implement any of them.
Seeking for ideas
We tried line charts and pie charts to present the information clearly. But none of these methods produced the desired effect. Then I decided to use a bar chart because I thought that the credit score shows a linear increase or decrease.
At this point, the client asked us to show the changes in credit score over the past few months. Although we tried to show this with bar charts, I decided to use descriptive text because I thought it would be much more confusing at the end of the day.
At this point, the client asked us to show the changes in credit score over the past few months. Although we tried to show this with bar charts, I decided to use descriptive text because I thought it would be much more confusing at the end of the day.
Project Brief
SunExpress wanted us to create the first ever SunExpress Mobile application for iOS and Android platforms. Our main priority was to provide a simple yet powerful booking process as well as an easy Check-in and Booking flow. Second priority was to increase revenue from Ancillary Product sales.
Challenges
- Increase sales Flights booking
- Create a relationship between users and the brand
- Increase ancillary product sales
- Reduce stress on the counter at the airport.
Motivate users to check-in through the app.
- Create a relationship between users and the brand
- Increase ancillary product sales
- Reduce stress on the counter at the airport.
Motivate users to check-in through the app.
Shine bright like a diamond
The visual design part of the project was relatively quick. Since we designed all the components we will use in the Interaction Design step as symbols, our main task in the visual design part was the color scheme, typography, and iconography.
We focused as much as possible on accessibility, comprehensibility, and inclusiveness. The brand color orange was our Primary Color. We used dark blue in texts as part of the branding. That allowed us to create the contrast as well as achieve the desired rhythm.
We wanted to give depth of feeling through the use of shadows and white space. Overall balance provided with font combinations. We paid attention to the use of gestalt by keeping related objects as close as possible.
We focused as much as possible on accessibility, comprehensibility, and inclusiveness. The brand color orange was our Primary Color. We used dark blue in texts as part of the branding. That allowed us to create the contrast as well as achieve the desired rhythm.
We wanted to give depth of feeling through the use of shadows and white space. Overall balance provided with font combinations. We paid attention to the use of gestalt by keeping related objects as close as possible.
Key Points we considered
- Clarity
- Integrity
- Consistency
- Inclusiveness
- Avoiding Jargon
- Empathise with the user
- Integrity
- Consistency
- Inclusiveness
- Avoiding Jargon
- Empathise with the user
Key points to focus
- Ensure mandatory information is available
- Ask for as little as possible
- Reduce unnecessary steps
- Make data entry smart
- Make sharing easy
- Ask for as little as possible
- Reduce unnecessary steps
- Make data entry smart
- Make sharing easy
Collecting data from nothing..
One of the biggest challenges on the project was the research process. Unfortunately, we did not have the time or the necessary budget to run a detailed research process. We had to be very agile to detect problems and collect data. Since there was no existing mobile app, I decided to focus on the mobile website traffic and demographic informations provided by Google analytics. Also, I compared those analytics with the monthly sales data sheets. That way, I tried to understand demographics to make design decisions.
Next step was to focus on the average number of passengers on a booking to optimize check-in and booking flows. Finally, I tried to understand which ticket fares are the most popular and which ancillary products passengers are choosing. So, we could suggest those products easier on the path.
In result of this, I created 4 segments (Expats, Business Travelers, Families, Explorers) personas regarding those segment needs and preferences, and user journeys of them. After creating personas and journeys, we ran face to face interviews with users to understand current problems on the existing website.
Next step was to focus on the average number of passengers on a booking to optimize check-in and booking flows. Finally, I tried to understand which ticket fares are the most popular and which ancillary products passengers are choosing. So, we could suggest those products easier on the path.
In result of this, I created 4 segments (Expats, Business Travelers, Families, Explorers) personas regarding those segment needs and preferences, and user journeys of them. After creating personas and journeys, we ran face to face interviews with users to understand current problems on the existing website.
Research
Interaction Design
Component Library
Visual Design
01
02
03
04
My Role
Tmob
Company
Research, Interaction Design,
Visual Design
Visual Design
My Role
iOS & Android Mobile Apps
Products
12.2019 - 05.2020
Date
SunExpress Airlines
Benchmarks and regulations..
After completing data collection process, next step was to benchmark 50 best Airlines of the world. Every airline application has been reviewed and examined to understand their complete flows and solutions. Our biggest competitors was low cost airlines such as Pegasus Airlines, Virgin, and EasyJet.
Since SunExpress is a holiday focused airline, we mostly focused on how the city and date selection has been provided to users by different airlines. Because, we had different route availabilities on different times of the year.
The final step was to understand IATA’s and Civil Aviation Association’s rules and regulations to provide best experience in the best way possible. To understand this regulations, I visited Civil Aviation Association and learned the fundamentals of the aviation regulations.
Since SunExpress is a holiday focused airline, we mostly focused on how the city and date selection has been provided to users by different airlines. Because, we had different route availabilities on different times of the year.
The final step was to understand IATA’s and Civil Aviation Association’s rules and regulations to provide best experience in the best way possible. To understand this regulations, I visited Civil Aviation Association and learned the fundamentals of the aviation regulations.
Key analysis & findings
- Frustration when entering data
- Worries over price transparency and fluctuations
- Struggles to find the necessary information
- Communication issues where the language is industry-specific
- In-app interruptions are distracting
- Worries over price transparency and fluctuations
- Struggles to find the necessary information
- Communication issues where the language is industry-specific
- In-app interruptions are distracting
User Goals
- Book flights quickly and simply
- Search for cheapest flights
- Multiple payment options and
- The possibility of canceling the booking without paying a lot of fees
- Check-in and create a boarding-pass
- Search for cheapest flights
- Multiple payment options and
- The possibility of canceling the booking without paying a lot of fees
- Check-in and create a boarding-pass
Measuring success!
When we started the SunExpress Mobile App project, only source we could take as a reference point was companies website. Since the existing website was providing a terrible experience we were expecting good results at the end of the project. Here are some outcomes:
- Increase the conversion rate from 6% to 13%
- Increase the return rate from 40% to 60%
- Increase ancillary product sales from 11% to 32%
- Churn rate reduced by 78%
- Reducing the average time to book a flight from 7 min to 4 min
- Reducing the average check-in time of a regular user from 35 min to 7 min
- Increase the conversion rate from 6% to 13%
- Increase the return rate from 40% to 60%
- Increase ancillary product sales from 11% to 32%
- Churn rate reduced by 78%
- Reducing the average time to book a flight from 7 min to 4 min
- Reducing the average check-in time of a regular user from 35 min to 7 min
Outcomes
05
Introduction
I was the lead interaction (UX) designer and researcher on the design team. I was responsible for Research, Interaction Design, Information Architecture, and layouts. I also heavily took part on the Visual Design process as well as prototyping on Invision.
Getting my hands dirty!
I decided to proceed with affinity diagram. I enlisted ideas and outcomes with the help of a colleague and we looked at the usability testing and in-depth interview notes, took our own notes, studied the online survey results, reviewed the competitive benchmarking findings, etc., and used a collaborative approach to analysis as a team. We wrote down each of our points on post-its. We taped the post-its to a wall and sorted them into categories to create an affinity diagram. As we progressed, some clear categories emerged.
My next step was to use the information from the affinity diagram and create a step-by-step view of the journey to show how users felt at each stage. I focused on the users’ goals, context, behaviours, and pain points at each step. I also created a graph to show the emotional curve that the user went through during their journey, along with the actual verbatims recorded during the test recordings.
Doodling is a great UI design exploration. As a paper pen fan, I always start my UI exploration with quick sketches and turn my ideas into reality. Following, I reflected those hand-drawn ideas into high fidelity wireframes for developers, fellow designers and stake holders to ideate, understand and discuss solutions I created.
My next step was to use the information from the affinity diagram and create a step-by-step view of the journey to show how users felt at each stage. I focused on the users’ goals, context, behaviours, and pain points at each step. I also created a graph to show the emotional curve that the user went through during their journey, along with the actual verbatims recorded during the test recordings.
Doodling is a great UI design exploration. As a paper pen fan, I always start my UI exploration with quick sketches and turn my ideas into reality. Following, I reflected those hand-drawn ideas into high fidelity wireframes for developers, fellow designers and stake holders to ideate, understand and discuss solutions I created.
Thanks!
Reach Me Out:
hey@rcaneryildirim.com