I'm the pixel crafter based in #Bangladesh. I make the visual for web and mobile application to be more interactive
#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.
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.
We designed wireframes and then started to apply the styling. To give a sense of progress, here is what we came out:
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.
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.
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.
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.
#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.
Currently spearheading the UX Design and research endeavours for the client as the Senior Product Designer.
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 overview of the document review workflow between the internal and the external companies is as follows:
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.
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.
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 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:
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.”
Changes made after Usability Testing:
#Case Study #Mobile
#Case Study #Mobile
#Case Study #WEBSITE
#Case Study #WEBSITE
#WEBSITE
A global platform for personalised clothing and accessories, we are the go-to-place for anyone looking to realize their creative ideas on quality fabrics. We value freedom of expression, whether it’s with your own designs or those made available by our community. T-shirts, sweaters, bags, aprons and a lot more can easily be personalized with images and custom text. Moreover, Spreadshirt is an ideal custom merchandise partner.
#Mobile
#LOGO #Mobile #WEBSITE
#WEBSITE
GerdFood
GerdFood is the first food tourism startup in all parts of Iran. With GerdFood you can identify the closest restaurant and eco-destination to your destination, based on user ratings and reviews, food menus, traditional food products, facilities and honors. Choose the restaurant and eco-friendly home in any part of Iran you want and experience local and traditional cuisine at your specified day and time without any concern for Iranian restaurants.
#LOGO
#Mobile
Pantel
Through integrating several capabilities like messaging, voice and video calls, and group and individual social networks, communication according to geographical location and trading online provides a unique instance of the next generation of communication for free, secure, and open source for the use of all people around the world.
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.
#LOGO
#Mobile
GerdFood
GerdFood is the first food tourism startup in all parts of Iran. With GerdFood you can identify the closest restaurant and eco-destination to your destination, based on user ratings and reviews, food menus, traditional food products, facilities and honors. Choose the restaurant and eco-friendly home in any part of Iran you want and experience local and traditional cuisine at your specified day and time without any concern for Iranian restaurants.
#Mobile
#Mobile
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vel, sint nisi possimus sunt veritatis totam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vel, sint nisi possimus sunt veritatis totam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vel, sint nisi possimus sunt veritatis totam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vel, sint nisi possimus sunt veritatis totam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vel, sint nisi possimus sunt veritatis totam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vel, sint nisi possimus sunt veritatis totam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vel, sint nisi possimus sunt veritatis totam velit, esse pariatur in minima nostrum harum dolorum perferendis quasi dolor autem deleniti inventore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vel, sint nisi possimus sunt veritatis totam velit, esse pariatur in minima nostrum harum dolorum perferendis quasi dolor autem deleniti inventore.
DOWNLOAD MY CVPoin dui orci, pretium eget fringilla sit amet, luctus a nisl. Praesent tristique scelerisque sapien at aliquet.
I was impressed with Hamid’s ability for designing logos as well as applications' UX and UI. And, of course, his creativity. Hamid would be a true asset for any position requiring artistic creativity and comes with my heartfelt recommendation.
AmirHossein Naghshzan, Software Engineer
Hamid Reza is the cross section between engineering and art. With a background in both, he strives to make his designs with utmost accuracy. He always keeps track of design trends in a way that I can trust that every guideline is followed. He prefers to be provided with the UX design and then makes everything feel right and in place. He is also very good in a team work environment because he is always open to any new idea or suggestion from anyone. Which helps the team to come up with the best design we can.
Yashar PourMohammad, Android engineer
Hamid Reza Azarkheil was part of my startup team. He was responsible for the entire graphical design for our brand, including logo design, UI for both web and app, and all social media appearance. I was impressed by his work from the first day we met and knew from that moment that he would be a valuable member of the team - which turned out to be very true. During his time with our startup, he always delivered beyond expectations, both by working in a timely manner and by the quality of his work. He sets high standards on himself and his design, and never gives up on making the customer happy. Hamid is very creative and always finds a way to create a hidden (or very apparent) meaning in his design, which I highly appreciated.
Kristín Grímsdóttir , Founder of Perlur
Hamid Reza is a very talented and creative person who's got strong, creative ideas but is also willing to listen as well as discuss ideas too. A thoroughly decent and nice guy to work with too. He would constantly do great work as a designer and wouldn't back down from challenges, or discussions. I'm convinced that Hamid Reza will go on to do great things, no matter what direction he takes, he's one of those people who got a great creative mind but can still think logically. I strongly recommend him if you need a great designer.
Mohammad Efazati , EMEA DevOps Engineer Manager
Copyright © 2024 Azarkheil All Rights Reserved.
I’m ready to help you. You just type details below, and/or send us a file.