ABOUT ME
WHO AM I?
With over 10 years of experience in product design, UI/UX design, branding, and iconography, I am a senior product designer at Kixy, a fast-growing fintech start-up based in London. I have a global perspective and a Master of Arts in Design from the University of Florence. I am passionate about creating innovative fintech solutions that enhance the customer experience and empower them to manage their finances easily and efficiently.
In my current role, I collaborate with cross-functional teams to design and deliver the first social banking app, offering multi-currency accounts, borderless debit cards, and awesome social features. I apply user-centric design methodologies, such as user research, usability testing, and design sprints, to identify user needs, pain points, and opportunities for improvement.
I also create designs that are aesthetically pleasing, consistent, and intuitive while maintaining superb quality and staying within budget. Additionally, I communicate design decisions and rationales effectively to stakeholders and lead and manage people across different cultures and teams.
DOWNLOAD MY RESUMEEXPERT IN
After years of working and studying, I have great skills in different fields:
Product Design
Problem Solving
Visual Design
Prototyping
Team Working
Time-Management
EDUCATION
EXPERIENCE
WHAT I DO
Web Design
Our intuitive sites deeply engage users and encompass everything from branding and user journeys to SEO, e-commerce and cloud technology.
App Design
Enhance people’s lives, work and moments of escape with apps that blur the lines between the digital and real world.
Digital Experience Design (DXD)
We create standout experiences that are meaningful, relevant and enjoyable, helping you stay one step ahead of the competition.
Branding & Design
After defining a brand purpose that shines, we can express your brand and give it potency at every touch points.
Logo & Icon Design
A logo is a brand’s visual identity and we assure of making it appealing and alluring.
Illustration
We create the best and innovative illustrations for apps and the web.
AWESOME WORKS
×
Genomics-Data Visualization
#APPLICATION #Case Study
Client Brief
Koonkie Cloud Services designs algorithms, pipelines, and analytical platforms to help clients understand, get insights, and manage genomic data.
Rather than spending months compiling and analyzing data, Koonkie does it in hours, delivered with their Phandi platform, ready for publication or commercialization.
Opportunity
Koonkie wants to get the public interested in genomics, but information found online about this topic is too technical for casual users to understand. It is also not very visually appealing and interactive.
They want the app to educate and inspire high schoolers and professionals about genomics and bioinformatics by providing simplified views, relatable fun facts, and artistic visuals.
Team
This five-week project was done with team of two Product Designers, myself and Max, we together conducted user research, planning, paper prototyping, wireframing, UI and testing for this project.
The team worked closely with co-founders of Koonkie Cloud Services. She gave important insights in the field of microbiology, came up with lots of great ideas through discussions.
Research
To better understand the look and feel our client wants for the app, we decided to do a quick gut test. A gut test consists of 10 or so images shown one at a time for 10 seconds each. Each image is rated on a scale from 1 to 5 and images with a high rating are revisited to see what elements the client liked.
Not only is this a great conversation starter, we also learned more about our client’s goals and priorities. Below are some of the terms used to describe the images they liked.
Virtual Terms
Virtual terms that our client used to describe the images they liked:
Design Inception
Design inception diagram with words describing how we want the app to look and feel:
We took the key terms that were noted in the meeting and expanded upon them to complete the design inception diagram. In particular, we wanted diagrams to be colourful, glowing, and fluid with round, overlapping shapes. This will create a lively and friendly feeling.
Motion will be really important for this app as, if used correctly, can create a sense of interest and can make things more interactive.
Art Direction
To expand upon the design inception sheet, we decided to create two separate style tiles to determine the art direction. A style tile is a quick way to show how the app would look by including the colour scheme, basic UI elements, illustrations, and fonts.
Max did the one on the left and I did the one on the right. I chose bright colours for the diagrams so they pop out more and dark purple as the main colour so it does not steal the focus of the main content. I also added some subtle gradients for visual interest.
Afterwards, we showed our client, the two styles to get approval on the art direction. They liked the dark green theme with the circular ring pattern and also the less vivid colour palette. We then combined what they liked into one style tile.
Wireframes
We designed wireframes and then started to apply the styling. To give a sense of progress, here is what we came out:
Colour & Shapes
The app’s colour palette is inspired by the colours of bioluminescent deep sea creatures.The background is inspired by jellyfish swarms with rounded, overlapping, and semi-transparent shapes.
Typography
We decided to use Proxima Nova as it is a simple, modern, and geometric font that works well in all sizes. The versatility is especially important in diagrams where labels may be small. Best of all, the client already uses this font on their website so it is consistent with their branding.
Illustrations
Using familiar terminology and simplifying diagrams to ease beginners to the world of microbiology and genetics is one of the big challenges of this project. There needs to be just enough detail for people to get the gist of things without overwhelming them. Then we can slowly ease them in by introducing more things in more detail.
The size of the circles are based on the number of known species in each category. This method of arrangement looks informative and artistic.
We also simplified the LUCA view by grouping similar species together rather than using the traditional view of arranging species like the branches of a tree. Since this method excludes a lot of detail, we also included a list view where users can group species by different taxonomic ranks.
As for the Circos views, we included hints where different parts of the diagram flash. Users can tap on these parts to learn what each part of the diagram represents. Not only do they learn some fun facts, they will also understand that diagrams are interactive.
At higher levels of detail, users can tap on certain elements to have others fade out. This maintains a balance between detail and complexity.
Reflections
At the start of this project, I was overwhelmed with the terms and visuals used in microbiology, genomics, and bioinformatics. However, this ended up being helpful as we are designing a user interface for non-experts. Since nobody in our team specialized in biology, if we do not understand it, it is not simple enough yet.
I would not have envisioned an app interface that is this simple. When I was searched online for genomics data visualization, they looked very busy and complex so I was thinking this app will not be suitable for a phone screen. However, as we iterated on the design, we found that lots of detail can be hidden away under multiple detail levels. This will allow more space for tappable elements.
All in all, from doing this project, we got to understand what our client meant by art in science. The shapes and patterns created from the Circos, chromosome, and gene sequence can look artistic when stylized. We also got to explore the different methods of data visualization such as with the Circos chord diagram, gene count radial bar chart and the six kingdoms bubble map.
×
Document Management Portal B2B
#Case Study #WEBSITE
Objective: To revamp a B2B, Netherlands-based document management portal adopted by the construction, energy and oil and gas companies for creating and maintaining a large number of engineering documents related to various projects.
The current portal is comprised of an outdated UI and lacklustre user experience due to poor content organization, visual hierarchy, user control and freedom, and system status visibility.
My role
Currently spearheading the UX Design and research endeavours for the client as the Senior Product Designer.
- To understand the whole ecosystem of the current portal and redesign it for a superior user experience.
- Effected the establishment of the ‘Customer Advisory Board’ (CAB)
- Organised prioritisation activities with stakeholders and the CAB using MoSCoW techniques.
- Carried out usability testing, qualitative user surveys (with 300+ users), and one-on-one user interviews
- Established the design system based on the Google material UI components
- Created high-fidelity mock-ups for adaptive and responsive design
Tools and techniques used
Research (Understanding the current document management portal)
This portal is used by engineers to review revisions of documents such as vendor contracts, engineering drawings, plant blueprints etc., and share it with external contractors. Additionally, it is also used to store and retrieve old revisions, when needed.
A document revision is sent via an internal or external transmittal and can contain four or more files: 1 publication file, 1 source file, comment file(s) and other file (s).
The workflow
The overview of the document review workflow between the internal and the external companies is as follows:
Understanding key personas
Understanding the user task flow
The reviewers and responsible engineers (RE) share the following tasks- (1) searching for various documents and (2) reviewing the documents assigned to them by adding their comments and closing them out. The RE, has a few additional tasks like accepting and rejecting of reviewer’s comments. The detailed workflow of the document review process for a RE is shown below.
Creating the user journey map
Analysing the current information architecture
The information architecture of the current ‘document search’ and the ‘document inbox’ screens was created. The screenshots of the respective screens are attached along the IA. Also, the design issues in various screens and their possible solutions are displayed together in black and red colours respectively.
Detailed UX issues in the current portal
The following images show the detailed UX issues identified with the ‘document inbox’ and the ‘document review’ screens.
What do users say?
User surveys
Designed and circulated online user surveys (using Microsoft forms) to collect qualitative responses regarding end-user frustrations with the current portal and expectations from the new design. Responses from 341 users were collected and analysed to derive user needs, pain points, features and actionable design insights.
Analysis
The answers to each of the survey questions were analysed by grouping and extracting similar themes.
Prioritization workshop with stakeholders
Virtual prioritization and story mapping exercises were carried out with the product owners, senior managers, subject matter experts, and other stakeholders to decide the most viable features to implement in the document inbox tab for the first release.
The MoSCoW prioritization technique was used to sort the extensive list of features for the document inbox into must-have, should have, can have and won’t have categories. The ‘Must haves’ were chosen for the MVP.
The redesign
The following screens were designed after understanding the user needs and discussions with the stakeholders. The new information architecture of the portal is as follows:
The redesigned document inbox screen is as follows:
The new review screen flyout shows a clear review summary as shown below:
The redesigned document review screen is as follows:
Usability testing
The designed screens were tested with 2 users with the help of 44 tasks.
The following were some of the testimonials given by the user:
“It looks more modern, up to date. If I compare it with the old one, because I am familiar with it, I know where to go and what to click, this UI will be easier.”
“I was specifically impressed with inbox. Because it not only shows the categorization of tasks now which is much more clear: what’s for action, what’s for info, what’s already completed. Those are the moments that engineers get lost. Now it is more convenient for users
“Is it more user friendly! Because there are no popping up windows, that will go somewhere at the bottom of the computer, and you keep trying to find where you were working.”
A few key insights from usability-testing
- Introduced new comment state icons to indicate the real-time state of the reviewer comments such as commenting in progress, reviewer comment final, RE comment etc. These were absent in the existing application.
- The ‘open’ checkbox column in the review screen was removed, as the users got confused and it did not add much value.
Changes made after Usability Testing:
- The column title ‘Reviewers’ progress’ was ambiguous to the user. It was not clear if this progress included the progress of the RE in addition to that of reviewers’. Thus the column title was renamed along with a clear tooltip.
- Users also tend to close comments in subsequent revisions. Thus, a new comment state icon of ‘Closed by RE’ and a new column of ‘Closed in revision’ were introduced in the ‘Comment history’ tab, as shown below.
- Current application does not give any warning about the pending open comments in the redline tool. It was added in the new design.
Other insights
- Users expected to see the filtered results retained in the inbox screen when they navigated back from the review screen. Changes were made as expected.
- The user could not find how to add bulk comments before closing out multiple documents. This screen was redesigned.
- A few minor bugs were also pointed out by the users and fixed by the product team.
Establishing the design system (Google Material UI)
Case Study
×
Fluency
#Case Study #Mobile
Case Study
×
Discussion Application
#Case Study #Mobile
×
Discussion Application
November 25, 2024
Case Study
×
Medicare
#Case Study #WEBSITE
×
Medicare
November 25, 2024
Case Study
×
StudyGy
#Case Study #WEBSITE
×
StudyGy
September 25, 2024
×
SpreadShirt
#WEBSITE
×
Money Jet
#Mobile
×
OpenTalkz
#LOGO #Mobile #WEBSITE
×
GerdFood Web
#WEBSITE
×
Gubryas
×
Lithium
#LOGO
Case Study
×
Pantel
#Mobile
×
Pantel
January 10, 2022
Improving the User Experience of Pantel
The Next Generation of Universal, Swift and Safe Communication
Background:
Pantel, a universal communication application, was experiencing low user engagement and retention rates. The application integrated several capabilities like messaging, voice and video calls, group and individual social networks, communication according to geographical location and trading online to provide a unique instance of the next generation communication for free, secure and open source for the use of all people around the world. However, users were complaining about the confusing navigation and the lack of features compared to competing messaging apps. The company decided to conduct user research and implement design changes to improve the overall user experience.
Methods:
User Interviews: The team conducted in-depth interviews with current and potential users of the Pantel application to understand their pain points and desired features. The team asked open-ended questions to gather detailed information about user's experience with the app, their likes and dislikes, and their suggestions for improvements. This helped the team identify the most pressing issues that needed to be addressed in the redesign. The interviews were conducted in-person, over the phone, and via online video conferencing to reach a diverse group of users from different age groups, cultural backgrounds, and geographic locations.
User Surveys: We distributed a survey to gather quantitative data on user satisfaction and feature preferences. The survey included multiple-choice and rating scale questions to gather data about user's overall satisfaction with the app, their likelihood of recommending the app to others, and the specific features they would like to see added or improved. The survey was distributed via email, social media, and in-app notifications to reach a broad range of users.
User Testing: We conducted usability tests with a prototype of the redesigned Pantel app to observe user interactions and gather feedback. During the testing, users were asked to complete specific tasks using the app, such as navigating to a specific feature or sending a message. The team observed users' behavior and recorded any issues or difficulties they encountered. This helped the team identify usability issues that needed to be addressed before releasing the final product. The testing was conducted both remotely and in-person with a sample of users from different demographics to gather a diverse set of feedback.
A/B testing: We also conducted A/B testing to evaluate the effectiveness of different design solutions. This involved showing different versions of the app to users and comparing the results to determine which version performed best.
Analytics: Lastly, we analyzed data from the app's analytics platform to gather information about usage patterns, engagement, and retention. This helped the team to understand how users were currently interacting with the app and identify areas for improvement.
The methods used in this case study were chosen to provide a comprehensive understanding of user needs and behaviors. User interviews and surveys provided qualitative and quantitative data on user pain points and feature preferences, while user testing provided information on usability issues and helped to validate the design changes before release. Together, these methods helped the team to make informed decisions about the redesign of the app, and ultimately led to the improvement of user engagement and retention.
Results:
The research and redesign efforts led to several key improvements in the user experience of the Pantel app.
Navigation: Based on user feedback, the team reorganized the app's menu and added clear labels to improve navigation. This made it easier for users to find the features they needed and reduced confusion.
Contact management: Users requested a more efficient way to organize and manage their contacts, so the team added a feature that allows users to create custom contact groups. This made it easier for users to stay in touch with specific groups of people and improved the overall communication experience.
Chat customization: Users also desired more customization options for their chat conversations, so the team added options for changing chat backgrounds and sending GIFs and stickers. This added a fun and personalized touch to the chat experience and made it more engaging for users.
Multi-tasking: many user mentioned they want to use the app while doing other things, so the team added a feature that allows users to minimize a chat and continue browsing the app without losing their conversation. This feature allows users to multitask and stay connected with their contacts at the same time.
Contests and games: The team added contests and games for users to keep them engaged and improve their experience in the app. This feature provides a way to interact with other users and have fun while using the app.
Exciting bots: To enhance the user experience, the team also included a variety of exciting bots in the app. These bots provide users with access to a wide range of services and information such as news, weather, sports, and entertainment. The bots also offer games and quizzes to keep users engaged and entertained. These bots are designed to be conversational, making it easy for users to interact with them and get the information they need. This feature adds an extra layer of convenience and fun to the app, making it more engaging for users and providing them with a unique experience.
These improvements were implemented based on the feedback and suggestions of the users, which ensured that they were tailored to meet their specific needs and preferences. As a result, user engagement and retention rates increased, and users reported a more enjoyable and efficient experience with the app.
Problem: One of the major problems identified during user interviews and surveys was that users were struggling to find the features they needed within the app. The current navigation was confusing and not intuitive, which led to users feeling frustrated and unable to accomplish their goals within the app.
Solution: To address this problem, the team redesigned the navigation of the app to make it more intuitive and user-friendly. The new navigation included a bottom tab bar that made it easy for users to access the most frequently used features, such as messaging, voice and video calls, and social networks. The team also added a search bar to the navigation, making it easy for users to find specific features or contacts within the app. Additionally, the team added tutorials and in-app tips to help guide users through the new navigation and ensure they could find the features they needed quickly and easily.
As a result of these changes, users reported feeling more satisfied with the app and found it much easier to accomplish their goals. The team also monitored analytics data and found an improvement in user engagement and retention.
Conclusion:
The Pantel case study demonstrates the importance of user research and design in improving the overall user experience of an application. By conducting user interviews, surveys, and testing, the team was able to gather feedback from a diverse group of users, including individuals from different age groups, cultural backgrounds, and geographic locations. This allowed them to gain a comprehensive understanding of the users' needs and pain points.
The redesign efforts led to several key improvements in the user experience of the Pantel app, including a more intuitive navigation, an improved contact management system, enhanced chat customization options, and the addition of a multitasking feature. The team also added contests and games to keep users engaged and entertained, and the integration of exciting bots that provide users with access to a wide range of services and information, making the app more engaging and unique.
The results of the redesign were significant, with user engagement and retention rates increasing by 30% and user satisfaction rates increasing by 20%. The redesign also led to a 15% increase in daily active users, and a 25% increase in the average session duration. This demonstrates the effectiveness of the redesign in creating a more engaging and satisfying experience for the users.
In conclusion, the Pantel case study highlights the value of user-centered design in creating a successful and engaging communication application. By understanding and addressing the needs of the users, the team was able to create a unique and satisfying experience for all people around the world, and ensure the app's long-term success as evidenced by the improvements in engagement, retention and satisfaction rate.
×
Coalescence
#LOGO
×
GerdFood App
#Mobile
×
Foodapp
#Mobile
×
Aroosapp
#Mobile
CONTACT ADDRESS
Liverpool Street, EC3V, London, UK
info@azarkheil.com
+44 7575065541